The following social bookmark icon bar is created and styled using an HTML unordered list and a little CSS, giving you a way to create eye catching linky bits on your site.
In this example, the icons are displayed in a bar along one line, half visible and centered along a horizon. On hover, the icons move up to show the whole icon. Later, we’re going extend the icon movement using a small CSS 3 transition snippet. Looking for a working demo? it’s right here ;)
Note: to see transitions working, you need to use a supporting browser.
Starting with a UL (unordered list) Reset
To style the unordered list, we’re using a UL specific class, .social. For starters, we’re going to make a special mini-reset for this class, and its nested elements, based on the current reset from Eric Meyer to try to normalize the behavior between browsers. The following elements of this example are reset as follows:
ul.social,
ul.social img,
ul.social li {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
line-height: 1px;
list-style: none;
}
Resetting margin and padding is especially important for HTML lists, so that the new start values set a standardized default for the browsers and therefore consistency. The list-style property is set to none, as this list is going to be using the background-image property to display the images, instead of list-style-image.
Style the UL with a Horizon Shadow
The shadow graphic is 15 pixels high, this is going to be placed at the bottom of the UL to underline the icons. To do this, we’re adding 16 pixels of padding to the UL and placing the shadow, using the background-position property, at the bottom of the UL block; the 16 pixel value allows 1 pixel of background color to show through just under the icon row. We’re leaving out the second value for background-position, so that it defaults to center. The values we’re using for the background are declared using the background shorthand property. To center the contents of the UL, the LI elements, the text-align: center property is declared.
ul.social {
text-align: center;
padding-bottom: 16px;
background: url(img/social-shadow.png) no-repeat bottom;
}
Make LI Sit Next to Each Other
The LI elements of our social bookmarks list are styled with a fixed height and width, together with a display value of display:inline-block. Inline-block is used to make the LI flow inline while still keeping the styling advantages of the block element and natural horizontal spacing. Finally, the overflow property is set to hidden, this will hide the text that’s going to be inserted into the HTML code inside the A tag for usability purposes:
ul.social li {
width: 32px;
height: 32px;
display: inline-block;
overflow: hidden;
}
Link Styles Inside the LI
Each social bookmark image is going to be displayed using the background-image property of the link element, ul.social li a. So that a height and width can be set, we need change the default display property value for the A element, which is inline, to a block level element; we’re doing this so that we’re able to make the link fill the complete area of the LI, thereby allowing the image to fully show.
Next, the text-indent property is set to -100px to hide the text that we’re going to enter.
Finally, the basic CSS values that we need for all icon background images – no image, repeat and position – are also defined here so that they need only be defined once; later we only need to define the image url for the individual icons. The position of the image is set to show at half the value of its height, so that only the top half of the image displays, i.e the images are 32 pixels high so a value of 16 pixels places the image at 16 pixels from the top of the element.
ul.social li a {
display: inline-block;
height: 100%;
width: 100%;
text-indent: -100px;
text-decoration: none;
background: none no-repeat 0 16px;
}
The style for hover follows directly after the link element declaration, and is used to change the position the background image so that it is fully visible:
ul.social li a:hover {
background-position: 0 0;
}
Add the Social Icons in place
Now that all the styles are set, we only need to add the individual icons as background images on the A elements, and, because we’ve already defined positioning and repeat values, we only need to enter the image path for each link, and that each one is different, we need a separate class for each:
ul.social li a.brightkite {background-image: url(img/brightkite_32.png);}
ul.social li a.delicious {background-image: url(img/delicious_32.png);}
ul.social li a.facebook {background-image: url(img/facebook_32.png);}
ul.social li a.google {background-image: url(img/google_32.png);}
ul.social li a.lastfm {background-image: url(img/lastfm_32.png);}
ul.social li a.linkedin {background-image: url(img/linkedin_32.png);}
ul.social li a.rss {background-image: url(img/rss_32.png);}
ul.social li a.twitter {background-image: url(img/twitter_32.png);}
ul.social li a.xing {background-image: url(img/xing_32.png);}
ul.social li a.youtube {background-image: url(img/youtube_32.png);}
All Ready to Create the HTML
I tend to work backwards when creating CSS, first the CSS then the HTML, that way, the only thing left to do is to write the HTML, link in the style sheet, test, tweak, test and tweak again and the job flows smoothly. So here we are, lastly, with the HTML for the social bookmark Icon bar:
<ul title="social bookmark links" class="social">
<li><a class="brightkite" href="#">brightkite</a></li>
<li><a class="delicious" href="#">delicious</a></li>
<li><a class="facebook" href="#">facebook</a></li>
<li><a class="google" href="#">google</a></li>
<li><a class="lastfm" href="#">lastfm</a></li>
<li><a class="linkedin" href="#">linkedin</a></li>
<li><a class="rss" href="#">rss</a></li>
<li><a class="twitter" href="#">twitter</a></li>
<li><a class="xing" href="#">xing</a></li>
<li><a class="youtube" href="#">youtube</a></li>
</ul>
There you have the bar finished.
We could leave our social icon bar just the way it is, it’s already looking ok, but we can add a little refinement by controlling how the image moves on hover. I liked the idea of making the hover a bit chicer using a little CSS 3 transition snippet (up to today, it’s working in Firefox 4, Chrome and Safari).
Adding That Little Extra Using CSS 3 Transition
As CSS 3 comes more and more into work in the browsers, it’s great to start playing around even if it’s not quite ready, so I liked the idea of making the hover a bit nicer with a small transition snippet. Using the transition shorthand property, we need to add the code to ul.social li a (not ul.social li a:hover):
ul.social li a {
transition: background-position 0.3s linear;
}
Where background-position defines the value that’s going to be affected, 0.3s defines how fast this is going to happen, linear defines which timing function to use.
Tip: you can add multiple sets of declarations to the transition property, each being separated by a comma. e.g. transition: background-position 0.3s linear, background-color 0.4s ease-in;
Predefined timing functions include: ease, linear, ease-in, ease-out, and ease-in-out , these are all preset cubic-bezier values. You can set cubic-bezier values manually using cubic-bezier(p0,p1,p2,p3). Find out more about the transition property at W3C.
The code creates a smooth transition when the background-position changes, on hover, from 16px to 0px. The final code together with prefixes, (unprefixed declaration always after the prefixed versions):
ul.social li a {
display: inline-block;
height: 100%;
width: 100%;
text-indent: -100px;
text-decoration: none;
background: none no-repeat 0 16px;
-moz-transition: background-position 0.3s linear;
-webkit-transition: background-position 0.3s linear;
-o-transition: background-position 0.3s linear;
-ms-transition: background-position 0.3s linear;
transition: background-position 0.3s linear;
}
Finished! The complete code look as follows:
<ul title="social bookmark links" class="social">
<li><a class="brightkite" href="#">brightkite</a></li>
<li><a class="delicious" href="#">delicious</a></li>
<li><a class="facebook" href="#">facebook</a></li>
<li><a class="google" href="#">google</a></li>
<li><a class="lastfm" href="#">lastfm</a></li>
<li><a class="linkedin" href="#">linkedin</a></li>
<li><a class="rss" href="#">rss</a></li>
<li><a class="twitter" href="#">twitter</a></li>
<li><a class="xing" href="#">xing</a></li>
<li><a class="youtube" href="#">youtube</a></li>
</ul>
CSS:
ul.social,
ul.social img,
ul.social li {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
line-height: 1px;
list-style: none;
}
ul.social {
text-align: center;
padding-bottom: 16px;
background: url(img/social-shadow.png) no-repeat bottom;
}
ul.social li {
width: 32px;
height: 32px;
display: inline-block;
overflow: hidden;
}
ul.social li a {
display: inline-block;
height: 100%;
width: 100%;
text-indent: -100px;
text-decoration: none;
background: none no-repeat 0 16px;
-moz-transition: background-position 0.3s linear;
-webkit-transition: background-position 0.3s linear;
-o-transition: background-position 0.3s linear;
-ms-transition: background-position 0.3s linear;
transition: background-position 0.3s linear;
}
ul.social li a:hover{background-position: 0 0;}
ul.social li a.brightkite {background-image: url(img/brightkite_32.png);}
ul.social li a.delicious {background-image: url(img/delicious_32.png);}
ul.social li a.facebook {background-image: url(img/facebook_32.png);}
ul.social li a.google {background-image: url(img/google_32.png);}
ul.social li a.lastfm {background-image: url(img/lastfm_32.png);}
ul.social li a.linkedin {background-image: url(img/linkedin_32.png);}
ul.social li a.rss {background-image: url(img/rss_32.png);}
ul.social li a.twitter {background-image: url(img/twitter_32.png);}
ul.social li a.xing {background-image: url(img/xing_32.png);}
ul.social li a.youtube {background-image: url(img/youtube_32.png);}
Here, you can view this example in its own window!
That’s all for now, thanks for dropping in. Come back soon for part 2 of our three part series about unordered lists and social bookmark icons, where we’ll be looking at how to make a link block, together with CSS 3 implementation.
Credits: the social bookmark icons used in this tutorial are from Webdesigner Depot
thanks to Daniel for making me move my a** to get a syntax plug ;)
Create professional websites and online shops without programming:
