How to Convert a Slick PSD Design to XHTML/CSS

Styling the #status Area

This is another easy one, we got a short strand with just a sentance and a button. We have to add a margin: -40px 0 0; to the #status div to cancel out the 40px margin set by the #featured div. Then we add basic font styling to the span and a little CSS3 to the button.

NOTE: It does not need to look the same in all browsers, so we can use the CSS3 and it will still look fine in IE, etc.

#status {
background: #F1EEEE;
border-bottom: 1px solid #DCDEDE;
margin: -40px 0 0;
padding: 20px 0;
}

#status span {
	color: #CCC9C9;
	font: bold 20px Verdana;
	line-height: 50px;
}

#status button {
	background-color: #E9E5E5;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#E9E5E5));
	background: -moz-linear-gradient(top, #FFF 0%, #E9E5E5 100%);
	filter:  progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#FFFFFF', endColorstr='#E9E5E5'); /* IE6 & IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#FFFFFF', endColorstr='#E9E5E5')"; /* IE8 */
	border: 1px solid #D9D9D9;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
		-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
		-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
		-o-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
	color: #333;
	float: right;
	font: bold 20px Verdana;
	height: 50px;
	line-height: 30px;
	width: 175px;
}

#status button:hover {
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#E9E5E5), to(#FFF));
	background: -moz-linear-gradient(top, #E9E5E5 0%, #FFF 100%);
}

Checkpoint

Your page should now look like this.

checkpoint 4

Styling the #content‘s About Us/Others Say Areas

In this area we will take two seperate divs and divide the equally 50% of the container. In each of these divs we will have a breif heading to explain the purpose of the following sentence, which(is wrapped in paragraph tags). The titles will be 20px and bold italic to really make them stand out.

#content #about_us, #content #others_say {
	float: left;
	padding: 20px 0 30px;
	width: 50%;
}

#content #about_us h3, #content #others_say h3 {
	color: #474747;
	font: bold italic 20px Verdana;
	line-height: 40px;
}

#content #others_say p cite {
	font: bold italic 10px Verdana;
	padding: 0 0 0 60px;
}

#content #others_say p cite a {
	color: #000;
}

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

Live demo View it online Download Take the source files

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
« « Emerging New Design Trends
Showcase of 62 Superb Game Websites » »

10 Responses »

  2. Bryan Abad
    September 16, 2010 • 11:29

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

    Reply to this comment
  3. Designbyarm
    September 16, 2010 • 15:07

    Awesome Tutorial.

    Thanks you for share.

    Reply to this comment
  4. Wing Loon
    September 17, 2010 • 12:10

    Good tutorial for beginner like me, thank you 🙂

    Reply to this comment
  5. Amr ElGarhy
    September 18, 2010 • 15:32

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

    Reply to this comment
  7. Tumbleweed
    September 21, 2010 • 02:42

    Dude, charset before title. 🙂

    Reply to this comment
  8. pitso
    October 11, 2010 • 11:49

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

    Reply to this comment