Happy 10
https://github.com/iguigova/snippets_js/tree/master/cssIn10Lines
<style> #text:before { content: "\273F"; /*"\273F"; "\2740"; ✿ ❀*/ 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;
}
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=’#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); }
/* 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;
}
