Sexy bookmark like effect using pure css : re-cleaned
On December 15, 2009, In CSS, HTML, by Steve
You must heard of sexy bookmark plugin of wordpress. I really like the way it pop up the icons on hover. Sexy bookmarks is using javascript to accomplish this.
I tried it using only css. This method of using css is known as css sprites. Css sprite is very useful technique in optimizing website performance.
Here is html code, simply copy and paste under your body tag:
1 2 3 4 5 6 7 8 |
Copy the CSS under your head tag:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
.sharing-cl{ overflow:hidden; margin:0; padding:0; list-style:none; } .sharing-cl a{ overflow:hidden; width:75px; height:30px; float:left; margin-right:5px; text-indent:-200px; background:url("http://www.webdeveloperjuice.com/demos/images/share-sprite.png") no-repeat; } a.sh-su{background-position:-210px -40px;} a.sh-feed{background-position:-70px -40px;} a.sh-tweet{background-position:-140px -40px;} a.sh-mail{background-position:0 -40px;} a.sh-digg{background-position:-280px -40px;} a.sh-face{ margin-right:0; background-position:-350px -40px; } a.sh-mail:hover{background-position:0 1px;} a.sh-feed:hover{background-position:-70px 1px;} a.sh-tweet:hover{background-position:-140px 1px;} a.sh-su:hover{background-position:-210px 1px;} .sh-digg:hover{background-position:-280px 1px;} a.sh-face:hover{ background-position:-350px 1px; }
#text{ margin-top:3em; font-weight:bold; font-family:helvetica,arial,sans-serif; } #text a{ text-indent:0; height:auto; text-align:center; font-size:11px; padding-top:35px; color:#999; text-decoration:none; }
|
Here is your image sprite upload in your images folder.
All Done!! Isn’t it easy?
Cheers!
Since this was my first post on this blog and i made silly mistakes. Thanks to Chris who made me realize i shouldn’t have done this.
Therefore i have updated this post as not to misguide challengers.