How To: Create Sexy bookmark like effect using pure css : re-cleaned


css sprite

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.

DEMO

Here is html code, simply copy and paste under your body tag:

1
2
3
4
5
6
7
8
<ul class="sharing-cl" id="text"> 
	<li><a class="sh-mail" href="">email</a></li> 
	<li><a class="sh-feed" href="">feed</a></li> 
	<li><a class="sh-tweet" href="">twitter</a></li> 
	<li><a class="sh-face" href="">facebook</a></li> 
	<li><a class="sh-su" href="">stumbleupon</a></li> 
	<li><a class="sh-digg" href="">digg</a></li> 
</ul>

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.

Recently Published

»

How to Show Related Posts in WordPress Without a Plugin?

Making your visitors go through each post increases the browsing time ...

»

Noteworthy Facts About Android App Piracy and How It Can Be Dealt With

Are you a gaming aficionado, and obsessed with gaming apps? Do you ...

»

4 Great Ways to Turn Your Images into SEO Tools

Photos on a website help us to understand the website much more ...

»

8 Search Form Tutorials Built With CSS3, jQuery & HTML5

Elevate the power of search by adding search functionality or search ...

»

10 Best HTML5 Frameworks For Hybrid App Development

Hybrid apps are generally built around native web view container or ...

»

A Look at The Evolution Of WordPress and What Future Holds For It

When it comes to developing a website, WordPress is the first name ...

»

7 WordPress Plugins That Make Your Site Mobile Responsive

Not much in the recent past, having a responsive website that works ...

»

Things you should Consider When You Are Designing an E-commerce Website

The people of today’s generation have discovered the various ...

»

Developing a Mobile App Using Open Source Software? Consider These Tips For Security

Today, almost every IT organization (including the Fortune 500 ...