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

»

Combine HTML5 & Bootstrap As Key Ingredients For Rebooting Your Business

HTML5 has achieved the tremendous heights in the recent years owing ...

»

10 Tips On Social Media That Will Land Your Dream Job

A job search trends survey conducted by Jobvite showed that 48% of ...

»

10 Best Node.js Frameworks For Web And Apps Development

Node.js is counted among one of the most renowned JavaScript runtime ...

»

Fetch Your Customers : Retail Commerce

As listening the word commerce it comes in our mind that it is ...

»

Best App Design Practices for 2016

The year 2015 witnessed some groundbreaking revolution regarding app ...

»

9 Websites To Visit For Exemplary Footer Design Inspiration

When we set out to design a website, our primary focus is on the ...

»

What are the Cloud Computing trends to dominate in 2016

With Cloud computing, it has developed cell phones into a remote ...

»

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 ...