wysiwyg logo Social Media icons, CSS Sprite example

Social Media icons, CSS Sprite example

here's the one image with the icons     download the demo

Step 1. code HTML

<ul id="social-networking">
	<li class="twitter"><a href="#;"></a> </li>
	<li class="facebook"> <a href="#;"></a> </li>
	<li class="linkedin"> <a href="#;"></a> </li>
	<li class="picasa"> <a href="#;"></a> </li>
	<li class="love"> <a href="#;"></a> </li>
</ul>

Step 2. Styling - CSS

ul#social-networking{ margin:0px 0 0 0; text-align:center; display:block; float:left; padding:0px 0px 0px 0px; font-size:12px; } #social-networking li { margin: 0; padding: 0; list-style: none; background: url(i/clean-social-icons.jpg) no-repeat; } #social-networking li, #social-networking a { width: 54px; height: 54px; display: block; float: left; } ul#social-networking li.twitter {background-position: -134px -74px;} ul#social-networking li.facebook {background-position: -3px -10px;} ul#social-networking li.linkedin {background-position: -385px -12px;} ul#social-networking li.picasa {background-position: -258px -137px;} ul#social-networking li.love {background-position: -258px -137px;} ul#social-networking li:hover{opacity:0.6;} Cross Browser Transparency with CSS.(check it out)

Step 3. add hover opacity to it

ul#social-networking li:hover{opacity:0.6;}

Step 4. put it all together(demo) download the demo

xnet 1998 - 2012
בדיקת דומיין