Displaying your social bookmark icons in a simple, animated CSS block is sometimes just what you need.
In this tutorial we’re going to create that with just an unordered list, a few lines of code, CSS styles, including CSS 3, together with a few nicely crafted social bookmark icons.
Reset as Usual
First we’re going to set a few reset values, to normalize how the block displays over a range of different browsers. Using the following reset, we’re starting new with padding, margin, font, vertical-align, line-height property values. The icons are going to placed as background-images so we’re also setting the list-style to none:
ul.social_block,
ul.social_block img,
ul.social_block li {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
line-height: 1px;
list-style: none;
}
Add Style to Create a UL Box
The UL is going to be given a fixed width, a border, background color and padding to frame the icons. The actual finished width of the UL is calculated based on the layout of its LI elements, how these calculations were worked out are covered later:
ul.social_block {
padding: 4px 7px 7px 4px;
background-color: #fbfbfb;
border: solid 1px #ddd;
width: 129px;
overflow: auto;
}
The UL needs 7 pixels of padding around the contents, but because the LI elements also need to be spaced in relation to each other by 3 pixels margin, we need to minus the top and left padding so that we can later add this to the LI to create our 7 pixels.
Each LI of the unordered list is going to float left, have a fixed height and width together with fixed spacing created by the use of padding and margins, where the margins are also going to complete the top/left visual 7 pixel space of the UL box whilst also separating each LI by 3 pixels. Finally a border and background hover color are added.
ul.social_block li {
margin: 3px 0 0 3px;
padding: 3px;
border: solid 1px #ddd;
width: 32px;
height: 32px;
display: block;
float: left;
overflow: hidden;
}
ul.social_block li:hover{
background-color: #eee;
border-color: #ccc;
}
Calculating the UL Width Based on the Content
Each icon image measures 32 x 32 pixels, this is the size we need to base the calculation on to create the outer UL box. After deciding that 3 icons per row is the right amount, we can start to calculate the dimensions. Depending on these dimensions the icons will wrap around, 3 icons per row, to fill the available space.
To calculate the amount of horizontal space that one LI needs, we need to add together its width, horizontal padding, horizontal margin and vertical border widths, these are as follows:
fixed width: 32 pixels
left margin: 3 pixels
left padding: 3 pixels
right padding 3 pixels
border left: 1 pixel
border right: 1 pixel
This gives a total width of 43 pixels per LI (icon container). As we want three icons per row, our UL needs to be 3 x 43 pixels (129 pixels) wide.
How Wide Will the UL Container Be?
Knowing the size of the outer box gives you the info you need when fitting this snippet into your website, so you can adjust it to fit in using adjusted margin and padding settings.
To calculate the actual width of the final UL, we need to add together its width, left and right padding and margins, and vertical border widths. The actual rendered width of our example UL will then be:
fixed width: 129
left/right padding: 11 (4+7)
vertical border widths: 2 (1+1)
giving a total width of 142 pixels.
Adding Social Icons and Hover Effects
Now that our container is set up, we can style and add the icons to the A element, and highlight background-color for the LI hover.
The A element is set to 100% height and width so that it fills the LI area and the general values for background property are defined:
ul.social_block li a {
display:inline-block;
height:100%;
width:100%;
text-indent:-100px;
text-decoration:none;
background:none no-repeat center;
}
To add the hover on the LI, simply create a LI:hover pseudo class and add the styles:
ul.social_block li:hover {
background-color:#eee;
border-color:#ccc;
}
As in our previous Social Icons Bar experiment, each social icon is placed as a background image on the link, therefore we need to create a class for each one. Here, we need only define the background-image, because we’ve already set general background values on ul.social_block li a.
ul.social_block li a.brightkite {background-image:url(img/brightkite_32.png);}
Remember, the Social Block is set up to display 3 icons per row, so it’s a good idea to have just the right number of icons divisible by three. If you find this is just not going to happen, you can always display a blank LI by simply adding a link without class:
<li><a href="#">blank</a></li>
Simply Loving CSS 3
To add a bit of spice to our hover, we can use one or two of the new, scrumptious, properties that are coming into play with CSS 3.
Although not fully supported, CSS 3 is making it possible to add rounded corners, background gradients, background-size and transitions. The example on the left, is looking it’s best in Safari.
Add Rounded Corners to UL and LI
Because there’s going to be a rounded border on both UL and LI, we can use a group declaration, you could also move the border shorthands here if you want the properties to stay the same:
ul.social_block,
ul.social_block li {
border:solid 1px #ddd;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
Add a Background Gradient to the UL Box
Now we’re going to add a background gradient to the UL box, but still defining the background-color for non-supporting browsers:
ul.social_block {
padding:4px 7px 7px 4px;
/*css3*/
background-color:#fbfbfb;
background: -moz-linear-gradient(top, #fff, #efefef);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#efefef));
width:129px;
overflow:auto;
}
Add Transition to the Background-Size Property
I want the transition to behave smoothly, uncomplicated and quite fast, so I’m choosing the linear timing function and a duration of 0.2 seconds, declaring it using the transition shorthand property, the extended code for the A element:
ul.social_block li a {
display:inline-block;
height:100%;
width:100%;
text-indent:-100px;
text-decoration:none;
background:none no-repeat center;
/*css 3*/
-moz-transition: background-size 0.2s linear;
-webkit-transition: background-size 0.2s linear;
-o-transition: background-size 0.2s linear;
transition: background-size 0.2s linear;
}
When the transition if finished, the image needs to return to its original size, the browser needs to know this to perform the transition, i.e. from and to which size, so we need to add this to the a:hover
ul.social_block li a:hover {
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
And Finally, I want to animate the background-color of the LI on hover, so we need to add the transition code to the LI
ul.social_block li {
margin:3px 0 0 3px;
padding:3px;
width:32px;
height:32px;
overflow:hidden;
display:block;
float:left;
/*css 3*/
-moz-transition: background-color 0.5s ease;
-webkit-transition: background-color 0.5s ease;
-o-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}
So, we’re all done, here’s the complete code snippet for the Social Icon Block:
HTML:
<ul class="social_block"> <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> </ul>
CSS:
/*reset*/
ul.social_block,
ul.social_block img,
ul.social_block li {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
line-height: 1px;
list-style: none;
}
ul.social_block,
ul.social_block li {
border:solid 1px #ddd;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
}
ul.social_block {
padding:4px 7px 7px 4px;
/*css3*/
background-color:#fbfbfb;
background: -moz-linear-gradient(top, #fff, #efefef);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#efefef));
width:129px;
overflow:auto;
}
ul.social_block li {
margin:3px 0 0 3px;
padding:3px;
width:32px;
height:32px;
overflow:hidden;
display:block;
float:left;
/*css 3*/
-moz-transition: background-color 0.5s ease;
-webkit-transition: background-color 0.5s ease;
-o-transition: background-color 0.5s ease;
transition: background-color 0.5s ease;
}
ul.social_block li a {
display:inline-block;
height:100%;
width:100%;
text-indent:-100px;
text-decoration:none;
background:none no-repeat center;
/*css 3*/
-moz-transition: background-size 0.2s linear;
-webkit-transition: background-size 0.2s linear;
-o-transition: background-size 0.2s linear;
transition: background-size 0.2s linear;
}
ul.social_block li:hover{
background-color:#eee;
border-color:#ccc;
}
ul.social_block li a:hover {
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
}
ul.social_block li a.brightkite {background-image:url(img/brightkite_32.png);}
ul.social_block li a.delicious {background-image:url(img/delicious_32.png);}
ul.social_block li a.facebook {background-image:url(img/facebook_32.png);}
ul.social_block li a.google {background-image:url(img/google_32.png);}
ul.social_block li a.lastfm {background-image:url(img/lastfm_32.png);}
ul.social_block li a.linkedin {background-image:url(img/linkedin_32.png);}
ul.social_block li a.rss {background-image:url(img/rss_32.png);}
ul.social_block li a.twitter {background-image:url(img/twitter_32.png);}
ul.social_block li a.xing {background-image:url(img/xing_32.png);}
Many Thanks to PremiumPixels for the beautiful social bookmark icons.
This is part 2 of our social bookmark icons in unordered lists series, check out part 1 here. Come back soon for the third part of how to use an unordered list for your social bookmark icons.
