How to Spice-Up your Social Icons Lists using CSS 3

This is the last part of the tutorial series on how to use unordered lists and a little CSS to create nice looking Social Bookmark Icon lists. In this tutorial we’re going to create a social icon block using an unordered list, social icon images from one of my favorite places, PremiumPixel, and CSS 3 including importing a custom font, @font-face, adding text shadows, and implementing the inset value of the box-shadow property. Our finished block will look somewhat so:

Call the font

The first thing that needs to be called at the top of your CSS is the @font-face. For this tutorial we’re using Philosopher from Google Web Fonts, for this example it’s downloaded and hosted locally. Once called, you can then assign it to the whole site on the body element, or you can assign it contextually on the unordered list:

Resetting margin and padding is especially important for HTML lists giving new starting values to 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.

Basic settings for the UL are defined next. To prevent this affecting other lists on the site, it’s added contextually:

Define general styles for what’s happening inside the List

The “Look and Feel” for all list elements is defined in the next part of the CSS using contextual definitions on the .social_list class.

The list element

min-height, line-height and border together with padding for all sides, the left side allowing enough space for the social icon, in this case 60 px, are all consistent and so set here.

Background properties common to all list elements are defined – color, positioning, repeat and position – but that each element represents it’s own social icon that are defined later, image is set to none.

Using CSS3 an inset box-shadow is used to create an inner shadow. Where the box-shadow declaration “box-shadow: 5px 5px 25px #333 inset;” defines the following:

5px = horizontal displacement

5px = vertical displacement

25px = amount of blur

#333 = color of the shadow

inset = shadow position, the shadow is rendered on the inside of the box to create an “inner shadow”