Clothesline Social Bookmarks – A CSS-only Social Bookmarking Tutorial

Today we will create a fancy social bookmarking solution which will not require any JavaScript – it is only CSS based.

We will hang up some rotated social bookmark icons on a clothesline and put a cute Tweetie sitting on top of it. This will just be an example and, of course, you are encouraged to add the social bookmarks that you find relevant to your page. This solution is just a showcase and might be way too big for some tastes.

In this tutorial you will learn about

1. absolute positioning of elements
2. using background images
3. using negative positioning values
4. social bookmark links for static pages and for WordPress

Ok, let’s start with the markup.

1. The HTML

The Markup will consist of a div that contains the social bookmark icons as links. Each link will have a span inside which will be the clothes pin “holding” the icon. Additionally, the main div will contain a div for the clothesline itself:

<div class="cl_container">
	<div class="cl"></div>
	<a class="digg" href="http://digg.com/submit?phase=2&url=http://www.tympanus.net/Clothesline_Tutorial/&title=Clothesline Social Bookmarking Tutorial"><span></span></a>
	<a class="tech" href="http://www.technorati.com/faves?add=http://http://www.tympanus.net/Clothesline_Tutorial/"><span></span></a>
	<a class="mixx" href="http://www.mixx.com/submit?page_url=http://http://www.tympanus.net/Clothesline_Tutorial/"><span></span></a>
	<a class="stumble" href="http://www.stumbleupon.com/submit?url=http://www.tympanus.net/Clothesline_Tutorial/&title=Clothesline Social Bookmarking Tutorial"><span></span></a>
	<a class="reddit" href="http://reddit.com/submit?url=http://www.tympanus.net/Clothesline_Tutorial/&title=Clothesline Social Bookmarking Tutorial"><span></span></a>
	<a class="twitter" href="http://twitthis.com/twit?url=http://http://www.tympanus.net/Clothesline_Tutorial/&title=Clothesline Social Bookmarking Tutorial"></a>
</div>

The links are all specific for the according service and usually it is required to provide the URL and the title of the website. In this case, we provided static information. If you want to contact the services from you WordPress blog, you can add some PHP code to dynamically set the URL and title of the article that you are posting. For that, you will need to replace the URL and, if needed, the title with the PHP function that provides the URL and title of the article:

• URL: <?php echo get_permalink() ?>
• Title: <?php the_title(); ?>

You can use a service like iFeedReaders to create all the links for you.

2. The CSS

The main container will have relative positioning because we want to be able to use it somewhere on a webpage:

.cl_container{
	width:100%;
	height:190px;
	position:relative;
	background:transparent url(../images/cl.png) repeat-x 0% 40px;
}

The container will have a repeated background image which will be the clothesline. The horizontal position shall be 0 which means that it will be left and the vertical position will be 40px which means that the image will be 40px from the top.
Now, we will define the link elements and all their common properties:

.cl_container a{
	width:130px;
	height:130px;
	position:absolute;
	top:32px;
	outline:none;
	opacity:0.8;
}
.cl_container a:hover{
	opacity:1.0
}

The width and height of the elements should be the size of the images that you are using. These ones are pretty big. The top position will be 32px since we want the icons to look like they are attached to the clothesline. Only for the cool browsers we say that the opacity is 0.8 initially and 1.0 when hovering. This will create a neat effect. (You might as well use this filter property for IE: filter:progid:DXImageTransform.Microsoft.Alpha(opacity=80), if you really really need to…)

The icons will have the following properties:

a.digg{
	left:22px;
	background:transparent url(../images/digg_koi.png) no-repeat top left;
}
/* each around plus 168px*/
a.tech{
	left:190px;
	background:transparent url(../images/technorati_koi.png) no-repeat top left;
}
a.mixx{
	left:359px;
	background:transparent url(../images/mixx_koi.png) no-repeat top left;
}
a.reddit{
	left:529px;
	background:transparent url(../images/reddit_koi.png) no-repeat top left;
}
a.stumble{
	left:698px;
	background:transparent url(../images/stumble_koi.png) no-repeat top left;
}

And the pin (which is the span inside of the link elements) will have the following style:

.cl_container a span{
	width:17px;
	height:44px;
	position:absolute;
	background:transparent url(../images/pin.png) no-repeat top left;
	top:-20px;
	left:55px;
}

We need to position the pin in the middle of the surrounding link element which is 130 pixels wide and so we set left to 55px. Since we positioned the clothesline image in the middle of the main container, we need to pull the pins “up”. We do that by giving a negative top value of -22px. Of course, we could have positioned the whole main container differently and avoid using this negative value now, but it shows how you can simply use negative values when it comes in handy. In other scenarios you can profit of negative margins and positioning because, instead of moving more elements around, you can adjust just one single element by giving it a negative positioning or margin.

And last, but not least, we add the style of cute Tweetie:

a.twitter{
        left:800px;
	width:160px;
	height:160px;
	top:-85px;
	background:transparent url(../images/twitter.png) no-repeat top left;
}

The Twitter bird needs to be pulled up in order to make it look like he sits on top of the rope. So, we say top:-85px.

And that’s it!

The resources for this tutorial can be found here:

• The clothesline pins and the idea for the clothesline: http://dragonartz.wordpress.com/2008/10/29/polaroid-frames-vector-set/
• The iconpack by Koi Design on DeviantArt: http://koidesign.deviantart.com/art/koidesign-social-icon-pack-135276528
• The Twitter bird by talented Gopal Raju: http://www.productivedreams.com/free-twitter-bird-icon-set/

Please get the icon sets there since I am not allowed to redistribute them like this (I cannot provide them in the downloadable zip file).

Happy new year and enojy!!!