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

»

Is Your Business Site Fully Accessible?

Does your business site have full accessibility? Even with the ADA ...

»

Secure Web: 5 Best Practices For Application Development

There are several essential best practices for secure web ...

»

Laravel PHP Framework: Features and benefits for web development

Companies and organizations are focusing on developing custom web ...

»

Web Development Vs. Software Development: What Is the Difference?

As technology continues to transform all aspects of our lives, a lot ...

»

Web Redesign : Is Your Landing Page Begging for one?

How do you know when it’s time to web redesign your landing page? ...

»

Customer Acquisition: Few Steps To Improve This.

Customer acquisition is essential to any business’s success — to ...

»

Mobile App Development Tools: 5 Enterprise-Ready For Rapid Deployment

There are several enterprise-ready mobile app development tools for ...

»

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