Monday, April 11, 2011

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

Notes

  1. Daniel Lewis submitted this to 10lines