This is the last part of the tutorial series on how to use unordered lists and a little CSS to create nice looking Social 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:
@font-face {font-family: Philosopher;src: url('Philosopher.ttf');}
body{font-family: 'Philosopher';}
Reset the Default CSS for the UL and its Nested Elements
As in the previous articles for our unordered list social icons (Create an Animated CSS Blockart and How to Pretty up Your Social Icons), the UL has been given its own class, .social_list, and uses also our reset snippet just before we start styling the main list:
ul.social_list,
ul.social_list img,
ul.social_list 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 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:
ul.social_list {
clear:both;
line-height:1.4em;
background-color:#666;
padding:20px;
width:500px;
border:solid 1px #ddd;
}
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”
ul.social_list li {
font-size:14px;
min-height:32px;
line-height:1em;
padding:10px 10px 10px 60px;
background: #666 none no-repeat 10px 10px;
border:outset 1px #000;
-moz-box-shadow: 5px 5px 25px #333 inset;
-webkit-box-shadow: 5px 5px 25px #333 inset;
-o-box-shadow: 5px 5px 25px #333 inset;
-ms-box-shadow: 5px 5px 25px #333 inset;
box-shadow: 5px 5px 25px #333 inset;
}
Define a subtle background-color change on hovering a list element:
ul.social_list li:hover{background-color: #777;}
The List content elements
First Line:
The first line of text is orange, with a text-shadow and slightly larger text, so that it stands out from the rest:
ul.social_list li:first-line{
color:orange;
text-shadow: 1px 1px 0px #333;
font-size:16px;
}
Link:
The link and link hover are also defined in orange with, instead of the traditional underline, highlighting using text shadow to affirm the hover.
ul.social_list li a {
color: orange;
text-decoration: none;
display: block;
margin:0; padding:0;
}
ul.social_list li a:hover{text-shadow: 1px 1px 0px #333;}
Add the finishing touches – the social icons:
Assign a class for each individual social icon to display the icon graphics, e.g.:
ul.social_list li.facebook {background-image:url(img/facebook_32.png);}
The finished Social Icon List:
Final Code:
HTML:
<ul class="social_list"> <li class="brightkite">First line<br />Second line<br /><a href="#">Link</a></li> <li class="delicious">First line<br />Second line<br /><a href="#">Link</a></li> <li class="facebook">First line<br />Second line<br /><a href="#">Link</a></li> <li class="google">First line<br />Second line<br /><a href="#">Link</a></li> <li class="twitter">First line<br />Second line<br /><a href="#">Link</a></li> <li class="linkedin">First line<br />Second line>br /><a href="#">Link</a></li> </ul>
CSS:
@font-face {font-family: Philosopher;src: url('Philosopher.ttf');}
body{font-family: 'Philosopher';}
ul.social_list,
ul.social_list img,
ul.social_list li {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
line-height: 1px;
list-style: none;
}
ul.social_list {
clear:both;
line-height:1.4em
background-color:#666;
padding:20px;
width:500px;
border:solid 1px #ddd;
}
ul.social_list li {
font-size:14px;
min-height:32px;
line-height:1em;
padding:10px 10px 10px 60px;
background: #666 none no-repeat 10px 10px;
border:outset 1px #000;
-moz-box-shadow: 5px 5px 25px #333 inset;
-webkit-box-shadow: 5px 5px 25px #333 inset;
-o-box-shadow: 5px 5px 25px #333 inset;
-ms-box-shadow: 5px 5px 25px #333 inset;
box-shadow: 5px 5px 25px #333 inset;
}
ul.social_list li:hover{background-color: #777;}
ul.social_list li:first-line {
color:orange;
text-shadow: 1px 1px 0px #333;
font-size:16px;
}
ul.social_list li a {
color:orange;
text-decoration:none;
display:block;
margin:0;padding:0;
}
ul.social_list li a:hover{text-shadow: 1px 1px 0px #333;}
ul.social_list li.brightkite {background-image:url(img/brightkite_32.png);}
ul.social_list li.delicious {background-image:url(img/delicious_32.png);}
ul.social_list li.facebook {background-image:url(img/facebook_32.png);}
ul.social_list li.google {background-image:url(img/google_32.png);}
ul.social_list li.lastfm {background-image:url(img/lastfm_32.png);}
ul.social_list li.linkedin {background-image:url(img/linkedin_32.png);}
ul.social_list li.rss {background-image:url(img/rss_32.png);}
ul.social_list li.twitter {background-image:url(img/twitter_32.png);}
ul.social_list li.xing {background-image:url(img/xing_32.png);}
ul.social_list li.youtube {background-image:url(img/youtube_32.png);}
