Revision: 57194
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at May 20, 2012 23:14 by jntu_gnec
Initial Code
HTML :
<a id="rss" href="http://www.megawrz.com" target="_blank">
<span class="dot"></span>
<span class="line1"></span>
<span class="line2"></span>
</a>
CSS :
#rss{
width:60px;
height:60px;
background:#F60;
box-shadow:0 0 2px #000000;
position:relative;
padding:10px 10px 10px 10px;
border-radius:10px;
display:block;
}
#rss .dot{
width:20px;
height:20px;
border-radius:50%;
background:#FFF;
bottom:10px;
position:absolute;
-webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
transition:all 0.5s ease-in-out;
}
#rss:hover .dot{
background:#090;
}
#rss .line1{
width:25px;
height:25px;
border-radius:50%;
border:#FFF 10px solid;
position:absolute;
left:-5px;
bottom:-5px;
border-color:white transparent transparent transparent;
-webkit-transform:rotate(40deg) scale(1.5);
-moz-transform:rotate(40deg) scale(1.5);
-ms-transform:rotate(40deg) scale(1.5);
-o-transform:rotate(40deg) scale(1.5);
transform:rotate(40deg) scale(1.5);
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}
#rss .line2{
width:40px;
height:40px;
border-radius:50%;
border:#FFF 10px solid;
position:absolute;
left:-8px;
bottom:-8px;
border-color:white transparent transparent transparent;
-webkit-transform:rotate(40deg) scale(1.8);
-moz-transform:rotate(40deg) scale(1.8);
-ms-transform:rotate(40deg) scale(1.8);
-o-transform:rotate(40deg) scale(1.8);
transform:rotate(40deg) scale(1.8);
-webkit-transition:all 1.5s ease-in-out;
-moz-transition:all 1.5s ease-in-out;
-ms-transition:all 1.5s ease-in-out;
-o-transition:all 1.5s ease-in-out;
transition:all 1.5s ease-in-out;
}
#rss:hover .line1{
border-color:#0C0 transparent transparent transparent;
}
#rss:hover .line2{
border-color:#0F0 transparent transparent transparent;
}
Initial URL
http://www.megawrz.com/css/190484-pure-css-rss-icon.html
Initial Description
Here you can find a Simple RSS icon with CSS, i work with features like transition, transform and radius.
Initial Title
Pure CSS Rss Icon
Initial Tags
Initial Language
CSS