10 Lines or Fewer

Happy 10

Mon, 11 Apr 2011 22:39:25 -0400

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 :...

Mon, 11 Apr 2011 01:23:19 -0400

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;
    }

NOTE: See the animation here: http://focalstrategy.com/tests/10lines.html #box { width:...

Tue, 05 Apr 2011 17:22:26 -0400

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...

Tue, 05 Apr 2011 11:29:51 -0400

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;...

Tue, 05 Apr 2011 04:52:59 -0400

#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...

Tue, 05 Apr 2011 00:08:04 -0400

/* 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;

}