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:

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

.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

»

Docker: How To Build Better Development Security With It

The top concern among developers and DevOps teams is security within ...

»

Mobile Development: How to Reduce Costs

Modern markets have become so competitive that it has become vital ...

»

Know-How DevOps Benefits Your Business

The organizations in this current fast-paced environment need to ...

»

10 Best Prototyping Tools for UI/UX Designers

Website design for a client gets only successful if you follow their ...

»

Social Media Marketing: Strategy To Boost Ecommerce-Traffic

According to a recent study, the experts revealed that people aged ...

»

How Flutter Can Help Reduce Overall Mobile App Development Cost?

Before jumping on answering the question, let me first walk you ...

»

Which One is Better? DigitalOcean Or AWS?

Digitalocean or AWS: Picking a cloud service for your application or ...

»

Killing way to select Domain Name and Hosting

Planning to launch your online presence? We know it’s all very ...

»

7+ blogs to inspire how they made more than $200 in a day

On this page I want to go through the blogs on how they earn money ...