Screencast Video Tutorials

The Images

The first thing to be aware of is the images used in this tutorial. From the full PSD we create a 1px wide image for the background and a 2px by 15px image for the divider. These are the only two images which will be used in the tutorial. The below image highlights the two areas used for these images:

Creating the images

The Code

Due to the simplistic nature of this tutorial I will simply provide the full code then highlight some sections in the paragraph below. If you need more detailed explanation please watch the screencast.

HTML

	
Home
    
Tutorials
    
Screencast
    
Videos

CSS

@charset "utf-8";
/* CSS Document */

body{
	background:#333;
	padding:50px;
}
ul{
	padding:0;
	margin:0;
	list-style:none;
	background:url(dark-bg.jpg) repeat-x top;
	height:40px;
	border-radius:2px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	width:600px;
}
ul li{
	float:left;
	background:url(dark-divider.jpg) right no-repeat;
	padding-right:2px;
	position:relative;
	overflow:hidden
}
ul li a{
	font-size:16px;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	color:#ccc;
	text-decoration:none;
	padding:10px 15px 10px 15px;
	display:block;
	position:relative;
	z-index:5;
}
ul li a:hover{
	color:white;
}
ul > li:last-child{
	background:none;
}
ul > li:first-child span{
	width:75px;
   	-moz-border-radius: 0 0 0 2px;
	border-radius:  0 0 0 2px;
	-webkit-border-radius: 0 0 0 2px;
}

Some Explanation

The code should be very straight forward if you have experience with HTML and CSS. I will quickly explain a few key points. In the HTML we have a very simple unordered list (ul in CSS) which contains list items (li in CSS). Each list item holds an anchor which represents the link (a in CSS). If you then look at the CSS we have added the main background image to the unordered list and added the divider image to each list item. This is all very simple. Where you may not be so familiar is with the first-child and last-child selectors. These are very useful selector as you will soon notice. By adding the divider image to the right of every list item we would usually have an extra image shown on the last item. In order to stop this all we need to do is select this list item using last-child and set background to none. The same principle applies when adding a rounded corner to the first list item.

One other tip which you may be unaware of is the z-index property. It is used to signify the order/layering of elements. If an element has a z-index less than another it will be displayed below. This only applies to elements with a position property, for example absolute or relative. In our example we use the z-index to make sure the anchor is always on top, therefore making the links click-able.