Icon RSS bằng CSS 3

Icon RSS bằng CSS 3

[Pu 3k*] Với vấn đề về CSS chắc ai cũng biết rồi vì anh An cũng đã làm nguyên mấy post để bàn về nó rồi nên mình thấy với các bạn cũng chẳng xa lạ gì nên bàn về cái RSS này luôn =))

Đây chỉ đơn giản là một thủ thuật để trang trí thêm cho biểu tượng rss thôi nên mọi người đừng tăng độ vip với nó làm gì :-j

Xem Demo 

B1: Chèn đoạn code sau vào trước thẻ ]]></b:skin>

#rss
{
position: relative;
display: block;
width: 75px;
height: 75px;
background: rgba(244,119,54,.85);
border: 1px solid rgba(0,0,0,.5);
border-radius: 10px;
-moz-box-shadow:0 0 5px rgba(0,0,0,.5),
3px 1px 5px rgba(0,0,0,.6),
inset 10px 10px 10px rgba(255,255,255,.5),
inset 0 10px 5px -7px rgba(255,255,255,.5),
inset 0 -20px 20px rgba(0,0,0,.4),
inset -10px 0 20px 15px rgba(102,102,102,.2);
-webkit-box-shadow:0 0 5px rgba(0,0,0,.6),
3px 1px 5px rgba(0,0,0,.6),
inset 10px 10px 10px rgba(255,255,255,.5),
inset 0 10px 5px -7px rgba(255,255,255,.5),
inset 0 -20px 20px rgba(0,0,0,.4),
inset -10px 0 20px 15px rgba(102,102,102,.2);
}
.rssCircle {
position: absolute;
bottom: 7px;
left: 7px;
z-index: 100;
display: block;
width: 15px;
height: 15px;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
background: #FFF;
}
.rssRing1 {
position: absolute;
left: 7px;
bottom: 7px;
z-index: 80;
display: block;
width: 30px;
height: 30px;
background: none;
border: 10px solid #fff;
border-top-right-radius: 50px;
-moz-border-radius-topright: 50px;
-webkit-border-radius-top-right: 50px;
border-left: none;
border-bottom: none;
}
.rssRing2 {
position: absolute;
left: 7px;
bottom: 7px;
z-index: 60;
display: block;
width: 55px;
height: 55px;
background: none;
border:10px solid #fff;
border-top-right-radius: 90px;
-moz-border-radius-topright: 90px;
-webkit-border-radius-top-right: 90px;
border-left: none;
border-bottom: none;
}
#rss:hover {background: rgba(29,194,227,.5)}
.rssCircle:hover {background: #F60;}
.rssRing1:hover {border-color: #F60;}
.rssRing2:hover {border-color: #F60;}

B2: Kế đến nếu bạn muốn chèn nó vào đâu thì hãy Paste đoạn code này vào

<a href="http://www.voquocan.com/feeds/posts/default" title="" id="rss">
<span class="rssCircle"></span>
<span class="rssRing1"></span>
<span class="rssRing2"></span>
</a>

Thay www.voquocan.com thành địa chỉ blog của bạn.
Ví dụ nếu muốn đăng trên 1 widget như trên Demo thì hãy tạo 1 HTML/Javascript rồi dán đoạn HTML ở bước 3 vào 

Ví dụ code mẫu web của tớ là

<a href="http://pu3k.blogspot.com/feeds/posts/default" title="" id="rss">
<span class="rssCircle"></span>
<span class="rssRing1"></span>
<span class="rssRing2"></span>
</a>

Cái này chủ yếu để trang trí cho blog thôi ha :D chứ còn ba cái vụ làm blog vip hơn thì tùy :)
PS: Các bạn có thể tùy biết hiệu ứng này cho một số module khác trên blog cũng khá hay đó.