How to Convert a Slick PSD Design to XHTML/CSS

Styling the #featured Welcome Text

We will start the #featured section by adding the sliced background to the div. It will be positioned horizontally centered so that even though it is bigger than some screens it will still be centered. Next we will take the heading and make the text invisible so we can take our welcome slice and add it as the background. We will finish it off by styling the text to a light green/white and giving it a nice CSS Drop Shadow.

#featured {
	background: #476D13 url('layout/header.png') no-repeat center top;
	height: 290px;
}

#featured #welcome {
	float: left;
	width: 440px;
}

#featured #welcome h2 {
	background: url('layout/welcome.png') no-repeat left top;
	line-height: 57px;
	padding: 0 0 20px;
	text-indent: -9999px;
}

#featured #welcome p {
	color: #FFF;
	font: 10px Verdana;
	line-height: 20px;
	margin: 15px 0;
	text-shadow: 0px 1px 0px #3F6211;
		-webkit-text-shadow: 0px 1px 0px #3F6211;
		-moz-text-shadow: 0px 1px 0px #3F6211;
		-o-text-shadow: 0px 1px 0px #3F6211;
}

Styling the #slider

The slider is very easy to style, we set the height and width of the frame and make it so that the other sides that overflow the #slider boundries do not show.

#featured #slider {
	float: right;
	position: relative;
	width: 512px;
	overflow: hidden;
}

#slider #frame {
	background: transparent url('layout/frame.png') no-repeat center top;
	height:300px;
	position: absolute;
		top: 0;
		left: 0;
	width: 512px;
	z-index: 100;
}

Checkpoint

Your page should now look like this.

checkpoint 3

Pages: 1 2 3 4 5 6 7 8 9 10 11 12 13 14

This entry was posted on Thursday, September 16th, 2010 at 07:06 and is filed under Tutorials. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Cody Robertson is a 19 year old freelancer. He is currently attending university, but loves to write and create beautiful websites whenever he can. He ranges with a large spectrum of coding languages, all the way from Objective-C to HTML. Follow Cody on Twitter

About the author Published by Cody Robertson

10 Responses »

  1. Brilliant tutorial I will have to try it out asap.
    Thanks alot ^^

  2. Awesome Tutorial.

    Thanks you for share.

  3. Good tutorial for beginner like me, thank you 🙂

  4. Very good tutorial, It covered a lot of things, thanks

  5. Dude, charset before title. 🙂

  6. i’m going to have to take time on this one.thanks for sharing