Hi Folks. For this summer time, no tips, no PHP magic code, no TXP tags. Here is a beautiful and pure CSS method for displaying a “Share This” box on your website.

Have you read this awesome tutorial? The trick on this jQuery script is to manipulate dynamically the z-index property on image elements.

It’s a great demonstration. But I would like to accomplish the same only with CSS. So I found a new solution – a more semantic one with lots of creative possibilities.

Put this into your article form where you want to display it:

 	<ul id="share-this">
		<li id="share">Share this on:</li>
		<li><a href="http://del.icio.us/post?url=<txp:permlink />&amp;title=<txp:title />" onclick="window.open(this.href,'newwin'); return false;"" class="one" style="z-index:6"><b>delicious</b></a></li>
		<li><a href="http://digg.com/submit?phase=2&amp;url=<txp:permlink />&amp;title=<txp:title />" onclick="window.open(this.href,'newwin'); return false;"" class="two" style="z-index:5"><b>digg</b></a></li>
		<li><a href="http://www.technorati.com/faves?add=<txp:permlink />" onclick="window.open(this.href,'newwin'); return false;"" class="three" style="z-index:4"><b>technorati</b></a></li>
		<li><a href="http://www.stumbleupon.com/submit?url=<txp:permlink />&amp;title=<txp:title />" onclick="window.open(this.href,'newwin'); return false;"" class="four" style="z-index:3"><b>sumbleUpon</b></a></li>
		<li><a href="http://www.mixx.com/submit?page_url=http://txp-fr.co.cc&amp;title=<txp:title />" onclick="window.open(this.href,'newwin'); return false;"" class="five" style="z-index:2"><b>mixx</b></a></li>
		<li><a href="http://reddit.com/submit?url=<txp:permlink />&amp;title=<txp:title />" onclick="window.open(this.href,'newwin'); return false;"" class="six" style="z-index:1"><b>reddit</b></a></li>
	</ul>

Then use these CSS rules:

/* =Share-This
---------------------------------- */

ul#share-this{list-style-type:none;position:relative;width:15em;height:5em;margin:0 0 2em 5em;padding:0}
ul#share-this li{margin:0;padding:0}
ul#share-this li a{display:block;text-decoration:none;text-indent:-9999px;position:absolute;z-index:1;top:-.2em;left:0;width:36px;height:36px}
ul#share-this li a:hover{z-index:7!important;left:-2px;width:40px;height:50px;top:-10px;padding:0 0 4px 0}
ul#share-this li a:hover b{display:block;text-indent:0;position:relative;top:50px;left:-2em;width:6em;text-align:center;color:#333}
ul#share-this li#share{margin-left:-6em;padding-top:10px}

ul#share-this li a.one{background:url(images/delicious_36.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/delicious_36.png', sizingMethod='crop')}

ul#share-this li a.one:hover{background:url('images/delicious_36.png') no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/delicious_36.png', sizingMethod='crop')}

ul#share-this li a.two{background:url(images/digg_36.png) no-repeat;left:22px;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/digg_36.png', sizingMethod='crop')}

ul#share-this li a.two:hover{background:url('images/digg_36.png') no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/digg_36.png', sizingMethod='crop')}

ul#share-this li a.three{background:url(images/technorati_36.png) no-repeat;left:44px;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/technorati_36.png', sizingMethod='crop')}

ul#share-this li a.three:hover{left:42px;background:url('images/technorati_36.png') no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/technorati_36.png', sizingMethod='crop')}

ul#share-this li a.four{background:url(images/sumbleupon_36.png) no-repeat;left:66px;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/sumbleupon_36.png', sizingMethod='crop')}

ul#share-this li a.four:hover{left:64px;background:url('images/sumbleupon_36.png') no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/sumbleupon_36.png', sizingMethod='crop')}

ul#share-this li a.five{left:88px;background:url(images/mixx_36.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/mixx_36.png', sizingMethod='crop')}

ul#share-this li a.five:hover{background:url('images/mixx_36.png') no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/mixx_36.png', sizingMethod='crop')}

ul#share-this li a.six{left:110px;background:url(images/reddit_36.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/reddit_36.png', sizingMethod='crop')}

ul#share-this li a.six:hover{left:108px;background:url('images/reddit_36.png') no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/reddit_36.png', sizingMethod='crop')}

Ok. You’ve got a beautiful “Share This” box for your articles now. With no image inline (for semantic reason), The “Share this on” invite support multi-languages website. It supports <= IE6 png transparency.

Note: The icons used may be found here.

Have fun!