Monday, April 11, 2011

Happy 10

https://github.com/iguigova/snippets_js/tree/master/cssIn10Lines

    <style>      #text:before      {          content: "\273F"; /*"\273F";  "\2740"; &#10047; &#10048;*/          position: absolute;          font-size: 200;          background-color: green;          color: red;          opacity: 0.7;          /*border: 1px groove yellow;*/          width: 150;          height: 180;      }      #text      {          font: 45  Monospace;          width: 100;      }    </style>

See Animation for hover : http://www.sympletech.com/tests/10orless.html

——————————————————————————————

    #box{
        -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px;
        background: #cd61e4; background: -moz-linear-gradient(100% 100% 90deg, #cd61e4, #d9c0de); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cd61e4), to(#d9c0de)); background: -webkit-linear-gradient(#cd61e4, #d9c0de); background: -o-linear-gradient(#cd61e4, #d9c0de);
        -moz-box-shadow: 6px 5px 3px hsla(0,0%,0%,.2); -webkit-box-shadow: 6px 5px 3px hsla(0,0%,0%,.2); box-shadow:6px 5px 3px hsla(0,0%,0%,.2);
        padding:100px;
        float:left;
        }
       
    #text:before{
        content : ‘Made In’;
    }
    #text{
        text-shadow: 2px 3px 5px #000;
    }
   
    #text, #box:hover{
        opacity:0.50;-ms-filter:”progid:DXImageTransform.Microsoft.Alpha(opacity=50)”;filter:alpha(opacity=50);zoom:1;       
    }
   
    #box:hover{
        cursor:pointer;
        -webkit-transition: all 1000ms ease; -moz-transition: all 1000ms ease; -o-transition:all 1000ms ease; transition:all 1000ms ease;
    }

Tuesday, April 5, 2011

NOTE: See the animation here:

http://focalstrategy.com/tests/10lines.html

#box {

width: 200px; height: 260px; margin: 0 auto; -webkit-perspective: 800; }

#box:hover #text { -webkit-transition: all 2s; -webkit-transform: rotateY( 720deg ) rotateX(360deg); }

NOTE: Click on the image to see the animation.
@-webkit-keyframes ANIMATION { 0% { font-size: 300%; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; } 50% { font-size: 100%; opacity: 1; } 100%  { font-size: 300%; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; } } @-moz-keyframes ANIMATION { 0% { font-size: 300%; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; } 50% { font-size: 100%; opacity: 1; } 100%  { font-size: 300%; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; } } #box { -webkit-animation: ANIMATION 1s infinite; -moz-animation: ANIMATION 1s infinite; animation: ANIMATION 1s infinite; } body { background-color: #AAA; background-image: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#000)); background-image: -moz-linear-gradient(top,  #CCC,  #000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#8217;#CCCCCC&#8217;, endColorstr=&#8217;#000000&#8217;); } body { text-align: center; } body { font: Helvetica, Arial, Tahoma, sans-serif; } body { overflow: hidden; } #box { margin: 30% auto; }

NOTE: Click on the image to see the animation.

@-webkit-keyframes ANIMATION { 0% { font-size: 300%; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; } 50% { font-size: 100%; opacity: 1; } 100% { font-size: 300%; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; } } @-moz-keyframes ANIMATION { 0% { font-size: 300%; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; } 50% { font-size: 100%; opacity: 1; } 100% { font-size: 300%; -webkit-opacity: 0; -moz-opacity: 0; opacity: 0; } } #box { -webkit-animation: ANIMATION 1s infinite; -moz-animation: ANIMATION 1s infinite; animation: ANIMATION 1s infinite; } body { background-color: #AAA; background-image: -webkit-gradient(linear, left top, left bottom, from(#CCC), to(#000)); background-image: -moz-linear-gradient(top, #CCC, #000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#CCCCCC’, endColorstr=’#000000’); } body { text-align: center; } body { font: Helvetica, Arial, Tahoma, sans-serif; } body { overflow: hidden; } #box { margin: 30% auto; }

#text {
  width: 12em; height: 12em;
  background: #06c; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), color-stop(0.5, rgba(0, 0, 0, 0.25)), color-stop(0.5, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.25)), color-stop(0.5, rgba(0, 0, 0, 0.25)), color-stop(0.5, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.5)), -moz-linear-gradient(left, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.5)); background-image: linear-gradient(top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.5)), linear-gradient(left, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.5));
  -moz-background-size: 3.5em 3.5em; -webkit-background-size: 3.5em 3.5em; background-size: 3.5em 3.5em;
  -moz-border-radius: 10em; -webkit-border-radius: 10em; border-radius: 10em;
  color: #fff;
  font: 2em/12em Helvetica;
  text-align: center;
  -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

#text {

  width: 12em; height: 12em;

  background: #06c; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.25)), color-stop(0.5, rgba(0, 0, 0, 0.25)), color-stop(0.5, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.25)), color-stop(0.5, rgba(0, 0, 0, 0.25)), color-stop(0.5, rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.5)), -moz-linear-gradient(left, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.5)); background-image: linear-gradient(top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.5)), linear-gradient(left, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.5));

  -moz-background-size: 3.5em 3.5em; -webkit-background-size: 3.5em 3.5em; background-size: 3.5em 3.5em;

  -moz-border-radius: 10em; -webkit-border-radius: 10em; border-radius: 10em;

  color: #fff;

  font: 2em/12em Helvetica;

  text-align: center;

  -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }

/* Ten lines of CSS, and one comment: Vendor-prefixed duplicates are grouped onto single lines */
#box { background: #000; background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#333)); background: -moz-linear-gradient(top, #000, #333); background: -webkit-linear-gradient(top, #000, #333); background: linear-gradient(top, #000, #333); }
#text {
  padding: 1em;
  background: #ccc; background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.5, #888), color-stop(0.5, #707070), to(#111)); background: -moz-linear-gradient(linear, #fff, #888&#160;50%, #707070&#160;50%, #111); background: linear-gradient(linear, #fff, #888&#160;50%, #707070&#160;50%, #111);
  -moz-background-clip: text; -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font: 48pt Myriad, sans-serif;
  text-align: center;
}

/* Ten lines of CSS, and one comment: Vendor-prefixed duplicates are grouped onto single lines */

#box { background: #000; background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#333)); background: -moz-linear-gradient(top, #000, #333); background: -webkit-linear-gradient(top, #000, #333); background: linear-gradient(top, #000, #333); }

#text {

  padding: 1em;

  background: #ccc; background: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(0.5, #888), color-stop(0.5, #707070), to(#111)); background: -moz-linear-gradient(linear, #fff, #888 50%, #707070 50%, #111); background: linear-gradient(linear, #fff, #888 50%, #707070 50%, #111);

  -moz-background-clip: text; -webkit-background-clip: text; background-clip: text;

  color: transparent;

  font: 48pt Myriad, sans-serif;

  text-align: center;

}