Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

November 24 2013

14:00

10 Easy-to-Follow PSD to HTML/CSS Tutorials

Converting PSD to HTML/CSS might intimidate you at first, since it’s a brand new world, especially for long-time Photoshop users. A basic knowledge of HTML and CSS won’t hurt, but if you’re just starting to learn, then you might find the following tutorial a bit dizzying. And believe me when I say to you, finding a good teacher who will teach you for free (or for a small amount) is just another difficulty waiting next door.

These are ten easy to follow PSD (Photoshop file) to HTML (Hypertext Markup Language) and CSS (Cascading Style Sheet) tutorials. Learn the principles from these tutorials rather than the finished output themselves and I swear, you’ll learn web design in no time!

Here are they:

PSD to HTML Tutorial: Code a Photoshop File to a Working Website

psd-to-html-and-css-07

View Demo

How to Code a Stylish Portfolio Design in HTML/CSS

psd-to-html-and-css-06

View Demo

Designing a Highly-Professional Website, From the Sketch to the Code

psd-to-html-conversion-

Code an Awesome Minimal Design from PSD to XHTML & CSS

psd-to-html-and-css-04

Sleek Coming Soon Page Design

psd-to-html-and-css-03

View Demo

PSD/HTML Conversion: Code a Clean Business Website Design

psd-to-html-and-css-02

View Demo

Convert a Warm, Cheerful Web Design to HTML and CSS

psd-to-html-and-css-08

Converting a clean magazine-style PSD template to HTML/CSS

psd-to-html-and-css-09

View Demo

Simple & Cloudy Portfolio Layout

psd-to-html-and-css-10

View Demo

Convert Your Product Landing Page From PSD to HTML [Very Detailed]

psd-to-html-and-css-11

View Demo

Learning how to design a web page could be fun. It could also start as a hobby (to kill spare time) and eventually turn into a cool knowledge and in the end, a source of extra income. But it’s not that easy, it never is. You need to have persistence, a non-stop flare to know and learn, to tinker and make mistakes. For in the end, web design isn’t learned overnight. It requires sweat and a great amount of patience.

Good luck!

May 31 2011

10:00

Convert 1st Ideas from PSD to HTML [Very Detailed]

In this article you will learn how to convert 1st Ideas: Stylish Design Agency Website from PSD to HTML in a detailed step-by-step tutorial. You will learn how to create this layout using CSS styles, some CSS3 styles and JavaScript. When you’ve completed this tutorial you’ll have a valid HTML/CSS, cross browser compatible and dynamic layout. I hope that you can go through this tutorial and learn a few techniques that will help you in future projects.

Now, let’s get started with this tutorial.

Links you will need to complete this tutorial:

Here’s what we’ll be creating (Click on image to view a full working demo).

You can also download this tutorial’s source files here.

Step 1 – Preparation

If you read the Photoshop tutorial for creating this landing page you probably noticed that Michael mentioned that he didn’t use the 960 grid system for guidelines, so I will be not be using the 960 grid system in converting this layout to show you how you can create layouts without using frameworks.

You will also need a code editor; you can use a plain text editor such as Notepad. I always recommend you use a free code editor and get used to it, this helps you get things done faster.

During this tutorial you should test your layout in different browsers, you don’t want to return to the beginning because of browser compatibility issues. In this tutorial I am using some CSS3 styles, but as you might know, not all browsers support CSS3 features. The CSS3 styles used in this tutorial have been tested with Firefox version 4, Chrome 8, IE8 and IE9.

Step 2 – Getting Your Files Ready

The first thing you should do is create a directory for your website. I usually create an /images/ directory for images and a /styles/ directory which will hold every style sheet (CSS) file and any other JavaScript files. The HTML file goes in the root directory.

Now if you aren’t using a framework to create your layout, you’ll need to use a CSS Reset. We use CSS Reset to avoid browser inconsistencies, or in other words to start fresh. In CSS Reset you simply set the styles of all elements to a baseline value and we avoid all browser’s defaults. You can find many CSS Reset codes on the web here’s the one I use.

Now, you need to create a new file in your root directory called index.html and create another file called style.css in /styles/ directory, you need also to create a new file called reset.css in /styles/ directory and paste the CSS Reset code inside it.

In this tutorial we need to export images from Photoshop to use in our HTML layout. You can export these images yourself if you have the layered PSD file from the original Photoshop tutorial, or you can just grab the source files with this tutorial and you’ll find the images I created.

Step 3 – Simple Starter Layout

We need to start by creating a Simple HTML layout as the basis of our site to be. By looking at the Photoshop Layout you should notice a few things:

  1. The layout has a background image that repeats horizontally and another background image on top of it which represents the lines and it is aligned to the left.
  2. The layout has a 960px fixed width aligned to center horizontally.
  3. The layout has a header section that contains the logo, social icons, sign up and login buttons, the main menu and the search text box.
  4. The layout has two sliders one displaying services and we’ll call it featured slider, the other has the latest portfolio items and we’ll call it portfolio slider.
  5. The content section contains about, blog updates, testimonials and services.
  6. Finally, the layout has a footer section with links, logo, social icons and copyright text.

Now, based on these notes we create the following HTML layout.

<!--<span class="hiddenSpellError" pre=""-->DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <span class="hiddenSpellError" pre="">1stIdeas</span>: Stylish Design Agency Website
    css" href="styles/reset.css" rel="stylesheet" media="all" />
    css" href="styles/tutorial.css" rel="stylesheet" media="all" />
</head>
<body>
    <div class="container header">
        header content goes here.
    </div>
    <div id="featured_slider" class="container featured_slider">
        featured slider content goes here.
    </div>
    <div class="container portfolio">
        portfolio slider content goes here.
    </div>
    <div class="container content">
        main content goes here.
    </div>
    <div class="footer">
        <div class="container">
            footer content goes here.
        </div>
    </div>
</body>
</html>

Here I’ve linked the style files in the header of the HTML file. I’ve also created five divisions inside body, each with either a class container or contains a division with this class which allows us to style this section with the layout’s fixed width and alignment. Each division has a unique class name to allow custom styling of each section. Now let’s add the CSS as follows (all CSS should be added in style.css file):

body {
    color: #fff;
    font-size: 13px;
    font-family: Arial;
    background: #2c3e4c url(../images/bg.jpg) repeat-x top;
}

    body:before {
        content: "";
        display: block;
        width: 485px;
        height: 697px;
        position: absolute;
        z-index: -2;
        top: 10px;
        left: 0px;
        background: url(../images/bg_effect.png) top left;
    }

a, a:link, a:active, a:focus {
    outline: 0 none;
    color: #fceba3;
}

a:hover {
    background: #fceba3;
    color: #1c2730;
    text-decoration: none;
}

p {
    font-family: Myriad Pro;
    font-size: 13px;
    padding: 0;
    margin: 0;
}

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:before,.clearfix:after{content:'\0020';display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both}.clearfix{zoom:1}

.container {
    width: 960px;
    margin: 0 auto;
}

.container.header {
    height: 190px;
}

.container.featured_slider {
    position: relative;
}

.container.portfolio {
    height: 255px;
    width: 963px;
    overflow: hidden;
    position: relative;
    background: url(../images/portfolio_slider_bg.png) no-repeat bottom center;
    margin-top: 40px;
}

.container.content {
    margin-top: 36px;
    background: url(../images/content_light.png) no-repeat;
    background-position: 473px -20px;
    overflow: hidden;
}

.footer {
    width: 100%;
    height: 300px;
    background: #151d23;
    overflow: hidden;
    margin: 50px 0 0 0;
    padding: 35px 0 0 0;
    font-family: Tahoma;
    font-size: 12px;
    line-height: 18px;
    border-top: 3px solid #0e1418;
    -moz-box-shadow: inset -1px 0px 0px #2c3339;
    -webkit-box-shadow: inset -1px 0px 0px #2c3339;
    box-shadow: inset 0px 1px 0px #2c3339;
}

In the CSS code above I styled the body element with white text color, a fixed font size and font weight, a background color and image that repeats horizontally. You’ll notice that there’s a style “body:before” this CSS selector is used to allow us to add content before any element, so we set content to nothing, display to block, a fixed width and height that matches the dimensions of the lines background image, set position to absolute so we can set where this will be displayed relative to browser’s edges, set z-index to -2 to make this display under any other content, then I set it 10px from the top, 0px from the left and finally set the background image with no-repeat.

Now, we set the style for the links and paragraphs to match what we have in the layout. There’s also a style added called “.clear” and “.clearfix” and we use these two classes to clear any floated elements. Now we style the container class with 960px fixed width and margin to “0 auto” to align it to center horizontally. The header class is styled with a custom height. The featured slider class is styled with relative position which will allow absolute positioning of elements inside it to its edges. The portfolio class is styled with fixed height and width, overflow is set to hidden, position to relative, a background image with no-repeat and a fixed top margin. The content class is styled with a fixed top margin, a background image with no-repeat which will be representing the light behind the blog updates section and overflow to hidden.

Finally, we style the footer class with 100% width to take all the browsers width area, a fixed height, a background color, overflow is set to hidden, zero margins except from top, zero padding except from top, font set to Tahoma, a fixed font size and line height, a top solid border of 3px and an inset box shadow which is a CSS3 feature and it will represent the footer inner glow. The result should be the same as the image below.

Step 4 – Adding Content to Header

Now we need to add the logo, social icons, sign up and login buttons, menu items and search text box. Here’s the HTML for the header section.

<div class="container header">
    <h1><a title="1stIdeas" href="#">1stIdeas</a>
    <div>
        <ul class="social_icons">
            <li class="facebook"><a href="#" title="Facebook">Facebook</a></li>
            <li class="twitter"><a href="#" title="Twitter">Twitter</a></li>
            <li class="rss"><a href="#" title="RSS Feed">RSS Feed</a></li>
        <!--<span class="hiddenSpellError" pre=""-->ul>
        <ul class="header_links">
            <li><a href="#" title="Sign Up Today" class="selected">Sign Up Today</a></li>
            <li><a href="#" title="Client Login">Client Login</a></li>
        <!--<span class="hiddenSpellError" pre=""-->ul>
    </div>
    <div class="main_menu">
        <ul>
            <li><a href="#" title="Home" class="selected">Home</a></li>
            <li><a href="#" title="Services">Services</a></li>
            <li><a href="#" title="About Us">About Us</a></li>
            <li><a href="#" title="Blog">Blog</a></li>
            <li><a href="#" title="Contact">Contact</a></li>
        </ul>
        <div class="search">
            <input type="text" value="Search for something" />
        </div>
    </div>
    <div class="slider_shadow"></div>
</div>

I’ve added an <h1> with a link inside it to represent the logo. I also added three main divisions: one for the social icons and sign up and login buttons, one for the main menu and search text box and a third one to hold the featured slider background shadow image. Now lets add the CSS for the header content.

.container.header {
    height: 190px;
}

    .header .slider_shadow {
        position: absolute;
        margin: 0 auto;
        margin-left: -20px;
        width: 1000px;
        height: 410px;
        background: url(../images/slider_shadow.png) bottom center;
        top: 100px;
        z-index: -1;
    }

    .header h1 {
        float: left;
        margin: 40px 0 0 0;
    }

        .header h1 a {
            display: block;
            width: 164px;
            height: 68px;
            background: url(../images/header_images.png) no-repeat;
            background-position: 0 0;
            text-indent: -10000px;
            overflow: hidden;
        }

    .header div {
        float: right;
        width: 260px;
        margin: 36px 20px 0 0;
    }

    ul.social_icons {
        margin: 0 0 0 0;
        float: right;
        clear: both;
    }

        ul.social_icons li {
            list-style: none;
            display: block;
            float: left;
            text-indent: -10000px;
            margin: 0 0 0 5px;
            background: url(../images/header_images.png) no-repeat;
        }

            ul.social_icons li a {
                display: block;
                width: 32px;
                height: 32px;
                background: transparent;
            }

            ul.social_icons li.facebook {
                background-position: -166px 0;
            }

            ul.social_icons li.twitter {
                background-position: -204px 0;
            }

            ul.social_icons li.rss {
                background-position: -240px 0;
            }

    .header ul.header_links {
        margin: 36px 0 0 0;
        float: right;
    }

        .header ul.header_links li {
            list-style: none;
            display: block;
            float: left;
            margin: 0 0 0 5px;
            font-family: Segoe UI;
            font-size: 12px;
            line-height: 33px;
            text-align: center;
            text-transform: uppercase;
        }

            .header ul.header_links li a {
                display: block;
                color: #fff;
                text-decoration: none;
                text-shadow: 0 -1px 0 #1c2730;
                padding: 0 20px;
                border: 1px solid #2b3b48;
                border-bottom: 0px none;
                background: url(../images/header_button.jpg) repeat-x top;
                -moz-box-shadow: inset 1px 0 0 rgba(255,255,255,0.1),
                                inset -1px 0 0 rgba(255,255,255,0.1);
                -webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,0.1),
                                    inset -1px 0 0 rgba(255,255,255,0.1);
                box-shadow: inset 1px 0 0 rgba(255,255,255,0.1),
                            inset -1px 0 0 rgba(255,255,255,0.1);
            }

            .header ul.header_links li a:hover, .header ul.header_links li a.selected {
                text-shadow: 0 -1px 0 #b58742;
                background: url(../images/header_button_h.jpg) repeat-x top;
                border-color: #ba8537;
                -moz-box-shadow: inset 1px 0 0 rgba(255,255,255,0.1),
                                inset -1px 0 0 rgba(255,255,255,0.1);
                -webkit-box-shadow: inset 1px 0 0 rgba(255,255,255,0.1),
                                    inset -1px 0 0 rgba(255,255,255,0.1);
                box-shadow: inset 1px 0 0 rgba(255,255,255,0.1),
                            inset -1px 0 0 rgba(255,255,255,0.1);
            }

    .header .main_menu {
        width: 958px;
        height: 52px;
        display: block;
        overflow: hidden;
        margin: 0;
        background: url(../images/main_menu.jpg) repeat-x;
        border-left: 1px solid #2b3b48;
        border-right: 1px solid #2b3b48;
        position: relative;
        -moz-box-shadow: inset -1px 0 0 rgba(255,255,255,0.1);
        -webkit-box-shadow: inset -1px 0 0 rgba(255,255,255,0.1);
        box-shadow: inset -1px 0 0 rgba(255,255,255,0.1);
    }

        .header .main_menu:before {
            content: "";
            position: absolute;
            background: url(../images/main_menu_highlight.png) no-repeat;
            background-position: 0 1px;
            top: 0;
            left: 0;
            width: 958px;
            height: 27px;
            z-index: 0;
        }

        .header .main_menu ul {
            float: left;
            margin: 0;
            position: relative;
            z-index: 1;
        }

            .header .main_menu ul li {
                list-style: none;
                margin: 1px 0 0 0;
                float: left;
                font-family: Segoe UI;
                font-size: 16px;
                line-height: 45px;
                text-align: center;
                border-right: 1px solid #2b3b48;
                border-left: 1px solid #485d6c;
            }

                .header .main_menu ul li a {
                    color: #fff;
                    display: block;
                    padding: 0 20px;
                    text-decoration: none;
                    text-shadow: 0 -1px 0 #1c2730;
                }

                    .header .main_menu ul li a:hover,
                    .header .main_menu ul li a.selected {
                        color: #afdfff;
                        background: url(../images/main_menu_h.png) repeat-x top;
                    }

        .header .main_menu .search {
            float: right;
            margin: 10px 11px 0 0;
            position: relative;
            z-index: 1;
        }

            .header .main_menu .search:before {
                content: "";
                position: absolute;
                z-index: 2;
                width: 21px;
                height: 30px;
                background: url(../images/search_icon.png) no-repeat center center;
                left: 10px;
            }

            .header .main_menu .search input[type=text] {
                background: transparent url(../images/search_bg.jpg) repeat-x top;
                border: 0 none;
                border-left: 1px solid #2c3d4a;
                border-right: 1px solid #2c3d4a;
                color: #ccc;
                float: left;
                width: 210px;
                height: 30px;
                line-height: 30px;
                font-family: Myriad Pro;
                font-size: 12px;
                font-style: italic;
                padding: 0 0 0 40px;
                -moz-box-shadow: 1px 1px 0 #5f6f79; /* FF3.5+ */
                -webkit-box-shadow: 1px 1px 0 #5f6f79; /* Saf3.0+, Chrome */
                box-shadow: 1px 1px 0 #5f6f79;
            }

I started by styling the slider shadow division to be absolutely positioned, margin set to “0 auto” to center horizontally, a negative left margin to position it perfectly, a fixed width and height, a non repeating background image, 100px from top and z-index set to be under the content but above the background. I styled the logo’s h1 to some basic settings with a background image for the logo and hidden text using text-indent value of -10000px which will hide the text when viewed only in browser and this has some SEO benefits.

Now, I styled the division holding the social icons, sign up and login buttons to float to the right with a fixed width, a top and right margins. The social icons unordered list is styled to have no list style, to be floated to the right, with floated list elements to the left, with hidden list element text and a background image using CSS Sprites technique to position the background for each link separately. I styled the header links division to float to the right and with a top margin. Now, list items inside the header links division is styled with no list style, float to the left, a left margin to act as a separator between links, font family to Segoe UI, a fixed font size, a fixed line height value that equals background height to center text vertically, text align to center and transform text to uppercase. The link inside each list item from header_links is styled with white text color, no text decoration, a text shadow which is a CSS3 feature, a fixed left and right padding, solid fixed border except on bottom, a horizontally repeating background image and finally an inset box shadow from left and right to represent left and right 1px glow. The hover and selected states of the link has a different text shadow color, background image, border color and inset box shadows colors.

The main menu division is styled with fixed width and height, hidden overflow, no margins, a horizontally repeating background image, left and right solid border, relative position to allow absolutely positioned child elements to its edges and an inset box shadow. We also created a rule for main menu before selector with no content, position set to absolute, a non repeating background image for the main menu effect, 0px from top and left, a fixed height and width and z-index set to 0 to be under main menu items. The main menu list is floated to left, position is set to absolute, no margins and z-index to 1 to be on top of main menu’s before selector. Main menu list items and links is styled with no list style, floated to left, custom font family and font size, center text alignment, left and right borders, text shadow and finally the hover and selected states is styled with a horizontally repeating background image and a different text color. The result should be as the image below.

Step 5 – Adding Featured Slider Content, Style and JavaScript

Now, we are going to add the slider and for this I am going to use an already implemented script, which is Slidesjs. Slidejs. will be used for this slider and for the portfolio slider. I modified the script to make it suit our layout and now here’s the HTML for the featured slider content.

<div id="featured_slider" class="container featured_slider">
	<div class="slides_container">
		<div>
            <img src="images/image.jpg" alt="" />
			<div class="slide_text">
                <h4>Design Portfolio</h4>
                <p>
                    Suspendisse vitae nunc mi, sit amet scelerisque nulla. Pellentesque auctor ante in elit tristique imperdiet.
                </p>
            </div>
		</div>
		<div>
            <img src="images/image.jpg" alt="" />
			<div class="slide_text">
                <h4>Design Portfolio</h4>
                <p>
                    Suspendisse vitae nunc mi, sit amet scelerisque nulla. Pellentesque auctor ante in elit tristique imperdiet.
                </p>
            </div>
		</div>
		<div>
            <img src="images/image.jpg" alt="" />
			<div class="slide_text">
                <h4>Design Portfolio</h4>
                <p>
                    Suspendisse vitae nunc mi, sit amet scelerisque nulla. Pellentesque auctor ante in elit tristique imperdiet.
                </p>
            </div>
		</div>
	</div>
</div>

Now, by looking at the code you will see that there’s the main division with id “featured_slider” which contains another division with class name “slides_container” that will hold all the slides. Finally, there’s three similar divisions with an image, an <h4> and paragraph inside a division with class name “slider_text”. Now let’s add the CSS style for the slider content and script.

.container.featured_slider {
    position: relative;
}

    .featured_slider .slides_container {
	    width: 960px;
	    display: none;
    }

        .featured_slider .slides_container div {
	        width: 660px;
	        height: 300px;
	        display: block;
        }

        .featured_slider .slides_container .slide_text {
            position: absolute;
            bottom: 0;
            right: 0;
            height: 80px;
            background: url(../images/slider_text_bg.png) repeat-y left;
        }

            .featured_slider .slides_container .slide_text h4 {
                font-family: Segoe UI;
                font-size: 16px;
                font-weight: normal;
                line-height: 20px;
                color: #fff;
                margin: 10px 0 6px 20px;
            }

            .featured_slider .slides_container .slide_text p {
                font-family: Myriad Pro;
                font-size: 13px;
                line-height: 15px;
                color: #ccc;
                margin: 0 0 0 20px;
                padding: 0;
                max-width: 400px;
            }

    .featured_slider .pagination {
	    list-style: none;
	    margin: 0;
	    padding: 0;
        position: absolute;
        top: 0;
        right: 0;
    }

        .featured_slider .pagination li a {
            width: 300px;
            height: 100px;
            display: block;
            text-indent: -10000px;
            overflow: hidden;
            background: url(../images/featured_slider_nav.jpg) no-repeat;
        }

                .featured_slider .pagination li a[href="#0"]:hover,
                .featured_slider .pagination li.current a[href="#0"] {
                    background-position: -300px 0;
                }

            .featured_slider .pagination li a[href="#1"] {
                background-position: 0 -100px;
            }

                .featured_slider .pagination li a[href="#1"]:hover,
                .featured_slider .pagination li.current a[href="#1"] {
                    background-position: -300px -100px;
                }

            .featured_slider .pagination li a[href="#2"] {
                background-position: 0 -200px;
            }

                .featured_slider .pagination li a[href="#2"]:hover,
                .featured_slider .pagination li.current a[href="#2"] {
                    background-position: -300px -200px;
                }

The slides_container has a fixed width with display set to none, which is required by the script. Now, each slide division inside the slides_container is styled with a fixed width and height and display is set to block. The slide_text division is styled with absolute position so we can place it absolutely to the featured_slider division, 0px from bottom and right, a fixed height with a vertically repeating background image to act as a transparent overlay behind the text. The h4 is styled with font family set to Segoe UI, a fixed font size and line height, a normal font weight, white text color and some margins for spacing. The paragraph is styled with a different font family, font size, line height, with text color set to #ccc, a left margin, zero padding and a maximum width of 400px.

Now the rest of this code is to style the pagination which is automatically generated by the script. The pagination container is styled with no list item because it is assigned to a ul tag, no margin and padding, absolute position and 0px from top and right. The links inside each pagination list item is styled with fixed width and height, text indent set to -10000px to hide text in the browser, overflow to hidden and a CSS sprites background image. Now to style each list item number separately we use CSS Selectors, and in each one we match the href attribute to set a custom background position for normal, hover and current states.

Now let’s add the required jQuery script in the header. You can find the script file in this tutorial source file or from the jQuery Scrollable script page. The HTML head section should be like this (which will be also used by the portfolio slider).

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>1stIdeas: Stylish Design Agency Website</title>
    css" href="styles/reset.css" rel="stylesheet" media="all" />
    css" href="styles/tutorial.css" rel="stylesheet" media="all" />
    <script type="text/<span class="><!--mce:0--></script>
    <script type="text/<span class="><!--mce:1--></script>
</head>

Finally, we need to add the JavaScript code that will allow the slider to work in our layout. You should add this script just before the closing tag of the body. Here’s the JavaScript.

<script type="text/javascript">
    $(function () {
        $('#featured_slider').slides({
            preload: true,
            effect: 'fade'
        });
    });
</script>

Now our layout should look like this.

Step 6 – Adding Portfolio Slider Content, Style and JavaScript

Here’s the HTML for the portfolio slider content.

    <div class="container portfolio">
        <h2>
            Featured Project</h2>
        <div id="portfolio_slides">
            <div class="slides_container">
                <div>
                    <div class="item">
                        <a href="#" title="Portfolio Item">
                            <img src="images/portfolio_1.jpg" alt="" />
                    </div>
                    <div class="item">
                        <a href="#" title="Portfolio Item">
                            <img src="images/portfolio_2.jpg" alt="" />
                    </div>
                    <div class="item">
                        <a href="#" title="Portfolio Item">
                            <img src="images/portfolio_3.jpg" alt="" />
                    </div>
                    <div class="item">
                        <a href="#" title="Portfolio Item">
                            <img src="images/portfolio_4.jpg" alt="" />
                    </div>
                </div>
                <div>
                    <div class="item">
                        <a href="#" title="Portfolio Item">
                            <img src="images/portfolio_1.jpg" alt="" />
                    </div>
                    <div class="item">
                        <a href="#" title="Portfolio Item">
                            <img src="images/portfolio_2.jpg" alt="" />
                    </div>
                    <div class="item">
                        <a href="#" title="Portfolio Item">
                            <img src="images/portfolio_3.jpg" alt="" />
                    </div>
                    <div class="item">
                        <a href="#" title="Portfolio Item">
                            <img src="images/portfolio_4.jpg" alt="" />
                    </div>
                </div>
                <div>
                    <div class="item">
                        <a href="#" title="Portfolio Item">
                            <img src="images/portfolio_1.jpg" alt="" />
                    </div>
                    <div class="item">
                        <a href="#" title="Portfolio Item">
                            <img src="images/portfolio_2.jpg" alt="" />
                    </div>
                    <div class="item">
                        <a href="#" title="Portfolio Item">
                            <img src="images/portfolio_3.jpg" alt="" />
                    </div>
                    <div class="item">
                        <a href="#" title="Portfolio Item">
                            <img src="images/portfolio_4.jpg" alt="" />
                    </div>
                </div>
            </div>
        </div>
    </div>

It has almost the same structure as the featured slider, we have a main container and inside it is a division with a unique id for the portfolio slider and inside it is the slides container. The main difference here is that each slide has four divisions each with class name item, a link and an image inside it. Now let’s add the CSS style for the slider content and script.

.container.portfolio {
    height: 255px;
    width: 963px;
    overflow: hidden;
    position: relative;
    background: url(../images/portfolio_slider_bg.png) no-repeat bottom center;
    margin-top: 40px;
}

    .portfolio h2 {
        position: absolute;
        bottom: 50px;
        left: 45px;
        height: 16px;
        width: 161px;
        background: url(../images/headers_text.png) no-repeat;
        background-position: 0px 0px;
        text-indent: -10000px;
        z-index: 10;
    }

    .portfolio .slides_container {
	    width: 960px;
	    display: none;
    }

        .portfolio .slides_container div {
	    width: 960px;
            height: 255px;
	    display: block;
            overflow: hidden;
        }

        .portfolio .slides_container div.item {
            float: left;
            width: 150px;
            height: 166px;
            margin: 0 45px;
            overflow: hidden;
        }

            .portfolio .slides_container div.item a {
                height: 155px;
                display: block;
                background: url(../images/portfolio_shadow.png) no-repeat;
                background-position: center -4px;
            }

    .portfolio .pagination {
        list-style: none;
	margin: 0;
	padding: 0;
        position: absolute;
        z-index: 100;
        top: 190px;
        right: 45px;
    }
        .portfolio .pagination li {
            float: left;
            margin: 0;
            padding: 0;
        }

            .portfolio .pagination li a {
                width: 20px;
                height: 20px;
                display: block;
                margin: 0 0 0 10px;
                text-indent: -10000px;
                background: url(../images/portfolio_bullets.png) no-repeat;
                background-position: -70px -9px;
            }

                .portfolio .pagination li a:hover {
                    background-position: -39px -9px;
                }

                .portfolio .pagination li.current a {
                    background-position: 0px 0px;
                    height: 37px;
                    width: 37px;
                    margin: -9px -7px 0 1px;
                }

First, we style h2 with absolute position, 50px from bottom, 45px from left, fixed height and width, a negative text indent to hide text, z-index set to 10 to be on top of all content and finally a background image from a CSS sprites which contains all the headers images. Now the slides_container and the slide division is the same as in the featured slider.

Now each item inside the slide has a fixed height and width, floating to left, a left and right margins and overflow set to hidden. The link inside each item has a fixed height and a background image to represent the shadow under each portfolio image. The pagination container is styled with no list style, zero margin and padding, absolute position, z-index set to 100, 190px from top and 45px from right. The list item is styled to float to the left with zero margin and padding. Finally, the link is styled with fixed height and width, a left margin, a negative text indent, a background CSS sprite image with a background position. The hover and current states have some different styles to display the part we want form the CSS sprite.

Finally, we need to add the JavaScript code that will allow the slider to work on our layout. You should add this script just before the closing tag of the body underneath the script we added for the featured slider. Here’s the JavaScript.

$(function () {
    $('#portfolio_slides').slides({
        preload: true
    });
});

Now our layout should look like this.

Step 7 – Adding Main Content and Style

Now, let’s add the HTML content for “About 1stIdeas”, “Blog Updates”, “Client Testimonials” and “Our Services”.

<div class="container content">
    <div class="left">
        <h2>
            About 1stIdeas</h2>
        <p>
            Fusce pretium dictum massa malesuada eleifend. Mauris ac hendrerit sem. In eros
            erat, adipiscing a congue eu, placerat a enim. Morbi eu leo odio. Nam placerat aliquet
            nibh, eu varius enim pellentesque in. Pellentesque fermentum vestibulum justo, at
            feugiat velit varius et. <a href="#">read more</a>
        </p>
        <div class="clear">
        </div>
        <div class="testimonials">
            <h2>
                Client Testimonials</h2>
            <div class="testimonial">
                <h4>
                    <img src="images/image_1.jpg" alt="" />
                    Michael John O. Burns <a href="#">www.burnstudio.deviantart.com</a>
                </h4>
                <p>
                    Morbi eu leo odio. Nam placerat aliquet nibh, eu varius enim pellentesque in. Pellentesque
                    fermentum vestibulum justo, at feugiat velit varius et. <a href="#">read more</a>
                </p>
                <div class="shadow">
                </div>
            </div>
        </div>
        <div class="services">
            <h2>
                Our Services</h2>
            <ul>
                <li>WebDesign<br />
                    Sed fermentum rutrum odio secleio
                <li class="second">XHTML - CSS<br />
                    Sed fermentum rutrum odio secleio
                <li class="third">Vector Art<br />
                    Sed fermentum rutrum odio secleio
            </ul>
        </div>
    </div>
    <div class="right">
        <h2>
            Blog Updates</h2>
        <div class="posts">
            <p>
                <img src="images/image_2.jpg" alt="" />
                <a class="title" href="#">Vivamus dignissim risus</a> <span class="date">March 31, 2011</span>
                non dolor convallis nec lacinia purus tempor. Cras auctor felis Nulla quam urna,
                mattis vitae hendrerit vitae, tincidunt non lectus. Duis consequat augue tortor,
                et facilisis tortor.

                <a href="#" title="Read More" class="read_more">Read More</a>
            </p>
            <p>
                <img src="images/image_2.jpg" alt="" />
                <a class="title" href="#">Vivamus dignissim risus</a> <span class="date">March 31, 2011</span>
                non dolor convallis nec lacinia purus tempor. Cras auctor felis Nulla quam urna,
                mattis vitae hendrerit vitae, tincidunt non lectus. Duis consequat augue tortor,
                et facilisis tortor.

                <a href="#" title="Read More" class="read_more">Read More</a>
            </p>
            <div class="shadow">
            </div>
        </div>
    </div>
</div>

I divided the content with two divisions one with a class name “left” which will contain “About”, “Testimonials” and “Services”. The other with class name “right” which will contain “Blog Updates.” The about content has an h2 and a paragraph, the testimonials section has a containing division with an h2 and a main division with class name “testimonial” which contains an h4 and a paragraph and then a division for the shadow. The services content has an h2 and an unordered list. Finally, the right division has an h2 and a main division with class name “posts” which contains paragaph with image, text and links. Now let’s add the CSS style for the content.

.container.content {
    margin-top: 36px;
    background: url(../images/content_light.png) no-repeat;
    background-position: 473px -20px;
    overflow: hidden;
}

    .content h2 {
        height: 15px;
        background: url(../images/headers_text.png) no-repeat;
        text-indent: -10000px;
        margin: 0 0 20px 0;
    }

        .content p a {
            font-size: 12px;
            font-style: italic;
            padding: 0 3px;
        }

    .content .left {
        float: left;
        width: 600px;
        margin: 0 0 0 20px;
    }

        .content .left h2 {
            background-position: 0px -17px;
            width: 141px;
            margin-bottom: 30px;
        }

        .content .left p {
            line-height: 24px;
        }

            .content .left .testimonials {
                margin: 60px 0 0 0;
                float: left;
                width: 290px;
            }

                .content .left .testimonials h2 {
                    background-position: 0 -49px;
                    width: 183px;
                    margin-bottom: 25px;
                }

                .content .left .testimonials .testimonial {
                    position: relative;
                    min-height: 199px;
                    padding: 20px;
                    margin-bottom: 18px;
                    background: #34abe1;
                    background: -moz-linear-gradient(left, #34abe1 0%, #2792c3 100%);
                    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#34abe1), color-stop(100%,#2792c3));
                    background: -webkit-linear-gradient(left, #34abe1 0%,#2792c3 100%);
                    background: -o-linear-gradient(left, #34abe1 0%,#2792c3 100%);
                    background: -ms-linear-gradient(left, #34abe1 0%,#2792c3 100%);
                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#34ABE1', endColorstr='#2792C3',GradientType=1 );
                    background: linear-gradient(left, #34abe1 0%,#2792c3 100%);
                }

                    .content .left .testimonials .testimonial h4 {
                        font-family: Myriad Pro;
                        font-size: 13px;
                        font-weight: normal;
                        text-transform: uppercase;
                        height: 50px;
                        overflow: hidden;
                    }

                        .content .left .testimonials .testimonial h4 img {
                            float: left;
                            margin: 0 18px 0 0;
                        }

                        .content .left .testimonials .testimonial h4 a {
                            text-transform: lowercase;
                        }

                    .content .left .testimonials .testimonial p {
                        font-style: italic;
                        text-align: justify;
                    }

                    .content .shadow {
                        background: url(../images/box_shadow.png) no-repeat right bottom;
                        width: 290px;
                        height: 18px;
                        position: absolute;
                        bottom: -18px;
                        right: 0px;
                        z-index: -1;
                    }

            .content .left .services {
                float: left;
                width: 290px;
                margin: 60px 0 0 20px;
            }

                .content .left .services h2 {
                    background-position: 0 -65px;
                    width: 119px;
                    margin-bottom: 25px;
                }

                .content .left .services ul {
                    margin: 0;
                    border-bottom: 1px solid #455865;
                }

                    .content .left .services ul li {
                        list-style: none;
                        margin: 0;
                        display: block;
                        height: 60px;
                        padding: 18px 0 0 80px;
                        border-left: 3px solid #192229;
                        border-bottom: 1px solid #192229;
                        border-top: 1px solid #455865;
                        background: url(../images/service_icons.png) no-repeat;
                        background-position: 10px 0px;
                        font-family: Segoe UI;
                        font-size: 18px;
                        line-height: 18px;
                        text-transform: uppercase;
                    }

                        .content .left .services ul li:first-child {
                            border-top: 0 none;
                        }

                        .content .left .services ul li span {
                            color: #fceba3;
                            font-family: Myriad Pro;
                            font-size: 12px;
                            line-height: 15px;
                            text-transform: none;
                        }

                    .content .left .services ul li.second {
                        background-position: 10px -80px;
                    }

                    .content .left .services ul li.third {
                        background-position: 10px -160px;
                    }

    .content .right {
        float: left;
        width: 320px;
        margin: 0 0 0 20px;
    }

        .content .right h2 {
            background-position: 0px -33px;
            width: 126px;
            margin-bottom: 17px;
        }

        .content .right .posts {
            background: #151d23;
            padding: 30px 25px 22px 20px;
            font-family: Myriad Pro;
            position: relative;
        }

            .content .right .posts p {
                font-size: 12px;
                line-height: 18px;
                text-align: justify;
                overflow: hidden;
            }

                .content .right .posts p:first-child {
                    margin: 0 0 25px 0;
                }

                .content .right .posts p img {
                    float: left;
                    margin: 0 12px 0px 0;
                }

                .content .right .posts p a.title {
                    color: #afdfff;
                    text-transform: uppercase;
                    font-size: 13px;
                    font-style: normal;
                    line-height: 13px;
                    text-decoration: none;
                    margin: 0 0 6px 0;
                    display: block;
                }

                    .content .right .posts p a.title:hover {
                        background: transparent;
                        color: #afdfff;
                        text-decoration: underline;
                    }

                .content .right .posts p span.date {
                    color: #6d6c6c;
                    font-style: normal;
                    line-height: 12px;
                    margin: 0 0 8px 0;
                    display: block;
                }

                .content .right .posts p a.read_more {
                    float: left;
                    clear: both;
                    font-size: 11px;
                    line-height: 11px;
                    color: #fff;
                    text-transform: uppercase;
                    text-decoration: none;
                    font-style: normal;
                    margin: 20px 0 0 0;
                    padding: 7px 13px;
                    background: #2792c3;
                    background: -moz-linear-gradient(top, #2792c3 0%, #34abe1 100%);
                    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2792c3), color-stop(100%,#34abe1));
                    background: -webkit-linear-gradient(top, #2792c3 0%,#34abe1 100%);
                    background: -o-linear-gradient(top, #2792c3 0%,#34abe1 100%);
                    background: -ms-linear-gradient(top, #2792c3 0%,#34abe1 100%);
                    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2792C3', endColorstr='#34ABE1',GradientType=0 );
                    background: linear-gradient(top, #2792c3 0%,#34abe1 100%);
                }

The CSS code may seem very long and difficult but when you look closely you’ll soon see that it’s only positioning and alignment. I am going to walk you through this code.

I started by setting the style for all h2 elements with a fixed height, a background CSS sprite image, a negative text indent and a bottom margin, now all other styles for h2 elements is written to change background position, width and margins. Next, I set the style for all the links inside any paragraph with fixed font size, an italic style and a left and right padding.

Now, the CSS style for the left division starts by first styling the left division with a left margin, a fixed width and floating to left. The testimonials division style is set with top margin, floating to left and a fixed width. The testimonial division inside the testimonials has a relative position, with a fixed min-height to make it look nice, a 20px padding, a bottom margin that matches the shadow image height, a gradient background and you can use this CSS Gradient generator to help you create this. Then, we style the h4 element with font family, font size and normal font weight, text transform to uppercase, a fixed height and overflow set to hidden. Then we style the image and the link inside the h4 element and the paragraph with simple styles.

Now, you notice that the shadow class name is styled inside the content class name directly and that’s because it will be used for both the testimonial shadow and the blog updates shadow. Now the services division is floated to left with a fixed width and a margin from top and left. The unordered list is styled with zero margins and a solid 1px bottom border. List items is styled with no list style, zero margins, fixed height, a top and left padding to make room for the background image, borders from left bottom and top, a CSS sprites background image which is positioned  using unique classes added to list items, a font family and fixed font size and line height with text transform set to uppercase. The first child of list items has no border from the top.

Next, we style the right division with float to left, fixed width and a left margin. The posts division is styled with a background color, padding, font family and relative position. The paragraphs have a simple styling to set font size, line height and text alignment. The same for the images. Next, we style the links with class name title with custom color, uppercase text transform, font size and normal style, fixed line height with no text decoration and a bottom margin. The hover state is styled with different color and an underline text decoration. The date class name is simply styled with color, font style, line height and margin. Finally, read more link is styled with gradient background, left floating, fixed font size and line height, white text color, uppercase text transformation, no text decoration, normal style and some margins and padding.

Now our layout should look like this.

Step 8 – Adding Footer Content and Style

Now let’s add the content for the footer, here’s the HTML for the footer.

<div class="footer">
    <div class="container">
        <div class="links">
            <ul>
                <li class="title">Quick Links</li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
            <ul>
                <li class="title">Testimonials</li>
                <li><a href="#">Client Testimonials</a></li>
                <li><a href="#">Other Testimonials</a></li>
                <li class="title">Login</li>
                <li><a href="#">Client Login</a></li>
                <li><a href="#">Register</a></li>
            </ul>
            <ul>
                <li class="title">Services Offered</li>

	<li><a href="#">Web / Grahpic Design</a></li>
                <li><a href="#">PSD - CSS Conversion</a></li>
                <li><a href="#">Vector Art</a></li>
                <li><a href="#">Packaging</a></li>
                <li><a href="#">Branding</a></li>
            </ul>
            <ul>
                <li class="title">What New On Blog</li>

	<li><a href="#">Web / Grahpic Design</a></li>
                <li><a href="#">PSD - CSS Conversion</a></li>
                <li><a href="#">Vector Art</a></li>
                <li><a href="#">Packaging</a></li>
                <li><a href="#">Branding</a></li>
            </ul>
            <ul class="last">
                <li class="title">Social</li>
                <li class="twitter"><a href="#" title="Twitter">Twitter</a></li>
                <li class="facebook"><a href="#" title="Facebook">Facebook</a></li>
                <li class="rss"><a href="#" title="RSS">RSS</a></li>
            </ul>
        </div>
        <div class="footer_logo">
            <img src="images/footer_logo.png" alt="" />
            <ul class="social_icons">
                <li class="facebook"><a href="#" title="Facebook">Facebook</a></li>
                <li class="twitter"><a href="#" title="Twitter">Twitter</a></li>
                <li class="rss"><a href="#" title="RSS Feed">RSS Feed</a></li>
            </ul>
        </div>
        <div class="clear"></div>
        <div class="copyright">
            © 2010 - 2011 1stIdeas. All rights reserved.
        </div>
    </div>
</div>

The footer has three main divisions one with class name “links” the other with class name “footer_logo” and the last one with class name “copyright”. The links division has unordered lists with normal list items and some list items with class name “title.” The footer logo division has an image and a unordered list item for social icons that is exactly similar to the one in the header both in HTML and CSS style. Now let’s add the CSS style for the footer content.

.footer {
    width: 100%;
    height: 300px;
    background: #151d23;
    overflow: hidden;
    margin: 50px 0 0 0;
    padding: 35px 0 0 0;
    font-family: Tahoma;
    font-size: 12px;
    line-height: 18px;
    border-top: 3px solid #0e1418;
    -moz-box-shadow: inset -1px 0px 0px #2c3339;
    -webkit-box-shadow: inset -1px 0px 0px #2c3339;
    box-shadow: inset 0px 1px 0px #2c3339;
}

    .footer a {
        color: #cccccc;
        text-decoration: none;
    }

        .footer a:hover {
            background: transparent;
            text-decoration: underline;
        }

    .footer .container .links {
        float: left;
        width: 760px;
    }

        .footer .container .links ul {
            float: left;
            margin: 0;
            padding: 0 35px 0 0;
            border-right: 1px solid #486277;
            min-height: 155px;
            list-style: none;
        }

            .footer .container .links ul.last {
                border: 0 none;
                padding: 0;
            }

            .footer .container .links ul:first-child li {
                margin-left: 0;
            }

            .footer .container .links ul li {
                margin-left: 30px;
            }

            .footer .container .links ul li.title {
                font-size: 13px;
                font-weight: bold;
                color: #afdfff;
                line-height: normal;
                margin-top: 25px;
                margin-bottom: 12px;
            }

            .footer .container .links ul li.title:first-child {
                margin-top: 0;
            }

    .footer .container .footer_logo {
        float: right;
        width: 125px;
    }

        .footer .container .footer_logo img {
            float: left;
            margin: 0 0 20px 0;
        }

    .footer .container .copyright {
        color: #afdfff;
        font-weight: bold;
        margin: 30px 0 0 0;
    }

The links inside the footer are styled with custom color and no text decoration, with a hover state that has a transparent background and underline text decoration. The links division is floated to left with a fixed width. The unordered lists is styled with floating to left, zero margin, right margin, solid 1px right border, a min-height to make it look even in heights and no list style. The unordered list with class last has no border and zero padding.  The list items has 30px left margin. The list items class name title is styled with bigger font size, bold font weight, custom text color, normal line height, top and bottom margin. The first child has no top margin.

The footer logo division is floated to right with fixed width. The image is styled with left floating and bottom margin. Finally, the copyright division is styled with custom color, bold font and top margin.

If you followed this tutorial correctly then you should have a full working HTML/CSS layout from a PSD that looks exactly like this.

Conclusion

So that’s it. In this tutorial you learned how to convert a layout from PSD to a fully working HTML/CSS website, don’t forget to validate and check for browser compatibility (the layout will not validate because of JavaScript & CSS3 styles, remove both to validate properly). If there is a part of this tutorial you didn’t understand, or you have a better technique, feel free to share with everyone by commenting below.

March 25 2011

20:08

Create a Comic Book Themed Web Design, Photoshop to HTML + CSS (Part 2)


A couple weeks ago, we learned how to create a comic book theme web design over at our sister-site, Webdesigntuts+. Today, we’ll tackle the second part: it’s time to slice the design and turn it into a functional HTML layout, ready to be ported to any CMS. Let’s get started!


Before We Begin

You can get your very own PSD by following the step by step process at Webdesigntuts+ or just download it here.

Since this isn’t a beginner level tutorial, I will skip some basic explanations — a working knowledge of HTML and CSS is expected as well as a bit of knowledge about slicing images on Photoshop.


Step 1 - HTML Layout

Let’s start by creating the work folder; since this tutorial doesn’t require the use of a server side language, it can be anywhere on your system. Create a file named index.html, and three initial folders:

  • /images
  • /js
  • /style

The contents of these folders should be fairly self explanatory.

Add the basic containers of the page to index.html. I’m wrapping everything with a div called page. Inside that div, add three more with IDs of header, content and footer respectively.

In the style folder, create a new file called default.css and add a reset to remove all the default styles. I’m using Eric Meyer’s but feel free to start with your favorite.

Following the HTML code for this step:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Comicastic</title>
<link href="style/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="page">
	<div id="header">
   	Header
   </div>
	<div id="content">
   	Content
   </div>
	<div id="footer">
   	Footer
   </div>
</div>
</body>
</html>

And the CSS:

@charset "utf-8";
/* CSS Document */
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
	html, body, div, span, applet, object, iframe,
   h1, h2, h3, h4, h5, h6, p, blockquote, pre,
   a, abbr, acronym, address, big, cite, code,
   del, dfn, em, img, ins, kbd, q, s, samp,
   small, strike, strong, sub, sup, tt, var,
   b, u, i, center,
   dl, dt, dd, ol, ul, li,
   fieldset, form, label, legend,
   table, caption, tbody, tfoot, thead, tr, th, td,
   article, aside, canvas, details, embed,
   figure, figcaption, footer, header, hgroup,
   menu, nav, output, ruby, section, summary,
   time, mark, audio, video {
       margin: 0;
       padding: 0;
       border: 0;
       font-size: 100%;
       font: inherit;
       vertical-align: baseline;
   }

   /* HTML5 display-role reset for older browsers */
   article, aside, details, figcaption, figure,
   footer, header, hgroup, menu, nav, section {
   display: block;
   }
   body {
   		line-height: 1;
   }
   ol, ul {
   		list-style: none;
   }
   blockquote, q {
   		quotes: none;
   }
   blockquote:before, blockquote:after,
   q:before, q:after {
       content: '';
       content: none;
   }
   table {
       border-collapse: collapse;
       border-spacing: 0;
   }
/* End of reset */

Testing the code in Firefox, you should see something like this:


Step 2 - Basic CSS Layout

Let’s style the layout’s structure first.

We wrap all the content with a 960px wide container, and then set the heights to the inner divs. To get the exact height of each div you can use the Photoshop ruler tool.

We will slice the background images of the entire page and the footer section now.

In Photoshop, open Comicastic.psd and hide everything but the Header BG and Footer BG folders. Using the “slice” tool, draw a big slice from the top-left until 575px below the top border. Next, draw another slice from the guide delimiting the footer background (take a look at the image below). Of course, you can use the guides to get an accurate result.

Using the “slice selection” Tool, select the two recently created slices and name each one with their respective names — bg-body and bg-footer. Then double click on all the auto-slices, and change the “slice type” to No Image.

Next, go to File > Save for Web and Devices. Select the two slices you want to save (Hold the shift key to select more than one), set the “file type” to JPG and set the Quality to 70 and click on Save. Browse for your working directory and chose the root file (this dialog will automatically save your files inside the /images folder).

Now that you have the background images, let’s add the CSS for all the containers.

We will set a test height for the divs except the header (which is 180px height actually) and add some temporary background colors for testing purposes.

/*Common*/
body{
	background-color:#000;
	background-image:url(../images/bg-body.jpg);
	background-position:center top;
	background-repeat:no-repeat;
}

/*Containers*/
#page{
   margin:0px auto;
   width:960px;
}
#header{
   width:960px;
   height:180px;
   float:left;
   background-color:#666;
}
#content{
   width:960px;
   height:400px;/* Temporal */
   float:left;
   background-color:#FCC;
}
#footer{
   width:960px;
   height:250px;/* Temporal */
   float:left;

   background-image:url(../images/bg-footer.jpg);
   background-position:top center;
   background-repeat:no-repeat;
}

Testing in a browser, you should have something like the image below.


Step 3 – Slice the Header and Content Background Images

Now that you know how to slice the image, let’s do the same with all the header and content background (or foreground) images. For the header images, create a copy of the "comicastic.psd" document and hide everything but the Logo folder and the Search background related layers (plus I’m adding the search button in this view after moving it a few pixels right). Now, draw the slices around the visible segments, and name them logo, bg-search and search-button, respectively. Save them as PNGs with transparent backgrounds.

Let’s move forward with the content banner.

Show only the Background folder inside Top Banner, show the Page Curl folder and the Page Bg layer under Page Content and show the Header Bg folder including the overall black background. Then, with these layers visible, draw two slices: one for the banner’s background named bg-banner and another small one for the page curl named content-page-curl. Then save them both of them as JPEGs.

Add a new div named logo inside the "header" and another div named top-banner inside content to our HTML file.

<div id="header">
	<div id="logo">
		<a href="#"><img src="images/logo.png" width="340" height="135" alt="Comicastic" /></a>
	</div>
</div>
<div id="content">
	<div id="top_banner">Top Banner</div>
</div>

And the CSS code to make them look right:

#logo{
     padding-top:32px;
     padding-left:70px;
}

[...]

#top_banner{
     float:left;
     width:960px;
     height:250px;
     background-image:url(../images/bg-banner.jpg);
     background-position:center top;
     background-repeat:no-repeat;
}

Now you should have something like so:


Step 4 – Top Navigation

Let’s add the HTML for the top navigation. Add the following code inside the header div, below the logo.

<ul id="main_navigation">
	<li><a href="#">Home</a></li>
	<li><a href="#">About us</a></li>
	<li><a href="#">Contact us</a></li>
</ul>

The hardest work with this div will be the positioning. We’ll make it float right, and play with the padding to fit it in its proper place. Add the following CSS:

#main_navigation{
 	float:right;
}
#main_navigation li{
 	display:inline;
}
#main_navigation li a{
 	display:block;
 	float:left;
}
#main_navigation li a:hover{
}

Step 5 – Font Replacement

Since I don’t have any intention of using "Comic Sans" for this design, we will use a more interesting typeface. We’ll take advantage of CSS3 to make it look great in modern browsers.

First, download the CSS font packages "Komika Title" and "Komika Text" and put them in a new folder, named /fonts. Each kit has a bunch of font files and a .CSS file that we will import to our default.css document, as follows:

/*Font Face Kits*/
@import url("../fonts/komika-text/stylesheet.css") screen;
@import url("../fonts/komika-title/stylesheet.css") screen; 

Now that the fonts are imported, we can use them anywhere on our site. Each set has a number of variants to choose from; you can use the ones according to the graphic design. For starters, we will set all the body text with 'KomikaTextTightRegular' as follows:

body{
 	background-color:#000;
 	background-image:url(../images/bg-body.jpg);
 	background-position:center top;
 	background-repeat:no-repeat;

 	font-family:'KomikaTextTightRegular', Arial, Helvetica, sans-serif;
 	font-size:1em;
}

And you can test the result in the browser:


Step 6 – Styling the top Navigation

Back to the psd file now. Hide everything but the Tab background, create a new slice for the navigation tab named bg-main-navigation and save it for web as a PNG file.

In our CSS file, let’s add the styles for the navigation bar, to achieve the desired hover effect. We will add the background to the hover action and create a similar style for the a.selected instance. Regarding the typography, per the graphic, we will use "KomikaTextItalic" and add a nice text shadow style to make it look better.

#main_navigation{
 float:right;
 margin-top:-18px;
 margin-right:20px;
}

#main_navigation li{
 display:inline;
 width:120px;
}

#main_navigation li a{
 display:block;
 float:left;

 padding-top:7px;
 padding-bottom:8px;
 padding-left:20px;
 padding-right:20px;

 margin-left:5px;

 color:#FFF;
 font-family:'KomikaTextItalic', Arial, Helvetica, sans-serif;
 font-size:18px;
 text-decoration:none;

 text-shadow:2px 2px 2px rgba(0,0,0,.5);

 -webkit-border-top-right-radius: 3px;
 -khtml-border-radius-topright: 3px;
 -moz-border-radius-topright: 3px;
 border-top-right-radius: 3px;
}

#main_navigation li a:hover{
   background-image:url(../images/bg-main-navigation.png);
   background-position:left;
   background-repeat:no-repeat;
}

#main_navigation li a.selected{
   background-image:url(../images/bg-main-navigation.png);
   background-position:left;
   background-repeat:no-repeat;
}

Your page should like so at this stage of development:


Step 7 - Header Content

Besides the logo and the navigation bar, we will need to add the search bar and the social media links to the header section. Let’s start by creating the container box in HTML and adding the following div inside the header div.

<div id="header-content">
 	Top Right
</div>

And some necessary styles:

#header-content{
	 background-color:#036;
	 float:right;
	 width:440px;
	 height:105px;
}

When tested in the browser:


Step 8 - Search Bar

Next, we’ll begin styling the search area. It’s basically a form with an input box and a button (see step 3). For this, add the following code inside the "header-content div:

<div id="search">
    <form>
    <input type="text" class="search_input" value="Looking for something?"/>
    <input type="image" src="images/search-btn.png" />
    </form>
</div>

And the styling to make it look nice:

#search{
 	text-align:right;
 	padding-top:10px;
}

 #search input{
 	vertical-align:middle;
 }

 #search .search_input{
 	width:160px;
 	margin-right:10px;
 	padding:6px 10px;

 	color:#F2AA00;
 	font-family:'KomikaTextTightRegular',Arial, Helvetica, sans-serif;
 	font-size:14px;

	background-color:#280000;
 	border:1px solid #7C0000;

 	-webkit-border-radius: 3px;
 	-khtml-border-radius: 3px;
 	-moz-border-radius: 3px;
 	border-radius: 3px;
 }

That should give us:


Step 9 – Social Media Links

Below the search div, add a div with an id of social_media. In it, you can insert a list of the social media links of your choice. I’m using Social Media Icon Pack by Komodo Media

<div id="social_media">
 	Follow us &nbsp;&nbsp;
	<a href="#"><img src="images/icons/twitter_16.png" width="16" height="16" alt="Twitter" /></a>
	<a href="#"><img src="images/icons/facebook_16.png" width="16" height="16" alt="Twitter" /></a>
	<a href="#"><img src="images/icons/technorati_16.png" width="16" height="16" alt="Twitter" /></a>
	<a href="#"><img src="images/icons/rss_16.png" width="16" height="16" alt="Twitter" /></a>
</div>

And on the stylesheet:

#social_media{
	 padding-top:15px;
	 text-align:right;
	 color:#FFF;
	 font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;
	 font-size:15px;

	 vertical-align:middle;

	 text-shadow:2px 2px 2px rgba(0,0,0,.5);
}

Step 10 - Sliding Banner

We will start with the sliding banner. Begin by downloading Easy Slider 1.5 and paste the files into a folder named Banner.

There are several examples in the library folder– we will mimic 02.html. Rename the file, if needed, delete all the unnecessary HTML code and replace the images with some sample images.

So, the HTML file for the banner should be something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Banner</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/easySlider1.5.js"></script>
    <script type="text/javascript">
     $(document).ready(function(){
     $("#slider").easySlider();
     });
     </script>
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
    <div id="content">
        <div id="slider">
            <ul>
                <li><a href="#"><img src="images/01.jpg" alt="Preview" /><div class="bubble">test</div></a></li>
                <li><a href="#"><img src="images/02.jpg" alt="Preview" /><div class="bubble">test22</div></a></li>
                <li><a href="#"><img src="images/03.jpg" alt="Preview" /></a></li>
                <li><a href="#"><img src="images/04.jpg" alt="Preview" /><div class="bubble">test</div></a></li>
                <li><a href="#"><img src="images/05.jpg" alt="Css Template Preview" /></a></li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

And here’s the CSS

@charset "utf-8";
   /* CSS Document */
   /* image replacement */
img{
   border:0px;
}
.graphic, #prevBtn, #nextBtn{
   margin:0;
   padding:0;
   display:block;
   overflow:hidden;
   text-indent:-8000px;
}
/* // image replacement */
   #container{
   margin:0 auto;
   position:relative;
   text-align:left;
   width:696px;
   background:#fff;
   margin-bottom:2em;
} 

#content{
   position:relative;
} 

/* Easy Slider */
#slider{
   position:relative;
   width:760px!important;
   background:none;
}
   #slider ul, #slider li{
   	margin:0;
   	padding:0;
   	list-style:none;
   	background:none;
   }
   #slider li{
   	width:760px!important;
   }
   #slider li a{
   	background:none;
   }
   #slider li{
   	/*
   	define width and height of list item (slide)
   	entire slider area will adjust according to the parameters provided here
   	*/
   	width:696px;
   	height:241px;
   	overflow:hidden;
   }
   #prevBtn, #nextBtn{
   	display:block;
   	width:30px;
   	height:77px;
   	position:absolute;
   	left:-30px;
   	top:71px;
   }
   #nextBtn{
   	left:696px;
   }
   #prevBtn a, #nextBtn a{
   	display:block;
   	width:30px;
   	height:77px;
   	background:url(../images/btn_prev.gif) no-repeat 0 0;
   }
   #nextBtn a{
   	background:url(../images/btn_next.gif) no-repeat 0 0;
   }

   .bubble{
   	position:absolute;
   	float:right;
   	background-color:#036;

   	width:250px;
   	height:100px;
   	margin-top:-240px;
   	margin-left:500px;

   	color:#FFF;
   }
/* // Easy Slider */

At this point you should have something like this:

Don’t worry if the slider is a little bit buggy, we will fix it in a minute.

Adjust positioning and replace the arrows

Slice the two arrows (prev and next) and save them as PNG files in the images folder of the banner testing directory. 

Then adjust the CSS to work properly with the new arrows

#prevBtn, #nextBtn{
    display:block;
    width:50px;
    height:40px;
    position:absolute;
    left:-50px;
    top:71px;
}
#nextBtn{
    left:630px; /* this is the li width*/
}
#prevBtn a{
    display:block;
    width:50px;
    height:40px;
    background:url(../images/btn-prev.png) no-repeat 0 0;
}
#nextBtn a{
    display:block;
    width:50px;
    height:40px;
    background:url(../images/btn-next.png) no-repeat 0 0;
}

Which produces:

Positioning

Now, we’ll set the positioning, width and height of all the banner related divs. We’ll also fix the JS library to avoid any problem regarding the additional bubble div.

Here’s the modified CSS:

#container{
 	margin:0 auto;
 	width:830px;
 	position:relative;
 	text-align:left;
 	background:#096;
 	margin-bottom:2em;
 	padding-left:65px;
}
#content{
 	position:relative;
}
 /* Easy Slider */
#slider{
 	position:relative;
 	width:830px;
 	overflow:hidden;
 	background:none;
 	background-color:#09F;
}
#slider ul, #slider li{
 	margin:0;
 	padding:0;
 	list-style:none;
 	background:none;
}
#slider li{
 	width:830px;
 	height:250px;
 	overflow:hidden;
}
#slider li a{
 	background:none;
}
#prevBtn, #nextBtn{
 	display:block;
 	width:65px;/*img width +15 padding*/
 	height:40px;
 	position:absolute;
 	left:-65px;
 	top:185px;
}
#nextBtn{
 	left:630px; /*Banner Width*/
}
#prevBtn a{
 	display:block;
 	width:65px; /*img width +15 padding*/
 	height:40px;
 	background:url(../images/btn-prev.png) no-repeat left;
 	background-color:#066;
}
#nextBtn a{
 	display:block;
 	width:65px;/*img width +15 padding*/
 	height:40px;
 	background:url(../images/btn-next.png) no-repeat right;
 	background-color:#066;
}

.bubble{
 	position:absolute;
 	float:right;
 	background-color:#036;

 	width:250px;
 	height:100px;
	 margin-top:-240px;
	 margin-left:500px;

	 color:#FFF;
}
/* // Easy Slider */

And the result in the browser:

Bubble Background

Now, slice the post content background. With only the talking bubbles visible in your .PSD, draw a Slice named "bg-bubble" and save it as a .png file.

Modify the CSS to add the background and adjust the positioning of the bubble div, accordingly.

.bubble{
 	position:absolute;
 	float:right;
 	width:295px;
 	height:210px;
 	margin-top:-255px;
 	margin-left:535px;
 	background-image:url(../images/bg-bubble.png);
 	color:#FFF;
} 

Here is how it looks in the browser; remove all the temporary background colors if you wish.

Post Content

To finish the banner section, let’s add the HTML for the post content.

<div class="featured_post">
    <h2 class="post_title">Post title</h2>
    <p class="post_brief">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam</p>
    <div class="post_info">
        <span class="author">Posted by <a href="#">Admin</a></span>,
        <span class="date">Apr 14</span>
    </div>
    <div class="post_comments">
        <div class="number"><a href="#">29</a></div>
        <div class="comments"><a href="#">Comments</a></div>
	 </div>
</div>

Merge with the Main Template File

It’s time to merge the separate module with our main document.

First, copy the banner’s /js folder to the template root, then add all the banner images into the /images folder to the template directory.

Next, add the following code inside the <head> tag of our index.html" file:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/easySlider1.5.js"></script>
<script type="text/javascript">
 $(document).ready(function(){
 $("#slider").easySlider();
 });
</script>

And add the banner divs accordingly inside the top_banner div.

<!-- Top Banner -->
<div id="top_banner">
    <div class="banner_container">
        <div id="slider">
            <ul>
                <li><a href="#"><img src="images/banner/01.jpg" alt="Preview" /></a>
                    <div class="bubble">
                        <div class="featured_post">
                        	<h2 class="post_title">Post title</h2>
                        	<p class="post_brief">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam</p>
                        	<div class="post_info">
                        		<span class="author">Posted by <a href="#">Admin</a></span>,
                        		<span class="date">Apr 14</span>
                        	</div>
                        	<div class="post_comments">
                        		<div class="number"><a href="#">29</a></div>
                        		<div class="comments"><a href="#">Comments</a></div>
                        	</div>
                        </div>
                    </div>
                </li>
                <li><a href="#"><img src="images/banner/02.jpg" alt="Preview" /></a><div class="bubble">test22</div></li>
                <li><a href="#"><img src="images/banner/03.jpg" alt="Preview" /></a><div class="bubble">test333</div></li>
                <li><a href="#"><img src="images/banner/04.jpg" alt="Preview" /></a><div class="bubble">test4444</div></li>
                <li><a href="#"><img src="images/banner/05.jpg" alt="Preview" /></a><div class="bubble">test55555</div></li>
            </ul>
        </div>
    </div>
</div>
<!-- End of Top Banner -->

And the complete CSS to make the banner work

/* Top Banner */
#top_banner{
     float:left;
     width:830px;
     height:250px;
     padding-left:130px;
     padding-top:10px;
     background-image:url(../images/bg-banner.jpg);
     background-position:center top;
     background-repeat:no-repeat;
}

.banner_container{
     float:left;
     width:860px;
     height:250px;

     position:relative;
     text-align:left;
}

/* image replacement */
     #prevBtn, #nextBtn{
     margin:0;
     padding:0;
     display:block;
     overflow:hidden;
     position:absolute;
     text-indent:-8000px;
}
 /* // image replacement */

 /* Easy Slider */

#slider{
     position:relative;
     width:830px;
     margin-left:100px
     overflow:hidden;
}
#slider ul, #slider li{
     margin:0;
     padding:0;
     list-style:none;
     background:none;
}

#slider li{
     width:830px;
     height:250px;
     overflow:hidden;
}

#slider li img{
     border:1px solid #FFF;
     height:248px;
}

#slider li a{
 	background:none;
}

#prevBtn, #nextBtn{
     display:block;
     width:65px;/*img width +15 padding*/
     height:40px;
     position:absolute;
     left:-65px;
     top:185px;
}
#nextBtn{
	 left:630px; /*Banner Width*/
}
#prevBtn a{
     display:block;
     width:65px; /*img width +15 padding*/
     height:40px;
     background:url(../images/btn-prev.png) no-repeat left;
}
#nextBtn a{
     display:block;
     width:65px;/*img width +15 padding*/
     height:40px;
     background:url(../images/btn-next.png) no-repeat right;
}

.bubble{
     position:absolute;
     float:right;
     width:295px;
     height:210px;
     margin-top:-255px;
     margin-left:535px;
     background-image:url(../images/bg-bubble.png);
     color:#FFF;
}
/* // Easy Slider */
/* End of Top Banner*/

We will style the featured post content shortly. At this point, though, you should have something similar to the following image:


Step 11 – Content Wrapper and Background

Moving forward with the mockup, add a div below the top banner, named content_wrapper, and inside another div named page_content, which will contain the actual information.

<div id="content_wrapper">
	<div id="page_content">
		Page content
	</div>
</div>

Then, in order to make it look like the design, we will use CSS3 to add the rounded corners to the page_content div and the page curl we sliced in Step 3.

/*Page content*/
   #content{
 float:left;
 width:960px;
 }
#content_wrapper{
   float:left;
   width:910px;
   padding-left:10px;
   padding-right:40px;
   padding-top:10px;
}

#page_content{
   float:left;
   width:100%;
   height:350px;/*temporal*/
   background-color:#FFF;
   background-image:url(../images/content-page-curl.jpg);
   background-position:bottom right;
   background-repeat:no-repeat;

   -webkit-border-radius: 5px;
   -khtml-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;

   -webkit-border-bottom-right-radius: 0px;
   -khtml-border-radius-bottomright: 0px;
   -moz-border-radius-bottomright: 0px;
   border-bottom-right-radius: 0px;
}
/*End of Page Content*/

What our page should look like, at this point:


Step 12 – Post Image and Title

Let’s mock up a testing post.

Per the design, we will need to have a squared image with the post title and the categories list placed on two stripes above it. Let’s deal with the HTML first.

Create a div named post and place it inside the page_content div. Then add an image, a title and some metadata to the container.

<div class="post">
	<img src="images/posts/01.jpg" class="post-image" />
	<h2><a href="#">Lorem Ipsum Post Title</a></h2>
	<div class="met ad at a"><a href="#">Comics</a>, <a href="#">Movies</a>, <a href="#">Latest Launches</a>, <a href="#">Lorem Ipsum Category</a></div>
</div>

The CSS for this part is tricky since each post must be 50% width in reference to the page_content container, plus the stripes should be in front of the picture. We’ll need to play around with relative positioning and negative margins to make this happen.

.post{
    float:left;
    width:445px;
    height:230px;
}

.post .post-image{
    position:relative;
    top:0px;
    left:0px;
    border:1px solid #FFB800;
}

.post h2{
    position:relative;
    top:-70px;
    left:0px;
    width:300px;

    padding:5px;
    padding-left:10px; 

    font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;
    font-size:18px;

    color:#680000;
    background-color:#F2AA00;
}

.post h2 a{
    color:#680000;
    text-decoration:none;
}

.post h2 a:hover{
    color:#FFFFFF;
}

.post .metadata{
    position:relative;
    top:-70px;
    left:0px;
    width:250px;

    padding:5px;
    padding-left:10px;

    font-size:13px;

    background-color:#FFF;
    border:1px solid #FFB800;
}

.post .metadata a{
    color:#000;
    text-decoration:none;
}

.post .metadata a:hover{
    color:#9C0000;
}

You should now have something like so:


Step 13 - Post Content Background and Position

Now, we will add a div which contains the post content.

<div class="post">
	<img src="images/posts/01.jpg" class="post-image" />
	<h2><a href="#">Lorem Ipsum Post Title</a></h2>
	<div class="metadata"><a href="#">Comics</a>, <a href="#">Movies</a>, <a href="#">Latest Launchs</a>, <a href="#">Lorem Ipsum Category</a></div>

	<div class="post_content">Post Content</div>
</div>

Slice the background image for the post_content div, and save it as a PNG file.

First, we will set its positioning in the CSS file.

.post .post_content{
 	position:relative;
 	top:-275px;
 	left:230px;

 	width:210px;
 	height:220px;
	background-image:url(../images/bg-post-content.png);
   background-position:top left;
   background-repeat:no-repeat;
}

Taking a look in the browser:


Step 14 – Post Content

Let’s add the containers for the post brief, post information and comments:

<div class="post_content">
    <div class="post_brief">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam
    </div>
    <div class="post_info">
        <span class="author">Posted by <a href="#">Admin</a></span>,
        <span class="date">Apr 14</span>
    </div>
    <div class="post_comments">
        <div class="number"><a href="#">29</a></div>
        <div class="comments"><a href="#">Comments</a></div>
    </div>
</div>

And the styling to make everything look nice:

.post .post_content .post_brief{
     width:150px;
     height:98px;
     overflow:hidden;

     padding-left:35px;
     padding-top:15px;
     text-align:right;
     color:#FFF;
}

.post .post_info{
     width:150px;
     margin-left:35px;
     margin-top:8px;
     padding-top:4px;

     text-align:right;

     border-top:1px solid #787878;

     font-family:Tahoma, Geneva, sans-serif;
     font-size:10px;
     color:#787878;
}

.post .post_info a{
     color:#787878;
     text-decoration:none;
}

.post .post_info a:hover{
     color:#D8D8D8;
     text-decoration:none;
}

.post .post_comments{
     width:50px;
     margin-top:37px;
     margin-left:56px;

     text-align:center;
}

.post .post_comments a{
     color:inherit;
     text-decoration:none;
}

.post .post_comments .number{
     font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;
     font-size:14px;
     color:#FFF;
}

.post .post_comments .comments{
     font-size:12px;
     color:#F2AA00;
}

And we are done with the post!


Step 15 - Add More Posts

Let’s go ahead and add more posts to your mockup. Duplicate this block for as many times as you want the post div. You should get rid of the temporary height we put on the page_content div. If everything is was executed correctly, the layout will increase its height as we add more posts to the homepage.


Step 16 – Featured Post Content

Now that we have the basic post styling finished, let’s style the featured post content. Remember how we had the following code inside the bubble div?

<div class="featured_post">
    <h2 class="post_title">Post title</h2>
    <p class="post_brief">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam</p>
    <div class="post_info">
        <span class="author">Posted by <a href="#">Admin</a></span>,
        <span class="date">Apr 14</span>
    </div>
    <div class="post_comments">
        <div class="number"><a href="#">29</a></div>
        <div class="comments"><a href="#">Comments</a></div>
	 </div>
</div>

Add the following CSS and replicate the bubble in all the slides of our rotating banner.

/* Post */

.featured_post .post_title{
     height:29px;
     padding-top:18px;

     text-align:right;
     font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;
     font-size:18px;

     color:#680000;
}

.featured_post .post_title a{
     color:#680000;
     text-decoration:none;
}

.featured_post .post_title a:hover{
	 color:#FFFFFF;
}

.featured_post .post_brief{
     height:67px;
     padding-left:30px;
     overflow:hidden;
     text-align:right;
     color:#1B1B1B;
}

.featured_post .post_info{
     margin-left:30px;
     text-align:right;
     padding-top:2px;

     font-family:Tahoma, Geneva, sans-serif;
     font-size:10px;
     color:#969696;

     border-top:1px solid #FFC000;
}

.featured_post .post_info a{
     color:#969696;
     text-decoration:none;
}

.featured_post .post_info a:hover{
 	color:#1B1B1B;
}

.featured_post .post_comments{
     text-align:center;
     float:right;
     margin-top:20px;
     margin-right:10px;

     width:65px;
     height:40px;
}

.featured_post .post_comments a{
     color:inherit;
     text-decoration:none;
}

.featured_post .post_comments .number{
     font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;
     font-size:24px;
     color:#FFF;
}

.featured_post .post_comments .comments{
     font-size:14px;
     color:#F2AA00;
}

 /* // Post */

I’ve also added a border and a box-shadow to the sliding image:

#slider li img{
     border:1px solid #FFF;
     height:248px; 

     box-shadow: 0px 0px 20px rgba(0,0,0,.5);
     -moz-box-shadow: 0px 0px 20px rgba(0,0,0,.5);
     -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,.5);
}

It should look like so:


Step 17 – Footer Widgets

Instead of the classic sidebar, I wanted to add a widget ready footer. Add the following code inside the footer div. Inside the sidebar, there will be another container named widget, and, inside that div:

  • a title
  • an unordered list and
  • a div for the curled corner

We’ll take care of the categories list first.

<div id="sidebar">
    <div class="widget">
        <h3>Categories</h3>
        <ul>
        <li><a href="#">Lorem ipsum dolor sit amet</a></li>
        <li><a href="#">Consectetur adipisicing elit</a></li>
        <li><a href="#">Sed do eiusmod tempor</a></li>
        <li><a href="#">Incididunt ut labore</a></li>
        <li><a href="#">Et dolore magna aliqua</a></li>
        <li><a href="#">Ut enim ad minim veniam</a></li>
        <li><a href="#">Lorem ipsum</a></li>
        <li><a href="#">Dolor sit amet</a></li>
        <li><a href="#">Consectetur adipisicing</a></li>
        </ul>
        <div class="corner">&nbsp;</div>
    </div>
    <div class="widget">W2</div>
    <div class="widget">W3</div>
</div>

Now in the PSD file, slice the corner, name it widget-curl and save the image for web as a JPG file. Again, slice the tiny arrow next to the links, name it arrow and save it as a PNG file.

And edit the CSS file like so:

/*Footer*/
#footer{
     width:940px;
     padding-left:0px;
     padding-right:10px;
     padding-top:20px;
     height:250px;/* Temporal */
     float:left;

     background-image:url(../images/bg-footer.jpg);
     background-position:top center;
     background-repeat:no-repeat;
}
/*End of Footer*/

/* Footer sidebar */
     #sidebar{
     float:left;
     width:940px;
}
.widget{
     float:left;
     margin-left:10px;
     margin-right:10px;
}
.widget h3{
     color:#F2AA00;

     font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;
     font-size:14px;
     padding-bottom:10px;
     padding-left:10px;
}

.widget ul{
     width:200px;
     padding:20px 10px;

     background-color:rgba(26,26,26,.5);
     border:1px solid #252525;

     -webkit-border-radius: 5px;
     -khtml-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
}

.widget .corner{
     background-image:url(../images/widget-curl.jpg);
     background-position:bottom right;
     background-repeat:no-repeat;

     height:30px;
     margin-top:-30px;
     margin-right:-2px;
}

.widget ul li{
     font-size:16px;
     padding-bottom:3px;
     color:#FFF;
}

.widget ul li a{
     padding-left:20px;
     color:#FFF;
     text-decoration:none;
}

.widget ul li a:hover{
     color:#DC0000;
     background-image:url(../images/arrow.png);
     background-position:0px 6px;
     background-repeat:no-repeat;
}
/* //Footer sidebar */

When tested in a browser, you should see something like the following image:


Step 18 – More Widgets

Replicate the HTML code to add a second or even a third list widget. This time, we will add archives to the footer. You can test the layout now adding several copies of the widget div to see how it looks. Optimally, the footer area will increase as you add more widgets.

<!-- Widget -->
<div class="widget">
    <h3>Archives</h3>
    <ul>
        <li><a href="#">January 2011</a></li>
        <li><a href="#">February 2011</a></li>
        <li><a href="#">March 2011</a></li>
        <li><a href="#">May 2011</a></li>
        <li><a href="#">June 2011</a></li>
        <li><a href="#">July 2011</a></li>
    </ul>
    <div class="corner">&nbsp;</div>
</div>
<!-- End of widget -->

This is how it looks with the archives section added:


Step 19 – Tabbed Pane

As an example of a more complex widget, let’s add a tabbed pane with three different types of content in each tab.

First, add the following HTML code as basic markup: an unordered list for the tabs, and divs with different ids for the content. I’m adding a general class, named tab to all the content divs in order to avoid duplicating the code in the CSS file.

<div class="widget">
    <div id="tabs">
        <ul>
            <li><a href="#tab-1">Popular Posts</a></li>
            <li><a href="#tab-2">Recent Posts</a></li>
            <li><a href="#tab-3">Recent Comments</a></li>
        </ul>
        <div class="tab" id="tab-1">
            <p>Tab1</p>
        </div>
        <div class="tab" id="tab-2">
            <p>Tab2</p>
        </div>
        <div class="tab" id="tab-3">
            <p>Tab3</p>
        </div>
    </div>
    <div class="corner">&nbsp;</div>
</div>

Let’s create a JavaScript document, named tabs.js, and save it in the /js folder. Include it by adding this line to the <head> tag.

 <script type="text/javascript" src="js/tabs.js"></script>

Now, add a basic jQuery tabbed pane by adding the following code to the tabs.js file.

$(document).ready(function(){
   $('#tabs div').hide();
   $('#tabs div:first').show();
   $('#tabs ul li:first').addClass('active');
   $('#tabs ul li a').click(function(){
       $('#tabs ul li').removeClass('active');
       $(this).parent().addClass('active');
       var currentTab = $(this).attr('href');
       $('#tabs div').hide();
       $(currentTab).show();
       return false;
   });
 });

With the JavaScript function working, let’s add the styling to make it look pretty. First, we’ll need to slice the little arrow that points to the selected tab. Name it tab-arrow, and save it as a PNG.

Now add the following code to the CSS file:

/* Footer Tabbed Pane */
#tabs{
}

#tabs ul{
     background:none;
     border:0px;
     padding:0px;
     margin:0px;
     width:428px;
     min-height:30px;
     height:30px; 

     -webkit-border-radius: 0px;
     -khtml-border-radius: 0px;
     -moz-border-radius: 0px;
     border-radius: 0px;
}

#tabs ul li{
     display:inline;
     float:left;
     text-align:left;
}
#tabs ul .active{
     background-image:url(../images/tab-arrow.png);
     background-position:bottom center;
     background-repeat:no-repeat;
}

#tabs ul .active a{
	 color:#F2AA00;
}

#tabs ul li a{
     display:block;
     margin:0px;
     padding:0px;

     color:#5A5A5A;

     font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;
     font-size:14px;
     padding-bottom:10px;
     padding-left:10px;
     padding-right:20px;
}

#tabs ul li a:hover{
     background-image:none;
     color:#F2AA00;
}

#tabs .tab{
     width:405px;
     padding:20px 10px;
     min-height:170px;
     /*This is to get the arrow above the tab*/
     margin-top:-6px;

     background-color:rgba(26,26,26,.5);
     border:1px solid #252525;

     -webkit-border-radius: 5px;
     -khtml-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
}
/* //Footer Tabbed Pane */

Now you should have the tabbed panel working; let’s add the content inside!


Step 20 – Tab Contents

Let’s go ahead and add some content to the tab. Taking a look at the graphic, you’ll notice that we have a list of three posts (latest and popular) with the title and a brief, and a pager at the bottom to navigate through the posts.

Paste in the following code inside a tab:

<span class="item">
	<h4><a href="#">John Doe</a></h4>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore...</p>
</span>
<span class="item">
	<h4><a href="#">Jane Smith</a></h4>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore...</p>
</span>
<span class="item">
	<h4><a href="#">SpiderHuman</a></h4>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore...</p>
</span>

<span class="pager"><a href="#">&laquo;</a><a href="#">1</a><a href="#" class="active">2</a><a href="#">3</a><a href="#">&raquo;</a></span>

And now the CSS:

/*Tabs Content*/
.tab .item{
     float:left;
     padding:5px 10px;

     -webkit-border-radius: 7px;
     -khtml-border-radius: 7px;
     -moz-border-radius: 7px;
     border-radius: 7px;
}

.tab .item:hover{
     background-color:#000;

     background-image: -moz-linear-gradient(left, #000000, #0D0D0D);
     background-image: -webkit-gradient(linear, left, right, color-stop(0.00, #000000), color-stop(1.00, #0D0D0D));
}

.tab .item:hover h4 a{
 	color:#F2AA00;
}

.tab .item h4{
     padding-bottom:3px;
     color:#FFFFFF;

     font-family:'KomikaTitleRegular', Arial, Helvetica, sans-serif;
     font-size:14px;
}

.tab .item h4 a{
     color:#FFFFFF;
     text-decoration:none;
}

.tab .item h4 a:hover{
 	color:#F2AA00;
}

.tab .item p{
     color:#909090;
     font-size:15px;
}

.pager{
     float:right;
     text-align:right;
     padding-right:40px;
}

.pager a{
     color:#4A4848;
     padding-left:5px;
}

.pager a:hover{
 	color:#F2AA00;
}

.pager a.active{
 	color:#D11300;
}
/* //Tabs Content*/

Replicate the HTML for each tab. This is how it should look:


Step 21 - Footer

Finally, add the footer navigation bar and the copyright information:

<div id="footer_content">
	<ul id="footer_nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">About us</a></li>
		<li><a href="#">Contact us</a></li>
		<li><a href="#">Privacy Policy</a></li>
		<li><a href="#">Sitemap</a></li>
	</ul>
<div id="copyright">Tuts+</div>
</div>

Now slice the 1px gradient line from the PSD file, name it "bg-footer-line" and save it as a JPG. Lastly, edit the CSS to set everything up.

/* Footer Nav */
#footer_content{
 float:left;
 width:940px;
 height:45px;
 padding:10px;
 margin-top:10px;

 background-image:url(../images/bg-footer-line.jpg);
 background-position:top center;
 background-repeat:no-repeat;

 font-family:Tahoma, Geneva, sans-serif;
 font-size:10px;
 color:#515151;
}

#footer_nav{

}

   #footer_nav li{
   		display:inline;
   }

   #footer_nav li:last-child a{
   		border-right:none;
   }

   #footer_nav li a{
       color:#515151;
       padding-right:5px;
       border-right:1px solid #292929;
   }

   #footer_nav li a:hover{
   		color:#F2AA00;
   }

   #copyright{
       float:right;
       padding-right:30px;
   }
 

Conclusion

.

And that’s it! We’re finished with the conversion process. The code here was tested in all major browsers. If you need IE6 and 7 compatibility, it shouldn’t be a big deal to write a few of fixes for them specifically. Our design is now ready to be integrated into any CMS as a skin. Good luck and thank you so much for reading!

March 14 2011

10:00

Convert Burnstudio from PSD to HTML [Very Detailed]

In this article you will learn how to convert Burnstudio Personal Website from PSD to HTML in a detailed step-by-step tutorial. You will learn how to create this layout by using a CSS framework, some CSS styles and JavaScript. When you’ve completed this tutorial you’ll have a valid HTML/CSS, cross browser compatible and dynamic layout. I hope that you can go through this tutorial and learn a few techniques that will help you in future projects.

Now, let’s get started with this tutorial.

Links you will need to complete this tutorial:

Here’s what we’ll be creating (Click on image to view a full working demo).

You can also download this tutorial’s source files here.

Step 1 – Preparation

If you read the Photoshop tutorial for creating this landing page you probably noticed that 960gs grid system was used to create guidelines. Well, in this tutorial we will also need the 960gs CSS framework. Using CSS frameworks makes layout and style creation a lot easier and saves time in web development. Now you should download the 960 Grid system source files for usage in this tutorial.

You will also need a code editor; you can use a plain text editor such as Notepad. I always recommend you use a free code editor and get used to it, this helps you get things done faster.

During this tutorial you should test your layout in different browsers, you don’t want to return to the beginning because of browser compatibility issues. In this tutorial I am using some CSS3 styles, but as you might know, not all browsers support CSS3 features. The CSS3 styles used in this tutorial have been tested with Firefox version 3.6.

Step 2 – Getting Your Files Ready

The first thing you should do is create a directory for your website. I usually create an /images/ directory for images and a /styles/ directory which will hold every style sheet (CSS) file and the slider JavaScript file. The HTML file goes in the root directory.

Now you need to grab the CSS files from the 960gs grid system we downloaded earlier, extract the ZIP file and then copy the CSS files from /code/css/ folder to your /styles/ directory, you should copy 960.css, reset.css and text.css files. You should notice a directory called /uncompressed/ which has the same files but in a bigger and more readable format, I recommend using the compressed CSS files. You also need to create a new file in your root directory called index.html and create another file called style.css in /styles/ directory.

In this tutorial we need to export images from Photoshop to use in our HTML layout. You can export these images yourself if you have the layered PSD file from the original Photoshop tutorial, or you can just grab the source files with this tutorial and you’ll find the images I created.

Step 3 – Simple Starter Layout

We need to start by creating a Simple HTML layout as the basis of our site to be. By looking at the Photoshop Layout you should notice a few things:

  1. The body has a background image that repeats horizontally and vertically.
  2. The layout has a header section which contains the logo, main menu, search box and latest tweets.
  3. The layout has a two sliders one is the content slider which could be used to display featured items and a portfolio slider which displays portfolio items.
  4. There’s a content section which contains about, what I do and client testimonials sections.
  5. Finally, we have a footer section which will contain footer links, services, latest posts from the blog, social icons and copyright text.

You can follow the notes above by looking at this image.

Now, Based on these notes we create the following HTML layout.

<!--<span class="hiddenSpellError" pre=""-->DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <span class="hiddenSpellError" pre="">BurnStudio</span> Designs
    css" href="styles/reset.css" rel="stylesheet" media="all" />
    css" href="styles/text.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/960.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/style.css" rel="stylesheet" media="all" />
</head>
<body>
    <div class="header_container">
        <div class="container_16">
            header content goes here.
        </div>
    </div>
    <div class="slider_container">
	    slider content goes here.
    </div>
    <div class="container_12 content">
        main content goes here.
    </div>
    <div class="portfolio">
        portfolio items slider goes here.
    </div>
    <div class="footer">
        <div class="container_16">
            footer content goes here.
        </div>
        <div class="container_16 copyrights">
            copyright text goes here.
        </div>
    </div>
</body>
</html>

Notice that I added five divisions for the sections we mentioned above each with a unique class name so we can style it later. The “header_container” has a division inside it with class “container_16″ which is already styled in 960.css file (which supports 16 columns) and we added this division inside it because we want the header section to occupy the full width of the browser and “container_16″ is limited to a width of 960px. This is also used in the footer division as well. The content division has an additional class “container_12″ (which supports 12 columns) and in this we want the style of “container_12″ to be applied to the content container.Now let’s add the CSS as follows (all CSS should be added in style.css file):

body {
    color: #5d5d5d;
    background: #fff url(../images/bg.jpg) repeat;
    font-family: Arial;
    font-size: 12px;
}

a, a:link, a:visited {
    color: #f36622;
    outline: none 0;
}

h2 {
    font-family: Segoe UI;
    font-size: 18px;
    font-weight: normal;
    color: #202020;
    padding: 0 0 12px 0;
    margin: 0 0 12px 0;
    border-bottom: 3px solid #000;
}

    h2 span.highlight {
        color: #f36622;
    }

    h2 span.sub_title {
        font-size: 13px;
        color: #5d5d5d;
    }

.header_container {
    width: 100%;
    height: 168px;
    background: #000 url(../images/header_bg.jpg) no-repeat top center;
    overflow: hidden;
}

.slider_container {
    position: relative;
    height: 400px;
    width: 960px;
    margin: 0 auto;
    margin-top: 43px;
    background: url(../images/slide_bg.jpg) no-repeat bottom center;
    overflow: hidden;
}

.content {
    margin-top: 46px;
    border-bottom: 3px solid #000;
    padding: 0 0 30px 0;
}

.portfolio {
    height: 286px;
    width: 960px;
    margin: 0 auto;
    margin-top: 30px;
    overflow: hidden;
    position: relative;
}

.footer {
    width: 100%;
    height: 287px;
    padding: 35px 0 0 0;
    background: url(../images/footer_bg.jpg) repeat-x;
    overflow: hidden;
    text-shadow: 0px 1px 1px #000000;
    filter: dropshadow(color=#000000, offx=0, offy=1);
}

    .footer .container_16 {
        height: 240px;
        overflow: hidden;
        background: url(../images/footer_seperator.jpg) repeat-x;
        background-position: 0px 30px;
    }

    .footer .copyrights {
        height: 47px;
        line-height: 47px;
        background: transparent;
        color: #b5b5b5;
    }

In the above CSS we styled the body with text color, font family and size, and a background image repeating horizontally and vertically with a white background color. Next, I set links color to #f36622 with no outline. Then I styled h2 with font family, font size, font weight to normal, text color, a bottom margin and padding of 12px and a bottom border. Now I added the style for header 2 highlight and subtitle with text color and font size. Next, I styled the “header_container” with full-page width, a fixed height, a centered none repeating background image with black background color and hidden overflow. The “slider_container” style is set with position relative which will be useful when we go later and add the slider script, a fixed height and width, margin set to “0 auto” which will make the division center horizontally in the page, a hidden overflow, a top margin for the space between the slider and the header and a non-repeating background image. Next, I styled the “content” with top margin to make space between the content and the slider, a bottom border and a bottom padding. The “portfolio” style is set with fixed height and width, a margin set to “0 auto” which will make the division center horizontally in the page, a fixed top margin, a hidden overflow and a relative position which will be useful when we go later and add the slider script.

Finally, the footer has a style with full-page width, a fixed height, a top padding, a horizontally repeating background image, hidden overflow and a text shadow which is a CSS3 feature. The “container_16″ inside the footer has a fixed height with hidden overflow, a horizontally repeating background image which will act as a divider between footer headers and content with a vertical background position of 30px. the “copyrights” division style is set to a fixed height and an equal value of line height to align text vertically to center, a transparent background and a text color of #b5b5b5. The result should be the same as the image below.

Step 4 – Adding Content to Header

Now we need to add the logo, menu items, search text box and latest tweets. Here’s the HTML for the header section.

<div class="header_container">
    <div class="container_16">
        <div class="grid_16 top_header">
            <a href="#" title="Subscribe via RSS">Subscribe via RSS</a>
            |
            <a href="#" title="Follow Me on Twitter">Follow Me on Twitter</a>
            |
            <a href="#" title="My Deviantart">My Deviantart</a>
        </div>
        <div class="grid_10 logo">
            <h1><a title="BurnStudio Designs" href="#">BurnStudio Designs</a>
        </div>
        <div class="grid_6 search">
            <div class="search_fields">
                <input type="text" value="search for something..." />
                <input type="submit" value="Search" />
            </div>
        </div>
        <div class="grid_8 main_menu">
            <a href="#" title="Home" class="active">Home</a>
            <a href="#" title="Services">Services</a>
            <a href="#" title="Portfolio">Portfolio</a>
            <a href="#" title="Blog">Blog</a>
            <a href="#" title="Contact">Contact</a>
        </div>
        <div class="grid_8 tweets">
            <span>Tweet:</span>
            Nullam vitae velit erat, id posuere tellus. Suspendisse potenti.
            Nullam vitae velit erat, id posuere tellus. Suspendisse potenti.
        </div>
    </div>
</div>

I added a division with class “grid_16 top_header” to hold all the links in the top header, then I added a division with class “grid_10 logo” for the logo text contained inside an h1 and a link and a division with class “grid_6 search” to complete the 16 columns and to hold the search text field and submit button. Next, I added a division with class “grid_8 main_menu” to hold the menu items as links with the home link having a class “active”. Finally, I added a division with class “grid_8 tweets” for the latest tweets. Now lets add the CSS for the header content.

.header_container .top_header {
    height: 41px;
    text-align: right;
    font-family: Segoe UI;
    font-size: 11px;
    line-height: 41px;
    text-shadow: 0px 1px 1px #000000;
    filter: dropshadow(color=#000000, offx=0, offy=1);
}

    .header_container .top_header a {
        text-decoration: none;
        color: #5d5d5d;
    }

        .header_container .top_header a:hover {
            color: #6f6f6f;
        }

.header_container .logo, .header_container .search {
    height: 86px;
}

    .header_container .logo h1, .header_container .logo h1 a {
        display: block;
        width: 205px;
        height: 40px;
        background: url(../images/burnstudio_sprite.png) no-repeat;
        background-position: 0px 0px;
        text-indent: -10000px;
        margin: 24px 0 0 0;
    }

    .header_container .search .search_fields {
        background: url(../images/burnstudio_sprite.png) no-repeat;
        background-position: 0px -80px;
        width: 310px;
        height: 41px;
        margin: 24px 0 0 0;
        font-family: Segoe UI;
        float: right;
    }

        .header_container .search .search_fields input[type=text] {
            float: left;
            width: 200px;
            height: 29px;
            line-height: 29px;
            padding: 6px 9px 6px 16px;
            background: transparent;
            border: 0px none;
            font-style: italic;
            color: #5d5d5d;
        }

        .header_container .search .search_fields input[type=submit] {
            float: left;
            width: 80px;
            height: 31px;
            padding: 0px;
            background: transparent;
            border: 0px none;
            text-indent: -10000px;
            cursor: pointer;
            margin: 5px 0 0 0;
        }

.header_container .main_menu, .header_container .tweets {
    height: 41px;
}

    .header_container .main_menu a {
        float: left;
        height: 29px;
        line-height: 29px;
        color: #5d5d5d;
        font-family: Segoe UI;
        font-size: 14px;
        text-decoration: none;
        padding: 0 11px;
        margin: 5px 10px 0 0;
    }

        .header_container .main_menu a:hover, .header_container .main_menu a.active {
            color: #fff;
            -webkit-box-shadow: 0px 1px 0px #060506;
            -moz-box-shadow: 0px 1px 0px #060506;
            box-shadow: 0px 1px 0px #060506;

            background: #E96728; /* old browsers */
            background: -moz-linear-gradient(left, #E96728 0%, #FB824A 50%, #E96728 100%); /* firefox */
            background: -webkit-gradient(linear, left top, right top, color-stop(0%,#E96728), color-stop(50%,#FB824A), color-stop(100%,#E96728)); /* webkit */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E96728', endColorstr='#E96728',GradientType=1 ); /* ie */
        }

.header_container .tweets {
    text-align: right;
    line-height: 65px;
    font-family: Myriad Pro;
    font-size: 13px;
}

    .header_container .tweets span {
        display: block;
        float: left;
        color: #2792c3;
        font-family: Segoe UI;
        font-size: 16px;
        margin: 0 0 0 65px;
    }

The top header division is styled with a fixed height, text alignment to right, a font family and font size, a line height equal to height to center text vertically and a text shadow. Then I styled the top header links both the normal and hover states with text color and no decoration. The logo and search divisions are styled with fixed height. The logo header and link style is set with block display, a fixed height and width, a background image for the logo which is included inside the CSS sprites image and I use background position to show the part I want, a negative text indent of 10000px to make text hidden when viewed in browsers and a top margin of 24px.

Next, I styled the “search_fields” division holding the search text box and submit button with a background image and background position from the CSS sprites image, a fixed height and width, a top margin, a font family and floating to right. The search text field has a left floating with fixed height and width, a line height equal to height to center text vertically, a padding, background set to transparent, no border, a text color and font style set to italic. The search submit button styled with left floating, a fixed height and width, zero padding, transparent background, no border, a negative text indent of 10000px to hide text when viewed in browser, cursor set to pointer and a top margin to position the button correctly. The main menu and tweets division is styled with fixed height.

Now, the main menu links normal state style is set with left floating, a fixed height and an equal line height, text color, a font family and font size, no text decoration, a left and right padding and no top or bottom padding and a top and right margin to make space between menu items. The hover and active state of menu items has a different text color, a box shadow and a gradient background which are both CSS3 features.

Finally, the tweets division is styled to align text to right with a suitable line height, font family and size. The span inside the tweets section style is set with left floating, a block display, a suitable text color, font family and size, and a left margin to position the span correctly. The result should be as the image below.

Step 5 – Adding Slider content, Style and Javascript

Now, we are going to add the slider and for this I am going to use an already implemented script, which is Slidesjs. I modified the script to make it suit our layout and now here’s the HTML for the slider content.

<div id="slides">
    <div class="slides_container">
        <div>
            <img src="images/slide.jpg" alt="" />
            <br />
            <span class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec</span>
                gravida sem at nisi laoreet placerat.

                Aliquam erat volutpat. Vivamus sagittis.
        </div>
        <div>
            <img src="images/slide.jpg" alt="" />
            <span class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec</span>
                gravida sem at nisi laoreet placerat.

                Aliquam erat volutpat. Vivamus sagittis.
        </div>
        <div>
            <img src="images/slide.jpg" alt="" />
            <span class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec</span>
                gravida sem at nisi laoreet placerat.

                Aliquam erat volutpat. Vivamus sagittis.
        </div>
        <div>
            <img src="images/slide.jpg" alt="" />
            <span class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec</span>
                gravida sem at nisi laoreet placerat.

                Aliquam erat volutpat. Vivamus sagittis.
        </div>
        <div>
            <img src="images/slide.jpg" alt="" />
            <span class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec</span>
                gravida sem at nisi laoreet placerat.

                Aliquam erat volutpat. Vivamus sagittis.
        </div>
    </div>
</div>

The “slider_container” has two divisions inside it a division with ID “slides” for the script to use and a division with class “slides_container” which will hold all the slides that are represented by a division with the slide content inside it, in this case an image and text contained inside a span element with class “description”. Now let’s add the CSS style for the slider content and script.

.slider_container .slides_container {
	width: 960px;
	display: none;
}

.slider_container .slides_container div {
	width: 960px;
	height: 400px;
	display: block;
    overflow: hidden;
}

    .slider_container .slides_container div span.description {
        color: #fff;
        display: block;
        width: 555px;
        margin: -3px 0 0 10px;
        padding: 15px 0 0 0;
        overflow: hidden;
    }

.slider_container .pagination {
    list-style: none;
	margin: 0;
	padding: 0;
    height: 61px;
    position: absolute;
    top: 339px;
    right: 70px;
    z-index: 100;
}

    .slider_container .pagination li {
        float: left;
        height: 26px;
        width: 26px;
        margin: 18px 5px 0 0;
        text-align: center;
    }

        .slider_container .pagination li a {
            display: block;
            line-height: 26px;
            color: #5d5d5d;
            text-decoration: none;
            font-size: 16px;
            text-shadow: 1px 1px 1px #000000;
            filter: dropshadow(color=#000000, offx=1, offy=1);
        }

        .slider_container .pagination .current a, .slider_container .pagination li a:hover {
	        color: #fff;
            background: url(../images/burnstudio_sprite.png) no-repeat;
            background-position: 0px -50px;
        }

.slider_container a.next {
    position: absolute;
    right: 20px;
    top: 357px;
    z-index: 100;
    display: block;
    height: 28px;
    width: 28px;
    text-indent: -10000px;
    background: url(../images/burnstudio_sprite.png) no-repeat;
    background-position: -35px -50px;
}

.slider_container a.prev {
    display: none;
}

The slides container has a fixed width with display set to none. Each slide division style is set with fixed height and width, a block display and hidden overflow. The description inside each slide is set with white text color, a fixed width, a negative top margin for correct positioning, a left margin for spacing, a top padding and overflow content hidden.

Now, the slider pagination style which is auto generated by the JavaScript is set to be positioned absolutely which will be absolute to the containing relatively positioned element, a top and right values to correctly position it with a z-index value of 100 which acts as a layer value making the pagination on top of other default elements that has a default z-index value of auto and works only on positioned elements. The pagination list element is styled to float to left, fixed height and width and text aligned to the center.

The style of normal state of the link inside each list element is set to display like a block, a line height equal to list element height to center text vertically, a custom text color with no text decoration, a fixed font size and a black text shadow. The hover and current state of the link style is set to have a white text color with a background image and background position to show the part we want from the CSS Sprites image.

Finally, the next and previous elements is styled which is also generated by the JavaScript. I hid the previous link with display none, and styled the next link with a background image with a part from the sprites image set by background position, an absolute position, a top and right values to position link correctly, a z-index of 100, a fixed width and height and a negative text indent to hide the text in browsers.

Now let’s add the required jQuery script in the header. You can find the script file in this tutorial source file or from the jQuery Scrollable script page. The HTML head section should be like this (which will be also used by the portfolio elements slider).

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>BurnStudio Designs</title>
    <link type="text/css" href="styles/reset.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/text.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/960.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/style.css" rel="stylesheet" media="all" />
    <script type="text/<span class="><!--mce:0--></script>
    <script type="text/<span class="><!--mce:1--></script>
</head>

Finally, we need to add the JavaScript code that will allow the slider to work on our layout. You should add this script just before the closing tag of the body. Here’s the JavaScript.

<script type="text/javascript">
    $(function () {
        $('#slides').slides({
            effect: 'fade',
            preload: true,
            generateNextPrev: true
        });
    });
</script>

Now our layout should look like this.

Step 6 – Adding Main Content and Style

Now let’s add the content for “About Burnstudio”, “What I do?” and “Client Testimonials”, here’s the HTML.

<div class="container_12 content">
    <div class="grid_4 about">
        <h2>About <span class="highlight">Burnstudios</span><br />
        <span class="sub_title">Donec gravida sem at nisi</span></h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec gravida sem at nisi laoreet placerat. Aliquam erat volutpat. Vivamus sagittis, erat eget ornare rhoncus, magna leo lobortis.
        </p>
        <a href="#" title="Read More" class="readmore">Read More</a>
    </div>
    <div class="grid_4 what">
        <h2>What <span class="highlight">I Do?</span><br />
        <span class="sub_title">Sed vitae libero diam</span></h2>
        <p>
            Curabitur tristique accumsan urna quis rhoncus. Sed et nisi nec arcu ultricies porttitor. In vehicula ligula a lectus pulvinar aliquet. Mauris vitae leo a sapien malesuada sollicitudin.
        </p>
        <a href="#" title="Read More" class="readmore">Read More</a>
    </div>
    <div class="grid_4 testimonials">
        <h2>Clients <span class="highlight">Testimonials</span><br />
        <span class="sub_title">Pellentesque ut accumsan ibero diam</span>
        <p>
            <img src="images/image.jpg" alt="" />
            Proin luctus sem ut augue luctus hendrerit. Quisque velit felis, gravida feugiat ultrices id, gravida quis enim. Aenean at turpis.
            <br />
            <span>
                Michael,<br />
                <a href="#">www.1stwebdesigner.com</a>
            </span>
        </p>
    </div>
    <div class="clear"></div>
</div>

Notice that the content section contains three divisions with class “grid_4″ and another unique class name for each division. Each division has an <h2> title with two spans inside one for the highlighted text and one for the sub-title text, a paragraph and a read more link with the exception of the last division which has an image and a link inside the paragraph. Then we have a division with class “clear” and it is used to clear floated elements and make the parent container expand to its content. Now let’s add the CSS style for the content.

.content .about {
    margin-left: 0px;
    margin-right: 30px;
}

.content .what {
    margin-left: 0px;
    margin-right: 30px;
}

.content .testimonials {
    margin-left: 0px;
    margin-right: 0px;
}

    .content .grid_4 p {
        text-align: justify;
        margin: 0 0 10px 0;
        line-height: 20px;
    }

        .content .grid_4 p img {
            float: left;
            margin: 0 12px 12px 0;
        }

        .content .grid_4 p span {
            float: right;
            font-style: italic;
            color: #202020;
            text-align: right;
        }

    .content .grid_4 a.readmore {
        width: 81px;
        height: 24px;
        display: block;
        background: url(../images/burnstudio_sprite.png) no-repeat;
        background-position: -225px 0px;
        text-indent: -10000px;
    }

I started by styling the “.about”, “.what” and “.testimonials” classes with zero left margin and a 30px right margin with the testimonials set to zero left and right margins. Now, I styled the paragraph inside each “grid_4″ division with justified text alignment, a bottom margin and a line height of 20px. The image inside the paragraph is styled with left floating and a right and bottom margin to make space between image and text. The span inside the paragraph used in the testimonials text is styled to be italic, float and text aligned to right with a custom color. Finally, the read more link is styled with a background image from the CSS sprites image, a fixed height and width, display set to block and a negative text indent of 10000px to hide text in browsers. Now our layout should look like this.

Step 7 – Adding Portfolio Items, Style and Script

Now let’s add the portfolio items. Here’s the HTML.

<div class="portfolio">
    <h2>
        My <span class="highlight">Portfolio</span></h2>
    <div id="portfolio_slides">
        <div class="slides_container">
            <div>
                <div class="item">
                    <img src="images/portfolio_1.jpg" alt="" />
                    <br />
                    <span>Client: </span>Firstclient.Inc
                    <br />
                    <span>URL: </span><a href="#">www.yoursiteurl.com</a>
                </div>
                <div class="item">
                    <img src="images/portfolio_2.jpg" alt="" />
                    <br />
                    Client: Anotherclient
                    <br />
                    <span>URL: </span><a href="#">www.yoursiteurl.com</a>
                </div>
                <div class="item">
                    <img src="images/portfolio_3.jpg" alt="" />
                    <br />
                    Client: Anotherclient2
                    <br />
                    <span>URL: </span><a href="#">www.yoursiteurl.com</a>
                </div>
                <div class="item">
                    <img src="images/portfolio_4.jpg" alt="" />
                    <br />
                    Client: Anotherclient3
                    <br />
                    <span>URL: </span><a href="#">www.yoursiteurl.com</a>
                </div>
            </div>
            <div>
                <div class="item">
                    <img src="images/portfolio_1.jpg" alt="" />
                    <br />
                    <span>Client: </span>Firstclient.Inc
                    <br />
                    <span>URL: </span><a href="#">www.yoursiteurl.com</a>
                </div>
                <div class="item">
                    <img src="images/portfolio_2.jpg" alt="" />
                    <br />
                    Client: Anotherclient
                    <br />
                    <span>URL: </span><a href="#">www.yoursiteurl.com</a>
                </div>
                <div class="item">
                    <img src="images/portfolio_3.jpg" alt="" />
                    <br />
                    Client: Anotherclient2
                    <br />
                    <span>URL: </span><a href="#">www.yoursiteurl.com</a>
                </div>
                <div class="item">
                    <img src="images/portfolio_4.jpg" alt="" />
                    <br />
                    Client: Anotherclient3
                    <br />
                    <span>URL: </span><a href="#">www.yoursiteurl.com</a>
                </div>
            </div>
        </div>
    </div>
</div>

The portfolio items slider is the similar in construction as the content slider we used earlier with a few things changed, the ID used is “portfolio_slides” which must be a unique identifier so that we can use in the JavaScript. The division that holds each slide contains four divisions with class “item” each with an image some text and links. Now let’s add the CSS style for the portfolio items.

.portfolio h2 {
    position: absolute;
    top: 0px;
    left: 0px;
    border: 0 none;
    padding: 0;
    margin: 0;
}

.portfolio .slides_container {
	width: 960px;
	display: none;
}

    .portfolio .slides_container div {
	    width: 960px;
        height: 286px;
	    display: block;
        overflow: hidden;
    }

    .portfolio .slides_container div.item {
        float: left;
        width: 210px;
        height: 250px;
        margin: 0 15px;
        margin-top: 36px;
        line-height: 20px;
        overflow: hidden;
    }

        .portfolio .slides_container div.item img {
            border: 3px solid #352e2c;
            margin: 0 0 20px 0;
        }

            .portfolio .slides_container div.item span {
                color: #202020;
            }

        .portfolio .slides_container div.item a {
            font-style: italic;
        }

.portfolio a.next {
    position: absolute;
    right: 15px;
    top: 0px;
    z-index: 100;
    display: block;
    height: 17px;
    width: 16px;
    text-indent: -10000px;
    background: url(../images/burnstudio_sprite.png) no-repeat;
    background-position: -90px -50px;
}

.portfolio a.prev {
    position: absolute;
    right: 50px;
    top: 0px;
    z-index: 100;
    display: block;
    height: 17px;
    width: 16px;
    text-indent: -10000px;
    background: url(../images/burnstudio_sprite.png) no-repeat;
    background-position: -70px -50px;
}

Notice that the header is styled with absolute position so that we can place it any where we want in its container which in this case a zero top and left values, zero border, zero padding and margins. the slides container style is the same as the one in the content slider we implemented above. The division that represents a slide is styled with a fixed height and width and hidden overflow. Now, we style each portfolio item with floating to left, fixed height and width, left and right margins of 15px, a top margin of 36px, a fixed line height and hidden overflow. The image inside each item has a 3px border with a bottom margin. The span has a different color and the links is set to italic. Finally, I added the style for the next and previous links with almost similar styles, different only in right position and background position.

Now we need to make the slider work by adding the JavaScript, we added just after the next script we added above for the content slider. The script block should be like this.

<script type="text/javascript">
    $(function () {
        $('#slides').slides({
            effect: 'fade',
            preload: true,
            generateNextPrev: true
        });
    });
    $(function () {
        $('#portfolio_slides').slides({
            preload: true,
            generateNextPrev: true
        });
    });
</script>

Now our layout should look like this.

Step 8 – Adding Footer Content and Style

Now let’s add the content for the footer, here’s the HTML for the footer.

<div class="container_16">
    <div class="grid_3 explore">
        <h3>
            Explore</h3>
        <ul>
            <li class="first-child"><a href="#" title="Home">Home</a></li>
            <li><a href="#" title="Services">Services</a></li>
            <li><a href="#" title="Blog">Blog</a></li>
            <li><a href="#" title="Portfolio">Portfolio</a></li>
            <li><a href="#" title="Contact">Contact</a></li>
            <li><a href="#" title="Faq's">Faq's</a></li>

	<li class="last-child"><a title="<span class=" href="#">Privasy Policy">Privasy Policy</a></li>
        </ul>
    </div>
    <div class="grid_5 services">
        <h3>
            My Services</h3>
        <ul>

	<li class="first-child">Lorem ipsum dolor sit amet</li>
            <li>Integer vitae purus</li>

	<li>Donec sed velit lacus</li>

	<li>Sed faucibus eros</li>

	<li>Nam hendrerit dui</li>

	<li class="last-child">venenatis non libero</li>
        </ul>
    </div>
    <div class="grid_5 blog">
        <h3>
            Latest From The Blog</h3>
        <p class="first-child">
            01 JLorem ipsum dolor sit amet, consectetur adipiscing.
        </p>
        <p>
            02 Nullam eleifend malesuada ultrices.
        </p>
        <p class="last-child">
            03 Nullam egestas turpis nec eros
        </p>
    </div>
    <div class="grid_3 social">
        <h3>
            Stay Connected</h3>
        <a href="#" title="Facebook">Facebook</a> <a href="#" title="Twitter">Twitter</a>
        <a href="#" title="Linkedin">Linkedin</a>
    </div>
</div>
<div class="container_16 copyrights">
    <div class="grid_16">
        Copyright 2010-2011 <a href="http://www.1stwebdesigner.com" title="1stwebdesigner.com">
            1stwebdesigner.com</a>. All Rights Reserved.
    </div>
</div>

The footer contains four divisions with class names that accumulates to 16 grid each one has an <h3> tag. The first one has an unordered list with links, notice that the first and the last items has a unique class name for later styling. The next one has an unordered list with first and last items having a unique classes. The blog division has paragraphs with the first and last one having a unique classes. The last division has the social links. Finally, the copyrights division has some copyright text with a link inside a “grid_16″ division. Now let’s add the CSS style for the footer content.

.footer a {
    text-decoration: none;
    text-transform: uppercase;
}

.footer h3 {
    color: #fff;
    font-family: Segoe UI;
    font-size: 18px;
    font-weight: normal;
    line-height: 22px;
}

.footer .first-child {
    border-top: 0px none;
}

.footer .last-child {
    border-bottom: 0px none;
}

.footer p {
    font-family: Myriad Pro;
    font-size: 13px;
    text-transform: uppercase;
    color: #b5b5b5;
    height: 42px;
    border-top: 1px solid #353535;
    border-bottom: 1px solid #000;
    margin: 0;
}

    .footer p span {
        font-family: Segoe UI;
        font-size: 24px;
        color: #373737;
        text-shadow: 0px 0px 0px #000000;
        filter: dropshadow(color=#000000, offx=0, offy=0);
        float: left;
        line-height: 42px;
        margin: 0 15px 0 0;
    }

    .footer ul {
        margin: 0;
    }

        .footer ul li {
            list-style: none;
            margin: 0px;
            font-family: Myriad Pro;
            font-size: 13px;
            text-transform: uppercase;
            line-height: 25px;
            border-top: 1px solid #353535;
            border-bottom: 1px solid #000;
        }

            .footer ul li a {
                color: #b5b4b4;
                display: block;
            }

            .footer ul li a:hover {
                color: #d7d5d5;
            }

        .footer .services ul li {
            color: #c3b7a4;
            padding: 0 0 0 21px;
        }

    .footer .social a {
        display: block;
        color: #b5b5b5;
        padding: 0 0 0 50px;
        margin: 0 0 18px 0;
        height: 30px;
        line-height: 30px;
    }

        .footer .social a:hover {
            color: #d7d5d5;
        }

        .footer .social a[title=Facebook] {
            background: url(../images/facebook.png) no-repeat left center;
        }

        .footer .social a[title=Twitter] {
            background: url(../images/twitter.png) no-repeat left center;
        }

        .footer .social a[title=Linkedin] {
            background: url(../images/linkedin.png) no-repeat left center;
        }

I started by styling the links with no text decoration and text transform set to uppercase. Then I styled header 3 with white text color, font family and size, normal font weight and fixed line height. Notice that I styled the general “.first-child” class with zero top border and the general “.last-child” with zero bottom border, although this can be done with CSS3 but it will not work on Internet Explorer 7 or 8 versions. The paragraph is styled with font family and size, uppercase text, a custom color, a fixed height, a top and bottom border with different colors and zero margins.

The span inside the paragraphs is has a different font family and size, different color, has no text shadow, a floating to the left, a line height equal to paragraphs height to center the text vertically and a right margin. Now the unordered list has zero margins, the list items is styled with no list style, zero margins, custom font family and size, uppercase text, a fixed line height, and a top and bottom border with different colors. The links inside list elements has different color and block display, with a hover different hover state text color. The services list item color is changed to #c3b7a4 with a bottom padding.

Finally, the social links is styled with block display, custom text color, a bottom padding to make space for the background image, a bottom margin for space between links and an equal height and line height values to center text vertically. Now, each social link is styled according to its title text with a convenient background image as an icon.

If you followed this tutorial correctly then you should have a full working HTML/CSS layout from a PSD that looks exactly like this.

Conclusion

So that’s it. In this tutorial you learned how to convert a layout from PSD to a fully working HTML/CSS website, don’t forget to validate and check for browser compatibility (the layout will not validate because of JavaScript & CSS3 styles, remove both to validate properly). If there is a part of this tutorial you didn’t understand, or you have a better technique, feel free to share with everyone by commenting below.

February 25 2011

10:00

Convert Your Product Landing Page From PSD to HTML [Very Detailed]

In this article you will learn how to convert Your Product Landing Page from PSD to HTML in a detailed step-by-step tutorial. You will learn how to create this layout by using a CSS framework, some CSS styles and Javascript. When you’ve completed this tutorial you’ll have a valid HTML/CSS, cross browser compatible and dynamic layout. I hope that you can go through this tutorial and learn a few techniques that will help you in future projects.

Now, let’s get started with this tutorial.

Links you will need to complete this tutorial:

Here’s what we’ll be creating (Click on image to view a full working demo).

You can also download this tutorial’s source files here.

Step 1 – Preparation

If you read the Photoshop tutorial for creating this landing page you probably noticed that 960gs grid system was used to create guidelines. Well, in this tutorial we will also need the 960gs CSS framework. Using CSS frameworks makes layout and style creation a lot easier and saves time in web development. Now you should download the 960 Grid system source files for usage in this tutorial.

You will also need a code editor; you can use a plain text editor such as the Notepad. I always recommend you use a free code editor and get used to it, this helps you get things done faster.

During this tutorial you should test your layout in different browsers, you don’t want to return to the beginning because of browser compatibility issues. In this tutorial I am using some CSS3 styles, but as you might know not all browsers support CSS3 features. The CSS3 styles used in this tutorial have been tested with Firefox version 3.6.

Step 2 – Getting Your Files Ready

First thing you should do is create a directory for your website. I usually create an /images/ directory for images and a /styles/ directory which will hold every style sheet (CSS) file and the slider JavaScript file. The HTML file goes in the root directory.

Now you need to grab the CSS files from the 960gs grid system we downloaded earlier, extract the ZIP file and then copy the CSS files from /code/css/ folder to your /styles/ directory, you should copy 960.css, reset.css and text.css files. You should notice a directory called /uncompressed/ which has the same files but in a bigger and more readable format, I recommend using the compressed CSS files. You also need to create a new file in your root directory called index.html and create another file called style.css in /styles/ directory.

In this tutorial we need to export images from Photoshop to use in our HTML layout. You can export these images yourself if you have the layered PSD file from the original Photoshop tutorial, or you can just grab the source files with this tutorial and you’ll find the images I created.

Step 3 – Simple Starter Layout

We need to start by creating a Simple HTML layout as the basis of our site to be. By looking at the Photoshop Layout you should notice a few things:

  1. The layout has a background image for the body that is repeated horizontally.
  2. The layout has a header which contains a logo, slogan and menu items.
  3. The content of the layout is separated into two columns: the left column contains slider and features, while the right column contains a featured section with two buttons, newsletter sign-up form and about us text.
  4. The bottom section of the layout has two sections a footer with latest news, latest tweets and get connected social icons, and a copyright section with copyright text and links.
  5. Finally, all divisions have a background color and no background image.

You can follow the notes above by looking at this image.

Now, Based on these notes we create the following HTML layout.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>3D BOX</title>
    <link type="text/css" href="styles/reset.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/text.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/960.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/tut_style.css" rel="stylesheet" media="all" />
</head>
<body>
    <div class="header_container">
        <div class="container_12">
            header content goes here.
        </div>
    </div>
    <div class="container_12">
        <div class="left_column grid_6">
            slider and features content goes here.
        </div>
        <div class="right_column grid_6">
            featured, newsletter sign up form and about us content goes here.
        </div>
        <div class="clear"></div>
    </div>
    <div class="footer">
        <div class="container_12">
            footer content goes here.
        </div>
    </div>
    <div class="copyright_links">
        <div class="container_12">
            copyright and links goes here.
        </div>
    </div>
</body>
</html>

Notice in this simple layout that we added four main divisions. A division with class “header_container” containing a division with a class “container_12″ which is already styled in 960.css file and we use it to limit the layout width and center it horizontally in the page. Then a division with class “container_12″ that contains two columns a division with class “left_column grid_6″ and another one with class “right_column grid_6″ and we add the “grid_6″ class name because we want our division to have all the styling required to match the containing division and because both columns has nearly the same width which will be reset in the “left_column” and “right_column” classes to match our required widths. Then we added a division with class “footer” containing a division with class “container_12″. Finally, we added a division with class “copyright_links” containing a division with a class “container_12″. Now let’s add the CSS as follows (all CSS should be added in style.css file):

body {
    color: #403f3f;
    background: #fff url(../images/bg.jpg) repeat-x;
    background-position: center 100px;
    font-size: 12px;
    font-family: Arial;
}

a {
    text-decoration: none;
}

.header_container {
    width: 100%;
    background: #191919;
    height: 100px;
    overflow: hidden;
    margin: 0 0 27px 0;
}

.container_12 .left_column {
    width: 500px;
    margin-right: 5px;
}

.container_12 .right_column {
    width: 404px;
    padding: 0 0 0 26px;
    margin-left: 5px;
}

.footer {
    width: 100%;
    height: 215px;
    background: #282828;
    color: #d9d9d9;
    padding: 28px 0 0 0;
}

.copyright_links {
    width: 100%;
    height: 32px;
    background: #191919;
    color: #9e9e9e;
    line-height: 32px;
    font-size: 11px;
}

In the above CSS code we started by styling the body with color set to #403f3f, background color to #fff, background image to “bg.jpg” horizontally repeating, set background vertical position to 100px to start the background just after the header, font size to 12px and font family to Arial. Then we set all links to have no text decoration. Now we set “header_container” style with 100% width to fill all the browser’s visible area, background color to #191919, a fixed height of 100px, overflow to hidden so that all header extra content is hidden and a bottom margin of 27px. Now we need to reset the left and right column widths and margins, we set left column to have 500px width and 5px right margin, and the right column to have 404px width and 5px left margin with an extra left padding of 26px. Now let’s style the footer division with 100% width, a height of 215px, background color to #282828, text color to #d9d9d9 and a top padding of 28px.

Finally, we style the copyright division with 100% width, a fixed height of 32px, background color to #191919, text color to #9e9e9e, line height to the same as height so that the text is aligned to center vertically and font size to 11px. The result should be the same as the image below.

Step 4 – Adding Logo and Menu Items to Header

Now we need to add the logo and menu items, here’s the HTML for the header section.

    <div class="header_container">
        <div class="container_12">
            <div class="grid_5">
                <h1><a href="#" title="3D BOX">3D BOX</a></h1>
                <div class="slogan">The fastest way to create your box</div>
            </div>
            <div class="grid_7">
                <div class="menu">
                    <a href="#" title="HOME" class="active">HOME</a>
                    <a href="#" title="PRODUCTS">PRODUCTS</a>
                    <a href="#" title="SUPPORT">SUPPORT</a>
                    <a href="#" title="ABOUT">ABOUT</a>
                    <a href="#" title="CONTACT">CONTACT</a>
                </div>
            </div>
        </div>
    </div>

Now, we added two divisions one for the logo with class “grid_5″ and one for the menu items with class “grid_7″. The logo text is added inside <h1> with the slogan added inside a division with class “slogan”. The menu item links are added inside a division with class “menu”. Now lets add the CSS for the header content.

.header_container {
    width: 100%;
    background: #191919;
    height: 100px;
    overflow: hidden;
    margin: 0 0 27px 0;
}

    .header_container h1 {
        display: block;
        margin: 20px 0 0 0;
        line-height: 55px;
        width: 150px;
        height: 55px;
        float: left;
        border-right: 1px solid #414141;
    }

        .header_container h1 a {
            color: #e0cf39;
            font-size: 36px;
        }

    .header_container .slogan {
        display: block;
        float: left;
        color: #fff;
        height: 55px;
        line-height: 55px;
        margin: 20px 0 0 15px;
    }

    .header_container .menu {
        float: right;
        display: block;
    }

    .header_container .menu a {
        color: #9e9e9e;
        display: block;
        float: left;
        height: 100px;
        line-height: 100px;
        padding: 0 18px;
        margin: 0 0 0 5px;
    }

        .header_container .menu a:hover, .header_container .menu a.active {
            background: #282828;
            color: #fff;
            border-top: 4px solid #e0cf39;
            height: 96px;
            line-height: 92px;
        }

I started by styling the <h1> by setting display to block, top margin to 20px, line height to 55px, width to 150px, height to 55px, set floating to left and a right border of 1px with a color of #414141 to represent the vertical separator between the logo and the slogan. Then I styled the logo’s link with the color set to #e0cf39 and font size to 36px. Now we style the slogan by setting display to block, floating to the left, text color to white, a fixed height of 55px,  line height similar to height to center text vertically, top margin of 20px and left margin of 15px.

Let’s style the menu items, we start by styling the menu items container by setting float to right and display to block. Now we style the links normal state for menu items by setting text color to #9e9e9e, display to block, float to left, a fixed height and line height similar to the header height, a left and right padding of 18px and a left margin of 5px. Finally, we style the links hover and active states for the menu items by setting background color to #282828, text color to white, a 4px wide solid top border with a color of #e0cf39, height and line height to 96px to compensate for the 4 pixels taken by the top border. The result should be as the image below.

Step 5 – Adding Slider Content, Style and Javascript

Now, we are going to add the slider and for this I am going to use an already implemented script, which is Slidesjs. I did take the script and modified it to make it suit our layout and now here’s the HTML for the slider content which will be included inside the left column.

        <div class="left_column grid_6">
            <div class="slider">
                <div id="slider">
                    <div class="slides_container">
                        <div>
                            <img src="images/image.jpg" alt="" />
                        </div>
                        <div>
                            <img src="images/image.jpg" alt="" />
                        </div>
                        <div>
                            <img src="images/image.jpg" alt="" />
                        </div>
                        <div>
                            <img src="images/image.jpg" alt="" />
                        </div>
                    </div>
                </div>
            </div>
        </div>

The script is so easy to use and modify that I only needed to add a division with class “slider” that contains another division with an ID “slider” which will be used by the script to make the slider works. Then the slides is simply a division with an image inside, that I added it 4 times inside the division “slides_container”. Now let’s add the CSS style for the slider content and script.

.container_12 .left_column .slider {
    background: url(../images/slider.png) no-repeat bottom center;
    width: 470px;
    height: 286px;
    margin: 0 0 34px 0;
}

    .slides_container {
        width:460px;
        height: 239px;
        display: none;
        border: 5px solid #fff;
    }

        .slides_container div {
            width: 460px;
            height: 239px;
            display: block;
        }

    .pagination {
        list-style: none;
        display: block;
        padding: 0;
        margin: 26px 0 0 216px;
        float: left;
        width: 60px;
    }

    .pagination li {
        float: left;
        margin: 0;
        padding: 0;
    }

    .pagination li a {
        height: 10px;
        width: 10px;
        float: left;
        text-indent: -10000px;
        background: url(../images/slider_bullets.png) no-repeat;
        background-position: -15px center;
        margin: 0 5px 0 0;
    }

    .pagination li a:hover {
        background-position: 0px center;
    }

    .pagination .current a {
        background-position: 0px center;
    }

The slider division is styled with a background image to represent the shadow underneath the slider, a fixed height and width and a bottom margin of 34px. Then I styled the slides container with fixed height and width, display set to none and a 5px solid white border. Now we style the divisions holding the images with fixed height and width and display set to block. Now you notice that there’s a style for something called pagination, and this style is for a content added by the script after the slides to represent the paging navigation for the slides. I styled it so that it is now represented by a background circle image for normal, hover and current states.

Now let’s add the required jQuery script in the header. You can find the script file in this tutorial source file or from the jQuery Scrollable script page. The HTML head section should be like this.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>3D BOX</title>
    <link type="text/css" href="styles/reset.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/text.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/960.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/style.css" rel="stylesheet" media="all" />
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
    <script type="text/javascript" src="styles/slides.min.jquery.js"></script>
</head>

Finally, we need to add the Javascript code that will allow the slider to work on our layout. You should add this script just before the closing tag of the body. Here’s the Javascript.

<script type="text/javascript">
    $(function () {
        $('#slider').slides({
            preload: true
        });
    });
</script>

Now our layout should look like this.

Step 6 – Adding Features Content and Style

We are still adding content inside the left column and now we need to add the features content right after the slider content, here’s the HTML.

<div class="features_item">
    <h3>
        <img src="images/radio.png" alt="" />
        Sed accumsan arcu
    </h3>
    <p>
        Cras auctor pharetra ipsum, et ultrices dui dictum a. Fusce eu erat metus, vitae pellen- tesque nibh. Fusce sagittis tellus a mi pulvi- nar ut cursus metus.
    </p>
</div>
<div class="features_item with_margin">
    <h3>
        <img src="images/disk.png" alt="" />
        Fusce eu erat metus
    </h3>
    <p>
        Cras auctor pharetra ipsum, et ultrices dui dictum a. Fusce eu erat metus, vitae pellen- tesque nibh. Fusce sagittis tellus a mi pulvi- nar ut cursus metus.
    </p>
</div>
<div class="clear"></div>
<div class="features_item">
    <h3>
        <img src="images/usb.png" alt="" />
        Cras auctor pharetra
    </h3>
    <p>
        Cras auctor pharetra ipsum, et ultrices dui dictum a. Fusce eu erat metus, vitae pellen- tesque nibh. Fusce sagittis tellus a mi pulvi- nar ut cursus metus.
    </p>
</div>
<div class="features_item with_margin">
    <h3>
        <img src="images/mail.png" alt="" />
        Lorem ipsum dolor
    </h3>
    <p>
        Cras auctor pharetra ipsum, et ultrices dui dictum a. Fusce eu erat metus, vitae pellen- tesque nibh. Fusce sagittis tellus a mi pulvi- nar ut cursus metus.
    </p>
</div>
<div class="clear"></div>
<div class="features_item">
    <h3>
        <img src="images/link.png" alt="" />
        Nullam pharetra males
    </h3>
    <p>
        Cras auctor pharetra ipsum, et ultrices dui dictum a. Fusce eu erat metus, vitae pellen- tesque nibh. Fusce sagittis tellus a mi pulvi- nar ut cursus metus.
    </p>
</div>
<div class="features_item with_margin">
    <h3>
        <img src="images/under_const.png" alt="" />
        Sed accumsan arcu
    </h3>
    <p>
        Cras auctor pharetra ipsum, et ultrices dui dictum a. Fusce eu erat metus, vitae pellen- tesque nibh. Fusce sagittis tellus a mi pulvi- nar ut cursus metus.
    </p>
</div>

Now if you take a look at the HTML above you will notice that there’s a pattern of two three divisions repeated three times, a division with class “features_item”, a division with class “features_item with_margin” and a final division with class “clear” for clearing floated elements. Every division has an <h3> tag with the icon image inside it, and then a paragraph. Now let’s add the CSS style for the features content.

.container_12 .left_column .features_item {
    width: 240px;
    float: left;
}

    .container_12 .left_column .features_item.with_margin {
        margin-left: 20px;
    }

    .container_12 .left_column .features_item h3 {
        font-size: 14px;
        margin: 0 0 5px 0;
        line-height: 32px;
    }

        .container_12 .left_column .features_item h3 img {
            float: left;
            margin: 0 30px 0 0;
        }

    .container_12 .left_column .features_item p {
        line-height: 30px;
        text-align: justify;
    }

Notice that for the “features_item” class there’s two styles: “.container_12 .left_column .features_item” and “.container_12 .left_column .features_item.with_margin”, the difference between both styles is that one has no margins and the other one has a left margin of 20px. The features item class has a float to left and a fixed width. The header 3 is styled with 14px for font size, 5px bottom margin and line height of 32px. The image inside the header style is set to floating to left and right margin of 30px for the space between the image and the text. Finally, I styled the paragraph with 30px line height and text align is set to justify. Now our layout should look like this.

Step 7 – Adding Featured Content and Style

Now we need to add the featured content with buttons in the right column section. Here’s the HTML for the featured content.

<h2>3D Box Generator</h2>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rutrum neque eu justo sodales cursus. In nisl turpis, placerat rutrum facilisis in, lacinia nec velit. Vestibulum fermentum felis ut nunc ele mentum adipiscing. Duis eu lacus vel ligula vulputate convallis eu vitae mi. Fusce ut facilisis massa.
</p>
<a href="#" title="GET FREE TRIAL" class="free_trial_button">GET FREE TRIAL</a>
<a href="#" title="PURCHASE NOW" class="purchase_now_button">PURCHASE NOW</a>

We added a <h2> tag with a title inside it, a paragraph and then two links which will represent “Purchase Now” and “Get Free Trial” buttons. Now we need to style the featured content, here’s the CSS styles.

.container_12 .right_column h2 {
    font-size: 24px;
    font-weight: normal;
    margin: 0 0 18px 0;
}

.container_12 .right_column p {
    line-height: 24px;
    margin: 0 0 40px 0;
}

.container_12 .right_column .free_trial_button {
    background: url(../images/buttons_form_bg.png) no-repeat;
    background-position: -26px 0px;
    height: 56px;
    width: 160px;
    float: left;
    text-indent: -10000px;
    margin: 0 20px 0 0;
}

.container_12 .right_column .purchase_now_button {
    background: url(../images/buttons_form_bg.png) no-repeat;
    background-position: -206px 0px;
    height: 56px;
    width: 160px;
    float: left;
    text-indent: -10000px;
}

The style for header 2 is set to have font size of 24px, normal font weight and a bottom margin of 18px. The paragraph is styled to have 24px for line height and 40px as bottom margin. Now, we’ll style the buttons which have almost the same style, but with the free trial button having a right margin and different background position as we are using a CSS technique called CSS Sprites which allows us to choose what to show from a single image using CSS background position properties. The buttons classes style is set with background image that has no repeat, background position, a fixed height and width, floating to left and a text indent set to -10000px which allows the text to be available in the HTML but it is hidden when viewed in browsers and this has some SEO benefits. The result should be as the image below.

Step 8 – Adding Newsletter Sign Up Form HTML and CSS

Now let’s add the HTML for the Newsletter sign up form.

<div class="newsletter">
    <a href="#" title="Sign Up For FREE!" class="sign_up">Sign Up For FREE!</a>
    <div class="clear"></div>
    <input type="text" class="name" />
    <input type="text" class="email" />
    <p>
        Nullam fringilla egestas turpis ac viverra. Ut turpis eros, sus- cipit sit amet dapibus eget, interdum eget ante. Duis cursus metus molestie lectus cursus non blandit velit sagittis. Donec posuere mattis leo in interdum. Aliquam sollicitudin, nulla eget ullamcorper iaculis, felis magna posuere tortor, quis euismod enim lectus ac leo.
    </p>
</div>

I added a division with class “newsletter” which will act as a container for form elements, inside it I added a link for the “Sign Up For FREE” then two text inputs for name and email and finally a paragraph. Now let’s add the CSS style for the newsletter sign up form.

.container_12 .right_column .newsletter {
    background: url(../images/buttons_form_bg.png) no-repeat;
    background-position: 0px -63px;
    height: 384px;
    width: 403px;
    padding: 0 0 0 25px;
    margin: 0 0 29px -25px;
    clear: both;
}

    .container_12 .right_column .newsletter a {
        width: 188px;
        height: 40px;
        float: right;
        text-indent: -10000px;
        margin: 26px 15px 10px 0;
    }

    .container_12 .right_column .newsletter input[type=text] {
        width: 305px;
        height: 20px;
        line-height: 20px;
        background: transparent;
        border: 0px none;
    }

        .container_12 .right_column .newsletter input[type=text].name {
            margin-bottom: 14px;
            margin-left: 82px;
        }

        .container_12 .right_column .newsletter input[type=text].email {
            margin-left: 86px;
        }

    .container_12 .right_column .newsletter p {
        font-family: Georgia;
        line-height: 30px;
        text-align: justify;
        margin: 40px 14px 0 18px;
    }

If you look at the full layout image you’ll probably notice that the sign up form’s background image is not aligned with the content and in order to do this we are going to use negative margins which will allow us to expand the sign up form background image as we like. We styled the newsletter division with a background image, background position, a fixed height and width, positive left padding equal to the negative left margin, bottom margin and clear set to both to clear all floated elements. Now we set the “Sign Up For FREE” link style with fixed width and height, floating to right, negative text indentation to hide the text and some top, right and bottom margins. Let’s style the the text input general style with fixed height and width, line height to a value equal to height to center text vertically, background set to transparent and with no border. for the name and email text inputs style I added some margins to place them right where we need. Finally, I styled the paragraph with font family to Georgia, line height to 30px, text align to justify, top margin to 40px, right margin to 14px and left margin to 18px. The result should be as the image below.

Step 9 – Adding About Us Content and Style

Now let’s add the HTML for About Us content.

<h3>About Us</h3>
<p class="about_us">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed accumsan arcu in massa tempor sed pulvinar leo consectetur. Fusce tempor porta cursus. Nullam pharetra malesuada neque eu volutpat. Cras auctor phar- etra ipsum, et ultrices dui dictum a. U erat metus, nibh massa.
</p>

I added a <h3> tag then paragraph with some text, now let’s add the CSS style for About Us content.

.container_12 .right_column h3 {
    font-size: 14px;
    line-height: 28px;
    border-bottom: 1px dotted #666;
    margin: 0 0 5px 0;
}

.container_12 .right_column p.about_us {
    line-height: 30px;
    text-align: justify;
}

I styled the header 3 with font size set to 14px, line height to 28px, 1px dotted border with color set to #666 and a bottom margin of 5px. Finally, I styled the paragraph with class “about_us” to have 30px for line height and text alignment to justify. The result should be as the image below.

Step 10 – Adding Footer Content and Style

Let’s add the HTML for the footer content.

<div class="footer">
    <div class="container_12">
        <div class="grid_4">
            <h3>Latest News</h3>
            <p>
                Nullam mollis arcu sodales mauris interdum ac rhoncus
mi imperdiet.
            </p>
            <p>
                Donec aliquam scelerisque est, a sagittis odio vehicula
Ut facilisis cursus mi.
            </p>
        </div>
        <div class="grid_4">
            <h3>Recent Tweets</h3>
            <p>
                Nullam mollis arcu sodales mauris interdum ac rhoncus
mi imperdiet. <span>12 minutes ago</span>
            </p>
            <p>
                Donec aliquam scelerisque est, a sagittis odio vehicula
Ut facilisis cursus mi. <span>12 minutes ago</span>
            </p>
        </div>
        <div class="grid_4">
            <h3>Get Connected</h3>
            <p class="connected">
                Nullam mollis arcu sodales mauris interdum ac rhoncus
mi imperdiet.
            </p>
            <a href="#"><img src="images/facebook.png" alt="" /></a>
            <a href="#"><img src="images/twitter.png" alt="" /></a>
            <a href="#"><img src="images/contact.png" alt="" /></a>
        </div>
    </div>
</div>

I used three divisions with class “grid_4″ which will divide the footer into three equal sections, the first one has an <h3> tag with two paragraphs. The second one is the same as the first with the exception of a span inside the paragraph and the final division with an <h3> tag, a paragraph and the social icons links and images. Now, let’s add the CSS style for the footer content.

.footer .container_12 h3 {
    color: #fff;
    font-size: 18px;
    font-weight: normal;
    margin: 0 0 20px 0;
}

.footer .container_12 p {
    text-align: justify;
    line-height: 18px;
    border-bottom: 1px dotted #666;
    margin: 0 0 10px 0;
    padding: 0 0 10px 0;
}

.footer .container_12 p.connected {
    border: 0px none;
}

    .footer .container_12 p span {
        color: #e0cf39;
        font-size: 10px;
    }

.footer .container_12 a {
    margin: 0 8px 0 0;
}

I styled the header 3 with white font color, font size set to 18px, normal font weight and a bottom margin. I styled the paragraph style with justified text alignment, line height set to 18px, 1px dotted bottom border with color set to #666, a bottom margin and a bottom padding. Then I styled the “connected” paragraph with no border and the span inside the paragraphs with color set to #e0cf39 and font size set to 10px. and then I styled the links to have a right margin. The result should be as the image below.

Step 11 – Adding Copyright Content and Style

Let’s add the HTML content for the Copyright text and links.

<div class="copyright_links">
    <div class="container_12">
        <div class="grid_4">
            Copyright 2010 3D BOX, All Rights Reserved.
        </div>
        <div class="grid_8">
            <a href="#" title="Home" class="active">Home</a>
            <a href="#" title="Privacy Policy">Privacy Policy</a>
            <a href="#" title="Terms">Terms</a>
            <a href="#" title="Help">Help</a>
            <a href="#" title="Contact">Contact</a>
        </div>
    </div>
</div>

I added two divisions with class “grid_4″ for copyright text and “grid_8″ for the links. Now let’s add the CSS style.

.copyright_links .container_12 .grid_4 {
    text-align: left;
}

.copyright_links .container_12 .grid_8 {
    text-align: right;
}

.copyright_links .container_12 .grid_8 a {
    color: #9e9e9e;
    margin: 0 0 0 15px;
}

First I set “grid_4″ text alignment to left and “grid_8″ to right, and then I styled the links with color set to #9e9e9e and a left margin of 15px.

If you followed this tutorial correctly then you should have a full working HTML/CSS layout from a PSD that looks exactly like this.

Conclusion

So that’s it. In this tutorial you learned how to convert a layout from PSD to a fully working HTML/CSS website, don’t forget to validate and check for browser compatibility (the layout will not validate because of Javascript & CSS3 styles, remove both to validate properly). If there was a part of this tutorial you didn’t understand, or you have a better technique, please be kind and say something in the comments below.

January 21 2011

10:00

Convert 1stDelicious Portfolio Layout From PSD to HTML [Very Detailed]

In this article you will learn how to convert 1stDelicious: A Simple Clean Portfolio Layout from PSD to HTML in a detailed step by step tutorial. You will learn how to create this layout by using a CSS framework, CSS Sprites and CSS3 into a valid HTML/CSS and cross browser compatible layout. I hope that you can go through this tutorial and learn a few techniques that will help you in future projects.

Now, let’s get started with this tutorial.

Links you will need to complete this tutorial:

Here’s what we’ll be creating (Click on image to view a full working demo).

You can also download this tutorial source files from here.

Step 1 – Preparation

If you read the Photoshop tutorial for creating this layout you probably noticed that 960gs grid system was used for guidelines creation. Well, in this tutorial we will also need the 960gs grid system as a CSS framework. Using CSS frameworks makes layout and styles creation a lot easier and saves time in web development. Now you should download the 960 Grid system source files for usage in this tutorial.

You will also need a good code editor of your choice; you can use a plain text editor such as the Notepad. I always recommend you use a free code editor and get used to it, this helps you get things done faster.

Now in the process of creating this tutorial you should test your layout in different browsers, you don’t want to return to the beginning because of browser compatibility issues. In this tutorial I am using some CSS3 styles but as you might know not all browsers support CSS3 features. The results shown in this tutorial will be from Firefox version 3.6 which supports all CSS3 styles used in this tutorial.

Step 2 – Getting Your Files Ready

First thing you should do is to create a directory structure to build our layout in. I usually create an /images/ directory to put every image in it and a /styles/ directory which will hold every style sheet (CSS) file. The HTML file goes in the root directory.

Now you need to grab the CSS files from the 960gs grid system we downloaded earlier, extract the ZIP file and then copy the CSS files from /code/css/ folder to your /styles/ directory, you should copy 960.css, reset.css and text.css files. You should notice a directory called /uncompressed/ which has the same files but in a bigger and more readable format, I recommend using the compressed CSS files. You also need to create a new file in your root directory called index.html and create another file called style.css in /styles/ directory.

In this tutorial we need to export images from Photoshop to use it in our HTML layout. You can export these images yourself if you have the layered PSD file from the original Photoshop tutorial, or you can just grab the source file’s with this tutorial and you’ll find the images I created.

Step 3 – Simple Earlier Layout

We need to start by creating a Simple HTML layout to hold all the pieces together. By looking on the Photoshop Layout you should notice a few things:

  1. You’ll notice that the layout has four sections: Header(with logo and menu), Featured Project, Content and Footer section.
  2. We have a background image for the Header and Featured Project sections which repeats horizontally, and another background image for the Footer section that also repeats horizontally.
  3. Now notice that all sections: Header, Featured and Footer has a fixed height and the content section height isn’t fixed.
  4. Finally, you’ll notice that the Featured section has different overlay background.

Based on these points we create the following HTML layout.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Portfolio Layout</title>
    <link type="text/css" href="styles/reset.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/text.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/960.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/style.css" rel="stylesheet" media="all" />
</head>
<body>
    <div class="header_container container_12">
        Header Content Goes Here.
    </div>
    <div class="featured_container">
        <div class="container_12">
            Featured Project Goes Here.
        </div>
    </div>
    <div class="content_container container_12">
        Main Contect Goes Here.
    </div>
    <div class="footer_container">
        Footer Content Goes Here.
    </div>
</body>
</html>

As you can see in this layout we added links for the CSS files in the header, created four main <div> sections each with a unique class name for styling later, you’ll notice that both “header_container” and “content_container” class argument includes also “container_12″ because both need to have the same style as “container_12″ implemented in the 960gs framework. There’s also a <div> section with a class attribute “container_12″ inside “featured_container” and we separated it from the main <div> so it can hold the overlay background. Now the repeating background image for the header and featured section is going to be styled in the body. Now let’s add the CSS as follows (all CSS should be added in style.css file):

body {
    color: #1d1d1d;
    background: #fff url(../images/bg.png) repeat-x top center;
    font-size: 12px;
    font-family: Arial;
}

a {
    color: #0cb0ca;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.header_container {
    height: 100px;
    overflow: hidden;
}

.featured_container {
    height: 454px;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
}

    .featured_container .container_12 {
        background: url(../images/featured_bg.png) no-repeat top center;
        height: 454px;
    }

.content_container {
    color: #1d1d1d;
    line-height: 24px;
    padding: 38px 0 60px 0;
}

.footer_container {
    background: #000 url(../images/footer_bg.png) repeat-x top center;
    height: 234px;
    width: 100%;
    display: block;
    overflow: hidden;
    color: #fff;
}

Let’s see what we have here, we set the whole page font color to dark gray “#1d1d1d” and set the background color to white “#fff” with a horizontally repeating image “bg.png”. We also set the default font family and size then styled the links color to “#0cb0ca” with no text decoration and a hover state with an underline text decoration. Next we styled the “header_container” with a fixed height of 100px and set overflow to hidden. Now let’s look at “featured_container” style, a fixed height of 454px, hidden overflow, white font color and a font size of 14px. then we added the overlay background image “featured_bg.png” to “container_12″ with no repeat and aligned to center top. We then added the style for “content_container” with 24px line height (which controls the space between lines of text), a 38px top padding and a 60px bottom padding to keep the space between featured, footer section and content section.

Finally, we style “footer_container” with a horizontally repeating background image “footer_bg.png”, a fixed height, a 100% width to fill the browser visible area horizontally, set display to block, overflow to hidden and set font color to white.  The result should be as the image below.

Step 4 – Adding Logo and Menu to Header

Now let’s add the logo and the menu items in the header section. Here’s the HTML for the “header_container”.

    <div class="header_container container_12">
        <div class="grid_5">
            <h1><a href="#" title="Home">FirstWebDesigner</a></h1>
        </div>
        <div class="grid_7">
            <div class="menu_items">
                <a href="#" title="home page" class="home active">Home</a>
                <a href="#" title="things I've done" class="portfolio">Portfolio</a>
                <a href="#" title="all about me" class="about">About Me</a>
                <a href="#" title="get in touch" class="contact">Contact Me</a>
            </div>
        </div>
    </div>

Here I used a “grid_5″ class to hold the logo and a “grid_7″ to hold the menu items. I added an <h1> element with a link inside it that will represent the logo and a link to home page. I also added a <div> element to hold menu items with simple links, the only thing different here is that each link has a special class name which we will use to set the style of each item. You will also notice that the home link has an added class “active” which will hold the style for the active state of the link.

Now let’s add the style for the header content.

.header_container .grid_5 {
    padding: 36px 0 0 0;
}

    .header_container .grid_5 a {
        display: block;
        text-indent: -9999px;
        height: 61px;
        width: 280px;
        background: url(../images/logo.png) no-repeat;
        float: left;
    }

.header_container .grid_7 .menu_items {
    float: right;
}

    .header_container .grid_7 a {
        display: block;
        text-indent: -9999px;
        height: 100px;
        background: url(../images/menu_items.png) no-repeat;
        float: left;
        margin: 0 40px 0 0;
    }

        .header_container .grid_7 a.home {
            width: 62px;
        }

            .header_container .grid_7 a.home:hover,
            .header_container .grid_7 a.home.active {
                background-position: 0px -100px;
            }

        .header_container .grid_7 a.portfolio {
            width: 94px;
            background-position: -100px 0px;
        }

            .header_container .grid_7 a.portfolio:hover,
            .header_container .grid_7 a.portfolio.active {
                background-position: -100px -100px;
            }

        .header_container .grid_7 a.about {
            width: 75px;
            background-position: -240px 0px;
        }

            .header_container .grid_7 a.about:hover,
            .header_container .grid_7 a.about.active {
                background-position: -240px -100px;
            }

        .header_container .grid_7 a.contact {
            width: 94px;
            background-position: -355px 0px;
        }

            .header_container .grid_7 a.contact:hover,
            .header_container .grid_7 a.contact.active {
                background-position: -355px -100px;
            }

To style the logo I added top padding of 36px to “grid_5″ style holding the heading and the link of the logo, then I styled the link with block display, fixed height and width, a background image “logo.png”, a float to the left and a value of -9999px to text indent and this value is set to make the link text invisible when you view it in browsers and it also has SEO benefits.

Now let’s style the menu items, to style the menu items I used a technique called CSS Sprites which allows all the menu item images to be in a single image and then we choose what to show using CSS background position properties. Now all normal state and hover state images are available in “menu_items.png”, now I set the style for “menu_items” to float to the right so that all menu items stay on the right side of the header and then set the “a” links style to display block, a fixed height, set background image to “menu_items.png”, a right margin to make a space between menu items and a -9999px text indent to hide link text. Now I add a style for each menu item class and for its hover and active states. Finally, I set respective width and background position to show the part I want from the Sprite image. The result should be as the image below.

Step 5 – Adding Featured Project Content

Now let’s add the HTML for the Featured Project section.

<div class="featured_container">
    <div class="container_12">
        <div class="grid_12">
            <div class="current_project">
                <h2>
                    Duis ullamcorper, metus a dapibus euismod, velit enim varius mi, tristique diam.
                </h2>
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum, magna id aliquam aliquet, nulla turpis tempus metus, vitae sollicitudin nisl nunc ut neque. Ut at felis a neque sollicitudin egestas.
                </p>
                <a href="#" title="read more">READ MORE</a>
                <a href="#" title="my portfolio">MY PORTFOLIO</a>
            </div>
        </div>
        <div class="grid_8">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sed erat ut sapien laoreet venenatis suscipit non neque. Sed mollis sagittis lobortis. - <span class="name">John Doe</span>
            </p>
        </div>
        <div class="grid_4">
            <a href="#" title="Hire Me">Project On Your Mind? Hire Me</a>
        </div>
    </div>
</div>

Now let’s see what we added, I added a <div> with a “grid_12″ class which will take the full width and hold project title, description and buttons. Then added two more div elements with “grid_8″ and “grid_4″ which holds the content for customer testimonials. Now let’s add the CSS style for Featured Project Content, here’s the CSS.

.featured_container .container_12 .grid_12 .current_project {
    width: 470px;
    height: 300px;
    overflow: hidden;
    padding: 78px 0 0 0;
}

    .featured_container .container_12 .grid_12 .current_project h2 {
        font-family: Georgia;
        font-size: 30px;
        font-weight: normal;
        line-height: 24px;
    }

    .featured_container .container_12 .grid_12 .current_project p {
        line-height: 24px;
        width: 450px;
        margin: 0 0 50px 0;
    }

    .featured_container .container_12 .grid_12 .current_project a {
        color: #1d1d1d;
        float: left;
        width: 150px;
        height: 38px;
        text-align: center;
        font-weight: bold;
        line-height: 38px;
        border: 5px solid #a3a4a4;
        background: #fff;
        margin: 0 10px 0 0;
        -moz-border-radius: 14px;
        border-radius: 14px;
        text-shadow: 1px 1px 0px #ffffff;
        filter: dropshadow(color=#ffffff, offx=0, offy=1);
        background: -moz-linear-gradient(top, #FFFFFF 0%, #DCDCDC 100%); /* firefox */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#DCDCDC)); /* webkit */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#DCDCDC',GradientType=0 ); /* ie */
    }

        .featured_container .container_12 .grid_12 .current_project a:hover {
            background: -moz-linear-gradient(top, #DCDCDC 0%, #FFFFFF 100%); /* firefox */
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#DCDCDC), color-stop(100%,#FFFFFF)); /* webkit */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DCDCDC', endColorstr='#FFFFFF',GradientType=0 ); /* ie */
        }

.featured_container .container_12 .grid_8 p {
    font-size: 12px;
    height: 76px;
    margin: 0;
    padding: 10px 0 0 30px;
    line-height: 24px;
}

    .featured_container .container_12 .grid_8 p span.name {
        font-style: italic;
        color: #0cb0ca;
    }

.featured_container .container_12 .grid_4 a {
    color: #1d1d1d;
    float: right;
    width: 235px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border: 4px solid #141a20;
    background: #fff;
    margin: 15px 0 0 0;
    -moz-border-radius: 12px;
    border-radius: 14px;
    text-shadow: 1px 1px 0px #ffffff;
    filter: dropshadow(color=#ffffff, offx=0, offy=1);
    background: -moz-linear-gradient(top, #FFFFFF 0%, #DCDCDC 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#FFFFFF), color-stop(100%,#DCDCDC)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#DCDCDC',GradientType=0 ); /* ie */
}

    .featured_container .container_12 .grid_4 a:hover {
        background: -moz-linear-gradient(top, #DCDCDC 0%, #FFFFFF 100%); /* firefox */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#DCDCDC), color-stop(100%,#FFFFFF)); /* webkit */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#DCDCDC', endColorstr='#FFFFFF',GradientType=0 ); /* ie */
    }

First I styled “current_project” with a fixed height and width, hidden overflow and a top padding of 78px to make a space between header and featured content, then I set the header 2 style with a Georgia as font, 30px font size a normal font weight and 24px line height. Now I set the paragraph style with line height, fixed width and a bottom margin.

Now to style both “READ MORE” and “MY PORTFOLIO” buttons I used CSS3 features which gives you the same results you have in Photoshop without using images. There are two sections here, one for normal button state “.featured_container .container_12 .grid_12 .current_project a” and the other for hover state “.featured_container .container_12 .grid_12 .current_project a:hover”, for normal state style I set text color to “#1d1d1d” to override the default color of links, float to left, fixed width and height, text align to center, bold font weight and a line height similar to height for the text to center align vertically, a 5px border with a border radius of 14px, a right margin to make a space between both buttons, set “text-shadow” property which allows the text to have a shadow to 1px horizontal and vertical length and 0px to blur radius and a white shadow color, and then set the button to have a gradient effect for the background.

I recommend this tool CSS Gradient Generator which I use to generate gradient background effect easily. Now for the hover effect, we will change only the gradient effect using the gradient generator.

You’ll notice that I styled the paragraph element in customer testimonial section to have a smaller font size, fixed height, zero margins, a top and left padding and a bigger line height, then I styled the span element which contains the name to be italic and have “#0cb0ca” as text color. Finally I styled the “Project On Your Mind? Hire Me” button the same way I did on the previous buttons with a few values changed. Now our layout should look like this.

Step 6 – Adding Main Content

Now let’s add the Main Content, as you’ll notice from the design, the main content is divided into three sections which are equal in width so we are going to use three <div> elements with a class attribute “grid_4″. Here’s the HTML for the main content.

<div class="content_container container_12">
    <div class="grid_4">
        <h2>
            <img src="images/whatido.png" alt="What I do" />
            What I Do?
            <br />
            <span>Aenean ullamcorper euismod</span>
        </h2>
        <p>
            Pellentesque rhoncus enim at arcu bibendum ac aliquam lectus semper. Integer nibh eros, porta eget dapibus vitae, vestibulum ac leo. Nulla facilisi. Etiam pretium, libero sit amet gravida hendrerit, tortor risus lacinia odio, mattis venenatis felis massa nec eros.
        </p>
        <ul>
            <li>Pellentesque</li>
            <li>Mauris ac tincidunt</li>
            <li>Cras elementum</li>
            <li>Pellentesque</li>
            <li>Mauris ac tincidunt	</li>
        </ul>
        <ul>
            <li>Pellentesque</li>
            <li>Mauris ac tincidunt</li>
            <li>Cras elementum</li>
            <li>Pellentesque</li>
            <li>Mauris ac tincidunt	</li>
        </ul>
    </div>
    <div class="grid_4">
        <h2>
            <img src="images/myportfolio.png" alt="My Portfolio" />
            My Portfolio
            <br />
            <span>Aenean ullamcorper euismod</span>
        </h2>
        <p>
            Pellentesque rhoncus enim at arcu bibendum ac aliquam lectus semper. Integer nibh eros, porta eget dapibus vitae, vestibulum ac leo.
        </p>
        <img src="images/image.png" alt="" />
    </div>
    <div class="grid_4">
        <h2>
            <img src="images/isocialize.png" alt="I Socialize" />
            I Socialize
            <br />
            <span>Aenean ullamcorper euismod</span>
        </h2>
        <p>
            Pellentesque rhoncus enim at arcu bibendum ac aliquam lectus semper. Integer nibh eros, porta eget dapibus vitae, vestibulum ac leo.
        </p>
        <div class="social_icons">
            <a href="#" title="Twitter"><img src="images/twitter.png" alt="Twitter" />Twitter</a>
            <a href="#" title="Twitter"><img src="images/flickr.png" alt="Flickr Group" />Flickr Group</a>
            <a href="#" title="Twitter"><img src="images/digg.png" alt="Digg" />Digg</a>
            <a href="#" title="Twitter"><img src="images/rss.png" alt="RSS Subscribe" />RSS Subscribe</a>
            <a href="#" title="Twitter"><img src="images/skype.png" alt="Skype" />Skype</a>
            <div class="clear"></div>
        </div>
    </div>
    <div class="clear"></div>
</div>

Notice that the header section contains an image, a normal text and a text inside a span element. You should either export the icons from the PSD file or just use the one’s included in source files. All we have to do now is add a little CSS styles. Here’s the CSS for the main content section.

.content_container {
    line-height: 24px;
    padding: 38px 0 60px 0;
}

    .content_container .grid_4 h2 {
        font-family: Georgia;
        font-size: 24px;
        line-height: 18px;
        font-weight: normal;
    }

        .content_container .grid_4 h2 img {
            float: left;
            margin: -8px 15px 0 0;
        }

        .content_container .grid_4 h2 span {
            font-family: Verdana;
            font-size: 14px;
        }

    .content_container .grid_4 p {
        text-align: justify;
        margin: 0 0 42px 0;
    }

    .content_container .grid_4 ul {
        float: left;
    }

        .content_container .grid_4 ul li {
            list-style-type: none;
            margin: 0 40px 0 0;
        }

            .content_container .grid_4 ul li:before {
                content: "- ";
            }

        .content_container .grid_4 .social_icons a {
            display: block;
            text-decoration: none;
            line-height: 26px;
            height: 26px;
            width: 150px;
            float: left;
            margin: 0 0 35px 0;
        }

            .content_container .grid_4 .social_icons a:hover {
                text-decoration: underline;
            }

            .content_container .grid_4 .social_icons a img {
                float: left;
                margin: 0 25px 0 0;
            }

First we set h2 style to have Georgia for font, fixed font size and line height with no normal weight. Then we style the image in the header (icon) with left floating, a positive right margin and a negative top margin to make the image align similar to the original design. Now we style the span to have a different font family and a smaller font size. We then style the paragraph with a text align of justify and a bottom margin. Now we style the unordered list items in the left content section, first we style ul element to float to left and then we style li element with no list type and a right margin 40px. Now you should notice that when we used “list-style-type: none” the list items has no bullets of any kind but in the original design we have a dash character “-” as a bullet, because the dash isn’t supported as list item bullet character we are going to insert it before each list item text using “.content_container .grid_4 ul li:before” and “content: “- “”.

Finally, we style the social icons in the right content section by styling the link normal and hover states along with a style for the icon image. Now our layout should look like this.

Step 7 – Adding Footer Content

The footer section has three equal in width sections so we will also use “gird_4″. The copyright text needs to be at the bottom of  the footer, center aligned so we are going to use a <div> with a class “container_12 copyright” with a <div> inside it with a class “grid_12″ to fill the whole container. Now here’s the HTML for the footer content.

<div class="footer_container">
    <div class="container_12">
        <div class="grid_4">
            <h3>Quick Links</h3>
            <ul>
                <li><a href="#">About Me</a></li>
                <li><a href="#">Portfolio</a></li>
                <li><a href="#">Project Pricing</a></li>
                <li><a href="#">Mauris ac tincidunt</a></li>
            </ul>
        </div>
        <div class="grid_4">
            <h3>Latest From Blog</h3>
            <ul>
                <li><a href="#">Sed mi sem, tempor sed ullamcorper</a></li>
                <li><a href="#">Lorem ipsum dolor sit amet</a></li>
                <li><a href="#">Etiam pharetra gravida scelerisque</a></li>
            </ul>
        </div>
        <div class="grid_4 contact_details">
            <h3>Contact Me</h3>
            <p>
                Sed mi sem, tempor sed ullamcorper ac, tempor
Integer at urna diam, Duis ornare viverra.
            </p>
            <a href="#" title="burns.michaeljohn@gmail.com"><img src="images/email.png" alt="Email" />burns.michaeljohn@gmail.com</a>
            <a href="#" title="RSS Feed Subscribe"><img src="images/rss.png" alt="RSS Feed Subscribe" />RSS Feed Subscribe</a>
        </div>
        <div class="clear"></div>
    </div>
    <div class="container_12 copyright">
        <div class="grid_12">
            Copyright 2010 <a href="http://www.1stwebdesigner.com" title="1stwebdesigner">1stwebdesigner</a>, All Rights Reserved
        </div>
        <div class="clear"></div>
    </div>
</div>

Now let’s style the footer content. Here’s the CSS for the footer content.

.footer_container {
    background: #000 url(../images/footer_bg.png) repeat-x top center;
    height: 234px;
    width: 100%;
    display: block;
    overflow: hidden;
    color: #fff;
}

    .footer_container .container_12 {
        padding: 20px 0 0 0;
    }

    .footer_container .container_12 .grid_4 h3 {
        font-family: Georgia;
        font-size: 18px;
        line-height: 12px;
        font-weight: normal;
    }

        .footer_container .container_12 .grid_4 ul li {
            list-style-type: none;
            margin: 0 0 0 35px;
            padding: 0 30px 0 0;
            height: 29px;
            line-height: 29px;
            border-bottom: 1px solid #47535d;
        }

    .footer_container .container_12 .contact_details p {
        margin: 0 0 15px 0;
    }

    .footer_container .container_12 .contact_details a {
        display: block;
        clear: both;
        height: 28px;
        line-height: 28px;
        font-style: italic;
    }

        .footer_container .container_12 .contact_details a img {
            float: left;
            margin: 0 10px 12px 0;
        }

        .footer_container .container_12.copyright {
            padding: 0;
        }

        .footer_container .container_12 .grid_12 {
            text-align: center;
            font-size: 11px;
            line-height: 40px;
            height: 40px;
        }

Notice that we set the top margin for “container_12″ to 20px which will make the upper space between the footer and the main content. Then we styled header 3 with Georgia font, 18px font size, 12px line height and a normal font weight. We styled list elements with no list type (no bullet), a similar line height and list height to center text vertically, a bottom border of 1px, a left margin and a right padding. Then we style the paragraphs, links and contact details icons. Finally, we set copyright section with no padding and align “grid_12″ text to center with small font size and equal line height and height values.

Now if you followed this tutorial correctly then you should have a full working HTML/CSS layout from a PSD one that looks exactly like this.

Conclusion

In this tutorial you learned how to convert a layout from PSD to HTML/CSS using CSS sprites and CSS3 techniques. Don’t forget to validate and check browser compatibility, of course all CSS3 styles won’t validate so make sure to remove all CSS3 styles before validating. Now if you think that anything is not clear to you or you have a better technique to create something, please be kind and say something in the comments.

January 20 2011

05:53

Build a Sleek, Dark Mobile App Website: New Premium Tutorial


Not long ago, on Webdesigntuts+, we demonstrated how to design a sleek mobile app website interface in Photoshop. Today, in this Premium tutorial, we’ll turn that design into a working website.

Become a Premium member to read this tutorial, as well as the hundreds upon hundreds of other advanced tutorials and screencasts from across the Tuts+ network.

Example
Example
Example

Join Net Premium

NETTUTS+ Screencasts and Bonus Tutorials

For those unfamiliar, the family of Tuts+ sites runs a premium membership service. For $9 per month, you gain access to exclusive premium tutorials, screencasts, and freebies from Nettuts+, Psdtuts+, Phototuts+, Aetuts+, Audiotuts+, Vectortuts+, and CgTuts+ For the price of a pizza, you’ll learn from some of the best minds in the business. Become a Premium member to read this tutorial, as well as hundreds of other advanced tutorials and screencasts.

January 11 2011

10:00

Convert a 3D Portfolio Dark Layout From PSD to HTML [Very Detailed]

In this article you will learn how to convert a 3D Portfolio Dark Layout from PSD to HTML in a detailed step by step tutorial. You will learn how to create this layout by using a CSS framework, some CSS styles and Javascript into a valid HTML/CSS, cross browser compatible and dynamic layout. I hope that you can go through this tutorial and learn a few techniques that will help you in future projects.

Now, let’s get started with this tutorial.

Links you will need to complete this tutorial:

Here’s what we’ll be creating (Click on image to view a full working demo).

Full Tutorial Demo

You can also download this tutorial source files from here.

Step 1 – Preparation

If you read the Photoshop tutorial for creating this layout you probably noticed that 960gs grid system was used for guidelines creation. Well, in this tutorial we will also need the 960gs grid system as a CSS framework. Using CSS frameworks makes layout and styles creation a lot easier and saves time in web development. Now you should download the 960 Grid system source files for usage in this tutorial.

You will also need a good code editor of your choice; you can use a plain text editor such as the Notepad. I always recommend you use a free code editor and get used to it, this helps you get things done faster.

Now in the process of creating this tutorial you should test your layout in different browsers, you don’t want to return to the beginning because of browser compatibility issues. In this tutorial I am using some CSS3 styles but as you might know not all browsers support CSS3 features. The results shown in this tutorial will be from Firefox version 3.6 which supports all CSS3 styles used in this tutorial.

Step 2 – Getting Your Files Ready

First thing you should do is create a directory structure to build our layout in. I usually create an /images/ directory to put every image in it and a /styles/ directory which will hold every style sheet (CSS) file. The HTML file goes in the root directory.

Now you need to grab the CSS files from the 960gs grid system we downloaded earlier, extract the ZIP file and then copy the CSS files from /code/css/ folder to your /styles/ directory, you should copy 960.css, reset.css and text.css files. You should notice a directory called /uncompressed/ which has the same files but in a bigger and more readable format, I recommend using the compressed CSS files. You also need to create a new file in your root directory called index.html and create another file called style.css in /styles/ directory.

In this tutorial we need to export images from Photoshop to use it in our HTML layout. You can export these images yourself if you have the layered PSD file from the original Photoshop tutorial, or you can just grab the source file’s with this tutorial and you’ll find the images I created.

Step 3 – Simple Earlier Layout

We need to start by creating a Simple HTML layout to hold all the pieces together. By looking on the Photoshop Layout you should notice a few things:

  1. You’ll notice that the layout has four main sections: header, slider, content and footer.
  2. You’ll also notice that all the header, slider and footer sections has a background that repeats itself in a horizontal direction.
  3. The content background repeats itself in both horizontal and vertical direction.
  4. You should also notice that both the slider and content backgrounds has a highlight overlaid.
  5. Finally, you’ll see that the header, slider and footer sections have fixed heights.

Based on these points we create the following HTML layout.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Dark Web Layout</title>
    <link type="text/css" href="styles/reset.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/text.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/960.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/style.css" rel="stylesheet" media="all" />
</head>

<body>
    <div class="header_cotainer">
        <div class="container_12">
            header content goes here.
        </div>
    </div>
    <div class="slider_container">
        <div class="container_12 slider_highlight">
            slider content goes here.
        </div>
    </div>
    <div class="content_container">
        <div class="container_12 content_highlight">
            main content goes here.
        </div>
    </div>
    <div class="footer_container">
        <div class="container_12">
            footer content goes here.
        </div>
    </div>
</body>
</html>

As you can see in this layout we added a links for the CSS files in the header, created four main <div> sections each with a unique class name for styling and added a <div> section inside each main section with class “container_12″ with the exception of the content and the slider we added a class attribute with “container_12″ and a unique highlight class. Each of the four main <div> sections holds the content and which will be 100% in width to cover the whole browser area with a background image. The <div> section with the class name “container_12″ is already styled in 960.css file to center the content and gives it a fixed width of 960px. Now let’s add the CSS as follows (all CSS should be added in style.css file):

body {
    color: #fff;
    background: #000;
    font-size: 12px;
}

a {
    color: #fff;
}

.header_cotainer {
    width: 100%;
    height: 70px;
    display: block;
    background: url(../images/menu_bg.jpg) repeat-x;
    overflow: hidden;
}

.slider_container {
    width: 100%;
    height: 380px;
    display: block;
    background: url(../images/slider_bg.jpg) repeat-x;
    overflow: hidden;
}

    .slider_highlight {
        background: url(../images/slider_highlight.jpg) no-repeat;
        height: 380px;
        display: block;
        background-position: center top;
    }

.content_container {
    width: 100%;
    min-height: 524px;
    display: block;
    background: url(../images/content_bg.jpg) repeat;
}

    .content_highlight {
        background: url(../images/content_highlight.jpg) no-repeat;
        min-height: 524px;
        display: block;
        background-position: center top;
    }

.footer_container {
    width: 100%;
    height: 46px;
    display: block;
    background: url(../images/footer_bg.jpg) repeat-x;
    overflow: hidden;
    color: #bebebe;
}

We are setting the body color to white “#fff” the background color to black “#000” because we a have a dark layout and the font size to 12px. We also change the default link color to white (because the default link color is blue). Then we proceed to style the “header_container” section by setting width to scale to 100% of browser area, a fixed height of 70px, a display value of display so the section will generate a block box, then we set the background to have an image menu_bg.jpg and to repeat this image horizontally and finally we set the overflow to hidden so that any overflow is clipped and the rest of the content will be visible. We style the “slider_container“, content_container and “footer_container” in the same way as we did with the “header_container” but using different background images and different height values to match background images, with the exception of the “content_container” which its minimum height value is set to 524px with the background is repeated horizontally and vertically and the overflow value is removed and the default value of visible will be applied. Now we style every section labeled highlight with a highlight image as a background with no repeat. The result should be as the image below.

Step 4 – Adding Logo, Menu and Search to Header

Now let’s add the logo, menu items and the search text input and search button. The HTML for the “header_container” should be like this.

<div class="header_cotainer">
    <div class="container_12">
        <div class="grid_3">
            <h1 class="logo">1stwebdesigner</h1>
        </div>
        <div class="grid_9">
            <div class="menu_items">
                <a href="#" class="home_link" title="Home">Home</a>
                <a href="#" class="blog_link" title="Blog">Blog</a>
                <a href="#" class="about_link" title="About">About</a>
                <a href="#" class="contact_link" title="Contact">Contact</a>
                <div class="search">
                    <input type="text" name="search" />
                    <input type="submit" name="submit" value="Search" />
                </div>
            </div>
        </div>
    </div>
</div>

You’ll notice that I added two more div elements inside the “container_12” div one has a class value “grid_3” and the other “grid_9“, both class values are already styled in the 960.css file. In the 960gs framework the “container_12” class divide’s the layout in 12 equal sections and if for instance we want to fill 2 sections we use class value “grid_2” this leaves us with only 10 sections to use, so the logo will occupy 3 sections, the menu and the search will occupy the rest which is 9 sections. Now you’ll also notice that I used a title attribute in each menu item’s link which I recommend you do this whenever possible this has SEO benefits.
Now let’s style the HTML layout of the header with a some CSS.

h1.logo {
    background: url(../images/logo.jpg) no-repeat;
    display: block;
    width: 300px;
    height: 70px;
    text-indent: -9999px;
}

.menu_items {
    float: right;
}

    .menu_items a {
        display: block;
        text-indent: -9999px;
        width: 96px;
        height: 36px;
        margin: 17px 12px 0 0;
        float: left;
    }

    a.home_link {
        background: url(../images/home.jpg) no-repeat;
    }

    a.home_link:hover {
        background: url(../images/home_h.jpg) no-repeat;
    }

    a.blog_link {
        background: url(../images/blog.jpg) no-repeat;
    }

    a.blog_link:hover {
        background: url(../images/blog_h.jpg) no-repeat;
    }

    a.about_link {
        background: url(../images/about.jpg) no-repeat;
    }

    a.about_link:hover {
        background: url(../images/about_h.jpg) no-repeat;
    }

    a.contact_link {
        background: url(../images/contact.jpg) no-repeat;
    }

    a.contact_link:hover {
        background: url(../images/contact_h.jpg) no-repeat;
    }

    .search {
        display: block;
        float: left;
        width: 200px;
        height: 36px;
        margin: 17px 0 0 0;
        background: url(../images/search.jpg) no-repeat;
    }

        .search input[type=text] {
            background: none;
            color: #fff;
            border: 0px none;
            width: 150px;
            height: 25px;
            margin: 5px 0 0 10px;
        }

        .search input[type=submit] {
            background: none;
            border: 0px none;
            text-indent: -9999px;
            width: 36px;
            height: 30px;
            padding: 0;
            cursor: pointer;
        }

Now let’s look on the logo styles. You’ll notice that we added a style for “h1.logo” this style will apply on any <h1> element with a class attribute of “logo“, you’ll also notice that we added a background image which is “logo.jpg” which includes the logo with the highlight behind it, and we also set display to block, width and height. Now you’ll also notice that I used “text-indent: -9999px;” this value makes the text in the <h1> element disappear only when viewed in browsers, this also has SEO benefits.

Now let’s look on menu styles. In “menu_items” class we set the whole <div> to float to the right, then in “menu_items a” we set width and height, display, margin from top and right and float each menu item to the left. Now for each menu item we have two images one for normal state and one for hover state, we add a style for each menu item depending on its class attribute for normal state (e.g “a.home_link“) and for hover state (e.g “a.home_link:hover“).

Next we style search elements, we set the search image as background for “search” class and we also set display, float, width, height and margins. Now we style search text input using “search input[type=text]” and search button using “search input[type=submit]” and we want to style these both elements so that they have no background or border, then we set the text input text color to white. The result should be as the image below.

Step 5 – Adding Recent Posts & Flickr Thumbnails Content

You probably are wondering why we skipped the slider content. I left the slider content for last so that we create it and then implement Javascript to it all together. Now here’s the HTML for Recent Posts & Flickr Thumbnails.

<div class="grid_4">
    <h2>Recent Posts</h2>
    <ul>
        <li><a href="#">Google Nexus One</a></li>
        <li><a href="#">Iphone 3G</a></li>
        <li><a href="#">Blackberry bold</a></li>
        <li><a href="#">Samsung 3G</a></li>
        <li><a href="#">Nokia</a></li>
        <li><a href="#">Soney Ericson Aino</a></li>
    </ul>
    <div class="divider"></div>
    <h2>Flickr</h2>
    <div class="thumbnail">
        <a href="#"><img src="images/image.jpg" alt="" /></a>
    </div>
    <div class="thumbnail">
        <a href="#"><img src="images/image.jpg" alt="" /></a>
    </div>
    <div class="thumbnail">
        <a href="#"><img src="images/image.jpg" alt="" /></a>
    </div>
    <div class="thumbnail">
        <a href="#"><img src="images/image.jpg" alt="" /></a>
    </div>
    <div class="thumbnail">
        <a href="#"><img src="images/image.jpg" alt="" /></a>
    </div>
    <div class="thumbnail">
        <a href="#"><img src="images/image.jpg" alt="" /></a>
    </div>
</div>

In this layout there are simply a few things that we created and the rest is just a copy and paste process. First we added <h2> element for Recent Posts header then added unordered list with a link inside each list item. Then we added <div> element with a class attribute “divider” which will act as the horizontal line divider in between Recent Posts and Flickr sections. Now add <h2> element for Flickr header then <div> element with a class attribute of “thumbnail” which includes an image inside a link. Our layout should look like this.

Step 6 – Styling Recent Posts & Flickr Thumbnails Content

Now we add CSS to style Recent Posts & Flickr Thumbnails. Here’s the CSS.

.content_highlight .grid_4 {
    background: url(../images/divider_ver.jpg) repeat-y;
    background-position: right top;
    padding: 20px 0 0 0;
    min-height: 524px;
}

.content_highlight h2 {
    font-family: Arial;
    font-size: 18px;
    font-weight: bold;
}

.content_highlight ul {
    display: block;
    padding: 0 2px 0 0;
}

    .content_highlight ul li {
        background: url(../images/recent_posts_bg.png) repeat;
        padding: 5px 0 0 60px;
        margin: 0 0 1px 0;
        height: 25px;
        list-style: none;
    }

        .content_highlight ul li a {
            text-decoration: none;
            display: block;
        }

.content_highlight .divider {
    display: block;
    height: 3px;
    background: url(../images/divider_hor.jpg) repeat-x;
    margin: 0 2px 25px 0;
}

    .content_highlight .grid_4 .thumbnail {
        background: #000;
        width: 72px;
        height: 72px;
        float: left;
        display: block;
        margin: 0 20px 12px 0;
        -webkit-box-shadow: 1px 1px 0px #1f1f1f;
        -moz-box-shadow: 1px 1px 0px #1f1f1f;
        box-shadow: 1px 1px 0px #1f1f1f;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

        .content_highlight .grid_4 .thumbnail:hover {
            background: #333;
            -webkit-box-shadow: 2px 2px 1px #000;
            -moz-box-shadow: 2px 2px 1px #000;
            box-shadow: 2px 2px 1px #000;
        }

        .content_highlight .grid_4 .thumbnail img {
            width: 63px;
            height: 63px;
            border: 1px solid #272626;
            margin: 4px 0 0 4px;
        }

            .content_highlight .grid_4 .thumbnail img:hover {
                border-color: #111;
            }

We first start by styling “grid_4” which is the <div> element containing both Recent Post & Flickr Thumbnails with a background image repeated vertically which is the vertical divider in the Photoshop Layout, we set its position to top right finally we set top padding min-height. Next we style <h2> element by setting font’s family, size and weight. We move now to Recent Posts links list by first styling <ul> element style, then <li> element style with a repeated transparent PNG background, a top and left padding, a bottom margin of 1px to act as a separator between list items, a height and a list style set to none to remove bullet from list items. Now we set the “block” of the link element inside list elements to “block” to fill the whole item. Now we move to styling the horizontal divider between Recent Posts & Flickr Thumbnails to have a background image repeated horizontally with a bottom and right margin to keep it from getting over the vertical divider.

Now let’s style the thumbnails, first we style the <div> element holding the thumbnail image with a black background color an equal width and height of 72px, a float left, right and bottom margins and rounded border radius value of 4px which is a CSS3 feature and another CSS3 feature which is an outset box shadow with a shadow color of #1f1f1f, horizontal and vertical length of 1px and blur radius of 0px. Then we style the thumbnail image with a fixed width and height a border and a margin.

Finally, we add some hover effects for the thumbnails by setting the hover state style for the <div> element holding the thumbnail image to have a lighter background color and an outset box shadow with a black shadow color, 2px horizontal and vertical length and a blur radius of 1px, then we set the image hover state style with a darker border color. Now our layout should look like this.

Step 7 – Adding Posts Content

By taking a look at our Photoshop layout we should notice that we need to add one post with a divider and then duplicate it as many as we want. Here’s the HTML for a single post content with a divider.

<div class="grid_8">
    <div class="post">
        <div class="thumbnail">
            <a href="#"><img src="images/image.jpg" alt="" /></a>
        </div>
        <h3><a href="#">Google Nexus One</a></h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum nisl fringilla augue convallis egestas. Vestibulum tempor nisi ut felis luctus sed tincidu orci rutrum. Vivamus dapibus fringilla auctor. Quisque eget elit sed purus impe placerat. Vivamus sed neque purus, id dignissim odio.</p>
        <div class="post_footer">
            <div class="comments">12 comments</div>
            <div class="share">
                <a href="#"><img src="images/facebook_icon.jpg" alt="" /></a>
                <a href="#"><img src="images/twitter_icon.jpg" alt="" /></a>
                <a href="#"><img src="images/stumble_icon.jpg" alt="" /></a>
                <a href="#"><img src="images/digg_icon.jpg" alt="" /></a>
            </div>
            <div class="more"><a href="#">Read more</a></div>
        </div>
        <div class="clear"></div>
    </div>
    <div class="divider"></div>
</div>
<div class="clear"></div>

Now you’ll notice that there’s a main <div> with a class attribute “grid_8” which contains another <div> with a class attribute “post“, then there’s a thumbnail same as we did in Flickr thumbnails, a <h3> element to hold post title, a <p> paragraph element to hold post summery, a <div> element which holds comments count, share icons and read more link. Then we used <div> element with class attribute “clear” and it is used to stretch up the floats’ container to accommodate the floats. Then add a divider element same as we did previously.

Finally, we add a clear <div> (you can try it without a clear element to see the difference). Now our layout should look like this.

Step 8 – Styling Posts Content

You should notice that we already styled the horizontal divider in the previous, all we need to do now is to modify its CSS to match it new position. Here’s the CSS for styling Posts Content.

.content_highlight .grid_8 {
    padding: 20px 0 0 0;
}

    .content_highlight .grid_8 .divider {
        margin: 15px 0 15px 150px;
    }

.content_highlight h3 {
    font-family: Arial;
    font-size: 14px;
    font-weight: bold;
    margin: 0 0 5px 0;
}

    .content_highlight h3 a {
        text-decoration: none;
    }

.content_highlight .post {
    display: block;
    clear: both;
}

    .content_highlight .post .thumbnail {
        background: #000;
        width: 130px;
        height: 130px;
        float: left;
        display: block;
        margin: 0 23px 12px 0;
        -webkit-box-shadow: 1px 1px 0px #3b3b3b;
        -moz-box-shadow: 1px 1px 0px #3b3b3b;
        box-shadow: 1px 1px 0px #3b3b3b;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }

        .content_highlight .post .thumbnail:hover {
            background: #333;
            -webkit-box-shadow: 2px 2px 1px #000;
            -moz-box-shadow: 2px 2px 1px #000;
            box-shadow: 2px 2px 1px #000;
        }

        .content_highlight .post .thumbnail img {
            width: 112px;
            height: 112px;
            border: 1px solid #272626;
            margin: 8px 0 0 8px;
        }

            .content_highlight .post .thumbnail img:hover {
                border-color: #111;
            }

    .content_highlight .post p {
        color: #bebebe;
        margin: 0 0 10px 0;
    }

        .content_highlight .post .post_footer .comments {
            float: left;
            color: #bebebe;
            font-size: 11px;
            margin: 0 25px 0 0;
        }

        .content_highlight .post .post_footer .share {
            float: left;
            margin: 0 20px 0 0;
        }

            .content_highlight .post .post_footer .share a {
                float: left;
                margin: 0 7px 0 0;
            }

            .content_highlight .post .post_footer .more a {
                float: right;
                color: #bebebe;
                font-size: 11px;
                font-style: italic;
                margin: 0 25px 0 0;
            }

We start by styling “grid_8” inside “content_highlight” with a top padding. Now we modify the already styled divider with a top, bottom and left margins. Now we style <h3> element by setting font’s family, size and weight with a bottom margin and set the link inside it to be with no underline “text-decoration: none”. Now we set post <div> style to be displayed as block. The thumbnails are exactly the same as the previous one’s we styled with some values changed to suit the new content. We then change the color of the paragraph element and give it bottom margin.

Finally, we style all the elements inside post footer; we set the comments to float to left with a darker color and a font size of 11px and a right margin. Then we style the share icons with float and margins and last we style read more link to float to right and change its color, font size, a right margin and a font style set to “italic“. Now our layout should look like this.

Step 9 – Adding and Styling Footer Content

Now we will add HTML for footer content and CSS style, as you notice that the footer is very simple and straight forward. It has a copyright text on the left and 3 social icons on the right. Here’s the HTML for footer content.

<div class="footer_container">
    <div class="container_12">
        <div class="grid_11">© 1stwebdesigner 2010</div>
        <div class="grid_1">
            <a href="#"><img src="images/facebook_icon.jpg" alt="" /></a>
            <a href="#"><img src="images/twitter_icon.jpg" alt="" /></a>
            <a href="#" class="last"><img src="images/rss_icon.jpg" alt="" /></a>
        </div>
    </div>
</div>

Notice that we used “grid_4” for the copyright text and “grid_8” class for the social icons, now we need to style the footer so that the copyright text aligns to left and the icons to the right of the layout. Here’s the CSS for footer content.

.footer_container .container_12 {
    margin-top: 14px;
}

.footer_container .grid_4 {
    text-align: left;
}

.footer_container .grid_8 {
    text-align: right;
}

.footer_container a {
    margin: 0 6px 0 0;
}

    .footer_container a.last {
        margin: 0;
    }

We start by setting the footer “container_12” to have a top margin to center footer content vertically. Now we set text alignment for “grid_4” to left and right for “grid_8“. Finally, we style social icons links to have a right margin of 6px and its last element “a.last” to have zero margins. Now our layout should look like this.

Step 10 – Adding Slider Content

Let’s add the HTML for the slider content, I will include here one slide content and then you can duplicate as you wish. Here’s the HTML for slider content.

<div class="slider_container">
    <div class="container_12 slider_highlight">
        <div id="slideshow">
            <div id="slidesContainer">
                 <div class="slide">
                    <img src="images/nexus_one.png" alt="" class="main_image" />
                    <h2>Google Nexus One</h2>
                    <p>Donec in adipiscing odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
                euismod gravida ornare. Phasellus ac ligula mi. Fusce sem purus, rhoncus et volutpat quis, aliq
                uam vitae quam. Nulla vestibulum arcu in nisl bibendum ut posuere sapien lacinia.Fusce sed
                odio at risus rhoncus consectetur sed ut magna. Lorem ipsum dolor sit amet, consectetur
                adipiscing elit. </p>
                    <div class="extra_controls">
                        <div class="buttons">
                            <a href="#" class="discover_more"></a>
                            <a href="#" class="watch_video"></a>
                        </div>
                        <div class="thumbnails">
                            <div class="thumbnail"><a href="#"><img src="images/image.jpg" alt="" /></a></div>
                            <div class="thumbnail"><a href="#"><img src="images/image.jpg" alt="" /></a></div>
                            <div class="thumbnail"><a href="#"><img src="images/image.jpg" alt="" /></a></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Notice that we added two <div> elements with id attributes “slideshow” and “slidesContainer” these two elements is used for the Slider Javascript that we will implement later. Now we add <div> element with a class attribute “slide” this element is the one that slides and that contains each slide’s content (this is the element you should duplicate to allow multiple slides). Then we add an image with a class “main_image” this will hold the nexus one image. We continue by adding <h2> element and a paragraph, then a <div> with a class of “extra_content” this should contain the extra buttons and thumbnails. Now our layout should look like this.

Step 11 – Styling Slider Content

You should now have a transparent PNG image of Nexus One, you will probably notice that the thumbnail section is the same as the one’s we did earlier it just needs a little modification to match our layout. Here’s the CSS for styling slider content.

#slideshow #slidesContainer .slide {
    margin: 0 auto;
    width: 800px;
    height: 380px;
}

    .slide .main_image {
        display: block;
        float: left;
        width: 216px;
        height: 296px;
        margin: 45px 0 0 0;
    }

    .slide h2 {
        margin: 45px 0 10px 0;
    }

    .slide p {

        color: #bebebe;
    }

    .slide .extra_controls {
        display: block;
        float: left;
        margin: 45px 0 0 0;
    }

        .slide .extra_controls .buttons {
            display: block;
            float: left;
            width: 168px;
            margin: 0 25px 0 0;
        }

            .slide .extra_controls .buttons a {
                display: block;
                float: left;
                width: 168px;
                height: 43px;
                margin: 0 0 5px 0;
            }

                .slide .extra_controls .buttons a.discover_more {
                    background: url(../images/discover_more.png) no-repeat;
                }

                .slide .extra_controls .buttons a.discover_more:hover {
                    background: url(../images/discover_more_h.png) no-repeat;
                }

                .slide .extra_controls .buttons a.watch_video {
                    background: url(../images/watch_video.png) no-repeat;
                }

                .slide .extra_controls .buttons a.watch_video:hover {
                    background: url(../images/watch_video_h.png) no-repeat;
                }

        .slide .extra_controls .thumbnails {
            display: block;
            float: left;
        }

            .slide .extra_controls .thumbnails .thumbnail {
                background: #000;
                width: 95px;
                height: 95px;
                float: left;
                display: block;
                margin: 0 22px 0px 0;
                -webkit-box-shadow: 1px 1px 0px #3b3b3b;
                -moz-box-shadow: 1px 1px 0px #3b3b3b;
                box-shadow: 1px 1px 0px #3b3b3b;
                -moz-border-radius: 4px;
                border-radius: 4px;
                opacity: 0.3;
            }

                .slide .extra_controls .thumbnails .thumbnail:hover {
                    opacity: 1;
                }

                .slide .extra_controls .thumbnails .thumbnail img {
                    width: 83px;
                    height: 83px;
                    border: 1px solid #272626;
                    margin: 5px 0 0 5px;
                }

First we start by styling “slide” element by setting margin to “0 auto” and what this does is it zero’s top and bottom margins and centers the slide horizontally. Now we style the main image by setting display, float, height & width and top margin. Now we style “extra_controls” element to float left and to have a top margin of 45px. Next we style the buttons to match the images height and width and to float left so that both land above each others, then we style the hover effect with the hover images.

Finally, we modify the thumbnails style by height and width to match its place on the slide, and the new thing we added here is “opacity” which is also a CSS3 feature and what it does is simply make the element it is applied to transparent by the value provided here we used 0.3 for the normal state and 1.0 for hover state, you should also notice that we removed any other styles from the hover states of both the thumbnail and the image with the exception of “opacity”. Now our layout should look like this.

Step 12 – Adding Slider Javascript

This tutorial is made to show you how to create this layout in HTML/CSS version; so for the Javascript I chose an already developed Slider script by Jacob Gube. You can see the tutorial on how to make this Slider and to download the source files from here. Now there are two things we need to do to make this script work we need to add a link for the JQuery and add the Javascript which will make the slider slide! All of this need to be added in our HTML header. So our HTML header should be like this now.

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Dark Web Layout</title>
    <link type="text/css" href="styles/reset.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/text.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/960.css" rel="stylesheet" media="all" />
    <link type="text/css" href="styles/style.css" rel="stylesheet" media="all" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
    <!-- Script from http://sixrevisions.com/tutorials/javascript_tutorial/create-a-slick-and-accessible-slideshow-using-jquery/ -->
    <script type="text/javascript">
    $(document).ready(function () {
        var currentPosition = 0;
        var slideWidth = 820;
        var slides = $('.slide');
        var numberOfSlides = slides.length;
        // Remove scrollbar in JS
        $('#slidesContainer').css('overflow', 'hidden');
        // Wrap all .slides with #slideInner div slides
        .wrapAll('<div id="slideInner"></div>')
            // Float left to display horizontally, readjust .slides width
        .css({
            'float': 'left',
            'width': slideWidth
        });
        // Set #slideInner width equal to total width of all slides $('#slideInner').css('width', slideWidth * numberOfSlides);
        // Insert controls in the DOM
        $('#slideshow') .prepend('<span class="control" id="leftControl">Clicking moves left</span>') .append('<span class="control" id="rightControl">Clicking moves right</span>');
        // Hide left arrow control on first load
        manageControls(currentPosition);
        // Create event listeners for .controls clicks
        $('.control') .bind('click', function () {
        // Determine new position
        currentPosition = ($(this).attr('id') == 'rightControl') ? currentPosition + 1 : currentPosition - 1;
        // Hide / show controls
        manageControls(currentPosition);
        // Move slideInner using margin-left
        $('#slideInner').animate({ 'marginLeft': slideWidth * (-currentPosition) }); });
        // manageControls: Hides and Shows controls depending on currentPosition
        function manageControls(position) {
        // Hide left arrow if position is first slide
        if (position == 0) { $('#leftControl').hide() } else { $('#leftControl').show() }
        // Hide right arrow if position is last slide
        if (position == numberOfSlides - 1) { $('#rightControl').hide() } else { $('#rightControl').show() } } });
    </script>
</head>

Step 13 – Adding Styles from the Original Javascript

Now all I did when I took the Slider Script that I changed some values of width and height to match our template and changed the next and previous images to the one’s we have. Here’s the CSS for the Slider Script.

#slideshow {
    margin: 0 auto;
    width: 930px;
    height: 380px;
    background: transparent no-repeat 0 0;
    position: relative;
}

#slideshow #slidesContainer {
    margin: 0 auto;
    width: 820px;
    height: 380px;
    overflow: auto; /* allow scrollbar */
    position: relative;
}
/** * Slideshow controls style rules. */
.control {
    display: block;
    width: 55px;
    height: 380px;
    text-indent: -10000px;
    position: absolute;
    cursor: pointer;
}

#leftControl {
    top: 0;
    left: 0;
    background: transparent url(../images/prev.png) no-repeat left 171px;
}

#rightControl {
    top: 0;
    right: 0;
    background: transparent url(../images/next.png) no-repeat right 171px;
}

If you followed this tutorial correctly then you should have a full working HTML/CSS layout from a PSD one that looks exactly like this.

Conclusion

So that’s it in this tutorial you learned how to convert a layout from PSD to fully working HTML/CSS, don’t forget to validate and check for browser compatibility (the layout will not validate because of Javascript & CSS3 styles, remove both to validate properly). Now if you think that anything is not clear to you or you have a better technique to create something, please be kind and say something in the comments.

.content_highlight .grid_4 .thumbnail:hover {
background: #333;
-webkit-box-shadow: 2px 2px 1px #000;
-moz-box-shadow: 2px 2px 1px #000;
box-shadow: 2px 2px 1px #000;
}

.content_highlight .grid_4 .thumbnail img {
width: 63px;
height: 63px;
border: 1px solid #272626;
margin: 4px 0 0 4px;
}

.content_highlight .grid_4 .thumbnail img:hover {
border-color: #111;
}

December 13 2010

07:00

December 08 2010

01:59

Convert a Warm, Cheerful Web Design to HTML and CSS


Not long after our newest Tuts+ site, Webdesigntuts+, launched, they posted an excellent tutorial that details the process of designing a warm and cheerful home page in Photoshop. After high demand, we’ll take that completed design and convert it into a standards-compliant HTML and CSS web page. Along the way, we’ll review a variety of nifty techniques that will help you to improve your own workflow.

Rather than overload you with a massive 4-5 part series all at once, I’ll post a new episode in this miniseries every day. It’s my hope that, if you’re at the point in your career where you can benefit from a series like this, you’ll work along with me each lesson.


The Full Series


Chapter 1: Creating the Markup


Conclusion

So with this first episode out of the way, we can move on to slicing the PSD in the next lesson!

August 02 2010

05:00

Coding a Stylish Blog Design Layout in HTML & CSS

Last week we went through the process of designing a stylish blog layout in Photoshop. Now let’s take our visual concept and cut it into slices for use with neat HTML and CSS code. All our browser testing will be done on this coded concept before converting the design into a full WordPress theme.

At the end of the last post, the design concept had been put together in Photoshop and was all ready to rock. To refresh your memory, here’s the design we’ll be working on.

View the Photoshop tutorial

View the Photoshop tutorial

Exporting the images

The first step is to go through the whole design and export tiny images. Being a design that makes use of textures and patterns, many of the graphics are clipped down to repeating tiles.

In final collection of files the majority of images are saved with the PNG format due to their minimal colour palette. This bunch of small files will also help drastically with page load times.

Some images, like the diagonal lines swatch are just 4px in size, making them super small images, but they cover a large portion of the actual design.

Where there’s lots of instances of a similar graphic, they are combined into a sprite image. Each individual graphic will be picked out using CSS background positioning.

Writing the HTML markup

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ChrisSpooner.com</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

<body>

<div id="container"></div>

</body>
</html>

The HTML document is started with a Doctype. Here the new HTML5 Doctype is used simply because it’s cool and does the job in 15 characters. Not all the HTML5 markup tags are supported, but HTML in an XHTML fashion will still validate perfectly fine. Elsewhere the CSS stylesheet is loaded, then the markup begins with a container div to house the following elements.

<div id="header">
	<h1><a href="#">Chris Spooner</a></h1>
	<ul id="nav">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Archives</a></li>
		<li><a href="#">Say hello</a></li>
	</ul>
	<ul id="subscribe">
		<li class="twitter"><a href="#">Follow on Twitter</a></li>
		<li class="rss"><a href="http:#">Subscribe by RSS</a></li>
	</ul>

	<h2>The personal blog of Chris Spooner</h2>

</div>

First up in the markup is the header area, which is neatly contained within a <div> named “header”. Within this is a <h1> element to act as the logo, and <ul> elements to produce the two menus. In the concept the items appear in the following order: Nav – Title – Subscribe, which is fine in visual terms, but doesn’t read correctly as a document so it’s ordered as Title – Nav – Subscribe in the HTML. The elements can be rearranged with CSS positioning later.

<div id="content">
	<div id="main">
		<div class="post">
			<h2><a href="#">Jake Plays With His New Dog Friends At The Park</a></h2>
			<p class="date">18 <span>Jul</span></p>
			<ul class="meta">
				<li>Posted in <a href="#">Vlog</a></li>
				<li class="comments"><a href="#">5 Comments</a></li>
			</ul>
			<div class="post-content">  

			</div>
		</div>

		[...]

		<div class="pagination">
			<p class="prev"><a href="#">Older posts</a></p>
			<p class="next"><a href="#">Newer posts</a></p>
		</div>

	</div>

A div with an ID of “content” contains the divs “main” and “side” which will act as the main content and sidebar columns. Inside the main content, each post is enclosed within a “post” div. Every post is made up of title, date stamp, meta information and of course the post content.

		<div id="side">
			<div id="categories">
				<h3>Categories</h3>
				<ul>
					<li><a href="#">Apple</a> 4</li>
					<li><a href="#">Design</a> 3</li>
					<li><a href="#">Events</a> 2</li>
					<li><a href="#">Giveaways</a> 5</li>
					<li><a href="#">Vlog</a> 48</li>
					<li><a href="#">Website News</a> 2</li>
				</ul>
			</div>

			<div id="my-sites">
				<h3>My Sites</h3>
				<dl>
					<dt class="bsg"><a href="#">Blog.SpoonGraphics</a></dt>
					<dd>My digital playground where I post various design tutorials.</dd>

					<dt class="l25"><a href="#">Line25</a></dt>
					<dd>My second blog featuring various web design tutorials, articles and inspiration.</dd>

					<dt class="jakethelab"><a href="#">JakeTheLab</a></dt>
					<dd>My dog’s very own website. See insights into the life of Jake the Labrador Retriever.</dd>

					<dt class="spoongraphics"><a href="#">SpoonGraphics</a></dt>
					<dd>Home to my creative Graphic and Web design services and design portfolio.</dd>
				</dl>
			</div>

		</div>
	</div>
</div>

The sidebar is made up of a category list titled with a <h3> and created using a <ul> element. Underneath this is the “My Sites” list, which will be hard coded into the site as a Definition List. The relationship between the site title and description make it perfectly suited as a <dl>.

<div id="footer-container">
	<div id="footer">
		<div id="tweet">
			<p id="follow"><a href="#">Follow me</a></p>
		</div>

		<div id="latest-posts">
			<h4>Latest blog posts</h4>
			<ul>
				<li><a href="#">Design a Beautiful Cosmic Space Scene in Photoshop</a></li>
				<li><a href="#">Line25 Sites of the Week for July 16th 2010</a></li>
				<li><a href="#">Style Your Site According to the Weather with jQuery</a></li>
				<li><a href="#">This Week’s Favourites – July 9th 2010</a></li>
				<li><a href="#">Design a Beautiful Cosmic Space Scene in Photoshop</a></li>
				<li><a href="#">Line25 Sites of the Week for July 16th 2010</a></li>
				<li><a href="#">Style Your Site According to the Weather with jQuery</a></li>
				<li><a href="#">This Week’s Favourites – July 9th 2010</a></li>

				<li class="subscribe"><a href="#">Subscribe to Blog.SpoonGraphics</a></li>
				<li class="subscribe"><a href="#">Subscribe to Line25</a></li>
			</ul>
		</div>

		<div id="music">
			<h4>I'm listening to</h4>
			<div id="lastfmrecords"></div>
		</div>

		<div id="socialize">
			<h4>Socialize</h4>
			<ul>
				<li class="twitter"><a href="#">Twitter</a></li>
				<li class="facebook"><a href="#">Facebook</a></li>
				<li class="youtube"><a href="#">YouTube</a></li>
				<li class="dribbble"><a href="#">Dribbble</a></li>
				<li class="behance"><a href="#">Behance</a></li>
				<li class="tumblr"><a href="#">Tumblr</a></li>
				<li class="flickr"><a href="#">Flickr</a></li>
				<li class="lastfm"><a href="#">Last.FM</a></li>
				<li class="stumbleupon"><a href="#">StumbleUpon</a></li>
				<li class="digg"><a href="#">Digg</a></li>
				<li class="designbump"><a href="#">DesignBump</a></li>
				<li class="vimeo"><a href="#">Vimeo</a></li>
			</ul>
		</div>

		<div id="photos">
			<h4>Latest designs &amp; artworks</h4>
			<div id="flickrimages"></div>
		</div>

		<p id="back-top"><a href="#">Back to top</a></p>
	</div>
</div>

The markup is finished off with the footer. Because the design uses a contrasting footer colour, an extra container is used to surround the footer elements, then the actual footer div is centred up inside the container. Each section of the footer is laid out inside its own div to group the elements together and make it easier to lay out the design later. Some sections like the Last.FM and Flickr streams are created using Javascript plugins, which require empty divs in which the content is placed. If the site needed to be super accessible, HTML messages for non-Javascript users would be placed inside these elements, then hidden by Javascript so they don’t appear for Javascript-enabled users.

See the full annotated HTML

See the full annotated HTML

Styling with CSS

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	background: #f6f5ee url(images/bg.png);
	font: 14px/22px Helvetica, Sans-Serif;
}

@font-face {
	font-family:'Tallys';
	src: url('images/Tallys.otf') format('opentype');
}

#container {
	background: url(images/top-bar.png) top repeat-x;
	background: url(images/top-bar.png) top repeat-x, url(images/footer-top.png) bottom repeat-x;
	padding: 0 0 31px 0;
}

The CSS document begins with a quick reset to remove any browser default styling, then gets to business setting the background colour and texture on the body, as well as setting a global font style. Underneath this, the CSS3 @font-face rule is set up to load the font Tallys, which is used on certain headers within the design.
The #container is given the repeating graphic that generates the top bar, as well as a second background for browsers supporting CSS3 multiple backgrounds. Those supporting browsers will also see the strip of diagonal lines that appear just above the footer, but being just a visual touch it won’t be missed by the more unfortunate viewers on older browsers.

#header {
	width: 961px; margin: 0 auto; position: relative;
	overflow: hidden;
}
	#header h1 a {
		position: absolute; top: 5px; left: 376px;display: block; width: 208px; height: 213px;
		background: url(images/logo.png); text-indent: -9999px;
	}
		#header h1 a:hover {
			background-position: bottom;
		}

	#header ul#nav {
		float: left; margin: 22px 0 0 24px; list-style: none;
	}
		#header ul#nav li {
			float: left; margin: 0 0 0 45px;
		}
			#header ul#nav li:first-child {
				margin: 0;
			}
				#header ul#nav li a {
					display: block; font: 13px Georgia, Serif; letter-spacing: 2px; color: #eeede6;
					text-decoration: none;
				}
					#header ul#nav li a:hover {
						color: #d0cfc8;
					}

	#header ul#subscribe {
		float: right; margin: 22px 24px 0 0; list-style: none;
	}
		#header ul#subscribe li {
			float: left; margin: 0 0 0 32px;
		}
			#header ul#subscribe li a {
				display: block; height: 16px; font: 13px Georgia, Serif; letter-spacing: 2px; color: #eeede6;
				text-decoration: none; padding: 1px 0 0 27px;
				background: url(images/icons.png) left 1px no-repeat;
			}
				#header ul#subscribe li.rss a {
					background-position: left -16px;
				}
					#header ul#subscribe li a:hover {
						color: #d0cfc8;
					}

	#header h2 {
		margin: 250px 0 0 0; min-width: 500px; clear: both; text-align: center;
		background: url(images/top-divider.png) center bottom no-repeat; padding: 0 0 30px 0;
		font: 24px Tallys, Georgia, Serif; letter-spacing: 4px; color: #afada2;
		text-shadow: 0px 1px 0px #fff;
	}

The #header is then centred up on the page and is given position:relative to allow for absolute positioning of the logo inside the confines of the header div. The logo itself is generated from the h1 using a specific width and height for the logo background image. The logo graphic contains both the normal and hover variations of the logo, so the position of the sprite is changed on :hover.
The two navigation elements are floated to the left and right sides of the logo, then the default list styling is removed and each li floated to display horizontally. Text styling is set up as 13px Georgia with letter-spacing giving the type a cool visual touch. On the anchors inside the ul#subscribe, icons are added as background images to produce the RSS and Twitter graphics.
The tagline on the design concept sits centrally underneath the logo, so a mixture of margin, text-align and clear:both help move the h2 into place. The font styling on the concept uses the custom Tallys font, so this is added using the @font-face rule recently setup. The inset effect is created using more CSS3 magic, this time in the form of a simple 1px white text-shadow.

#content {
	width: 917px; margin: -240px auto 0 auto; padding: 280px 22px 0 22px;
	background: url(images/container-lines.png) repeat-y;
}	

	#content #main {
		width: 684px; float: left;
	}
		#content #main .post {
			position: relative; margin: 0 0 60px 0; padding: 0 0 66px 0; overflow: hidden;
			background: url(images/underline.png) bottom repeat-x;
		}
			#content #main .post h2 {
				float: left; margin: 0 0 10px 75px;
				font: 24px Lucida Grande, Lucida Sans Unicode, Helvetica, Sans-Serif; letter-spacing: normal;
			}
			#content #main .post p.date {
				position: absolute; left: 0; top: 0; padding: 4px 7px 4px 7px;
				background: url(images/lines.png);
				font: bold 40px Helvetica, Sans-Serif; color: #b6b6b1; text-align: center;
			}
				#content #main .post p.date span {
					font: normal 20px Helvetica, Sans-Serif;
					display: block; margin: -5px 0 0 0;
				}
			#content #main .post ul.meta {
				float: left; list-style: none; margin: 0 0 30px 75px; overflow: hidden;
				font: 16px Helvetica, Sans-Serif; color: #b6b6b1;
			}
				#content #main .post ul.meta li {
					float: left; margin: 0 20px 0 0;
				}
					#content #main .post ul.meta li.comments {
						padding: 0 0 0 32px; background: url(images/star.png) left center no-repeat;
					}
			#content #main .post .post-content {
				clear: both;
			}	

			#content #main .pagination {
				margin: 0 0 60px 0; overflow: hidden;
			}
				#content #main .pagination p {
					margin: 0;
				}

			#content #main .pagination p a {
				display: block; width: 102px; height: 33px; overflow: hidden;
				background: url(images/pagination-bg.png); font-size: 16px;
			}
				#content #main .pagination p.prev a {
					float: left; padding: 14px 0 0 46px;
				}
				#content #main .pagination p.next a {
					float: right; text-align: right; padding: 14px 46px 0 0;
					background-position: 0 -47px;
				}

The #content div is moved into place using margin: -240px auto 0 auto. The -240px margin on the top helps pull the content back up where it had previously been dropped down by the logo graphic. Each .post div is given margin and padding to space out each blog entry, and a background image provides a neat underline between each one. All the elements inside the post are then styled up with the appropriate font styling to match the concept. The date stamp p.date is given a large font-size to accommodate the date numbers, then the span is reset with a smaller font size and given the display:block; rule to drop it down underneath.
After all the post content styling the .pagination buttons are transformed from plain paragraph elements into large button graphics. They’re first floated left and right, they’re given specific widths and heights according to the actual image file. padding is added to the anchor to position it centrally inside the button.

	#content #side {
		width: 196px; float: left; margin: 0 0 0 37px;
	}

		#content #side h3 {
			font: 22px Tallys, Georgia, Serif; letter-spacing: 4px; color: #afada2; text-align: center; text-shadow: 0px 1px 0px #fff;
			background: url(images/underline.png) bottom repeat-x; padding: 0 0 15px 0; margin: 0 0 20px 0;
		}

		#content #side #categories {
			margin: 0 0 66px 0;
		}
			#content #side #categories ul {
				list-style: none;
			}
				#content #side #categories ul li {
					position: relative; width: 156px; height: 29px; padding: 11px 20px 0 20px; margin: 0 0 10px 0;
					background: url(images/category-bg.png); font-size: 16px; text-align: right;
					color: #afada2; text-shadow: 0px 1px 0px #fff;
				}
				#content #side #categories ul li a {
					float: left; background: url(images/category-fill.png); padding: 0 10px 0 0;
				}

		#content #side #my-sites {
			margin: 0 0 66px 0;
		}
			#content #side #my-sites dl dt {
				font-size: 16px; padding: 0 0 0 26px;
				background: url(images/favicons.png) no-repeat;
			}
				#content #side #my-sites dl dt.bsg {
					background-position: 0 1px;
				}
				#content #side #my-sites dl dt.l25 {
					background-position: 0 -24px;
				}
				#content #side #my-sites dl dt.jakethelab {
					background-position: 0 -51px;
				}
				#content #side #my-sites dl dt.spoongraphics {
					background-position: 0 -76px;
				}

				#content #side #my-sites dl dd {
					font-size: 14px; color: #bcbbb5; margin: 0 0 10px 0;
				}

The sidebar is floated alongside the main content div and given a spot of left margin to space out the columns. All the h3 elements in the sidebar use the Tally font styling with inset text effect. An underline background image provides a divider between the titles and content. The #categories ul li elements are given similar styling to the pagination buttons, where a specific width and height is used to display a background graphic. To recreate the line between the category and post count, a line was added to the background image, then a plain textured fill added to the anchors to hide the line where it runs underneath the text.
The styling for the definition list is quite simple, other than some CSS to set the font styling, just the favicon images had to be set with different background positioning on each dt element.

#footer-container {
	background: #2f2f28 url(images/footer-bg.png);
}	

#footer {
	width: 917px; margin: 0 auto; padding: 20px 22px 66px 22px; overflow: hidden;

}
	#footer a {
		color: #eeede6; text-decoration: none;
	}
		#footer a:hover {
			color: #d0cfc8;
		}
	#footer h4 {
		font: 22px Tallys, Georgia, Serif; letter-spacing: 4px; color: #afada2; margin: 0 0 14px 0;
	}

	#footer #tweet {
		width: 897px; height: 39px; margin: 0 auto 38px auto; padding: 19px 10px 0 10px;
		background: url(images/twitter-bg.png) repeat-x;
	}
		#footer #tweet p#message {
			float: left; color: #afada2; padding: 0 0 0 25px; font-size: 12px;
			background: url(images/twitter-bubble.png) left 2px no-repeat;
		}
		#footer #tweet p#follow a {
			float: right; display: block; width: 85px; height: 27px; margin: -3px 0 0 20px;
			background: url(images/twitter-btn.png); text-indent: -9999px;
		}
			#footer #tweet p#follow a:hover {
				background-position: bottom;
			}

	#footer #latest-posts {
		width: 430px; float: left;
	}
		#footer #latest-posts ul {
			list-style: none;
		}
			#footer #latest-posts ul li {
				font-size: 16px; margin: 0 0 27px 0;
			}

			#footer #latest-posts ul li.subscribe {
				margin: 0 0 10px 0;
			}
				#footer #latest-posts ul li.subscribe a {
					display: block; height: 17px;
					font: 13px Georgia, Serif; letter-spacing: 2px; color: #eeede6;
					padding: 0 0 0 27px; background: url(images/icons.png) left -16px no-repeat;
				}
					#footer #latest-posts ul li.subscribe a:hover {
						color: #d0cfc8;
					}

The design ends with a large footer which contains all kinds of information. Being of full width and having the dark background fill it required both the #footer-container, and the child #footer divs to allow the concept to be replicated. Slightly different font styling was needed inside the footer, particularly link colours, so the #footer a and #footer h4 were altered from those used in the upper portion of the design. At the top of the footer is a latest tweet box. This is styled up as a div named #tweet, while the tweet message and follow button are restyled paragraph elements.
In the #latest-posts ul the list is spaced out with some bottom margin and set at a font-size of 16px. The two li items with the class of .subscribe are given slightly different styling using a serif font and an RSS icon as a background image.

See the full annotated CSS

See the full annotated CSS

Adding Javascript functionality

With the main website now all coded up, all that’s left is to populate those footer sections with content from the various social sites. The Twitter div should display my latest tweet, the music div should display a list of my popular music tracks from Last.FM and the photos div should display recent pictures from Flickr.

$.getJSON("http://twitter.com/statuses/user_timeline.json?screen_name=chrisspooner&count=1&callback=?",
		function(data){
			$.each(data, function(i,item){
			ct = item.text;
			ct = ct.replace(/http:\/\/\S+/g,  '<a href="$&">$&</a>');
			ct = ct.replace(/\s(@)(\w+)/g,    ' @<a href="http://twitter.com/$2">$2</a>');
	 		ct = ct.replace(/\s(#)(\w+)/g,    ' #<a href="http://search.twitter.com/search?q=%23$2">$2</a>');
	   		$("#tweet").append('<p id="message">'+ct +'</p');
	  	});
	 });

    jQuery(document).ready( function() {
       var _config = {
         username: 'spoongraphics',
         count: 6,
         period: '7day'
     };
    lastFmRecords.init(_config);
    });

	$('#flickrimages').flickrush({id:'10201900@N03' });

Three jQuery resources were used to create the functionality. Firstly, the Twitter message is called using JSON as described in this handy tutorial from Ninanet. The Last.FM top tracks list is generated using this fantastic plugin from Jeroen Smeets, which can either be used as a WordPress plugin, or directly through jQuery. Finally, the Flickr stream is producing using a slightly modified version of the Flickrush plugin from Philip Beel.

View the coded site demo

July 26 2010

05:00

Creating a Stylish Blog Design Layout in Photoshop

One of my current projects is a redesign of my personal blog over at ChrisSpooner.com. The aim is to move away from the current fun and cartoony theme and give it a more sophisticated, minimal and stylish design. I thought this would be the perfect opportunity to create a blog design walkthrough. This tutorial starts with the Photoshop stage of the blog design process, and shows how the design and layout are created to form an initial concept from which the fully coded blog will be based on.

View full size concept

View full size concept

The design I’m working on for ChrisSpooner.com features a slightly retro beige and brown colour scheme with a burgundy red as a highlighting link colour. Subtle textures and patterns like the background noise, chiseled lines and inset text effects all help add the visual details to the design. Being a site that holds a fair few YouTube videos, the content area needs to be wide enough to accommodate at least 640px, which leaves just enough space for a thin sidebar to contain category links and a brief overview of the websites I run.
I wanted the footer to be a place where visitors could find a wealth of additional info about me, so it includes a list of latest posts from my design blogs, insights into the music I’m listening to and latest shots from Flickr.

A new document is created in Photoshop. I use dimensions of 1680px width to give a typical widescreen view, a height of 2000px or more to leave space to design the whole page and a resolution of 72ppi. The background is filled with a light colour from my chosen palette, which is a very light beige #f0efe8.

A little texture is added to the background using the Noise filter. Go to Filter > Noise > Add Noise and move the slider to around 2%. Also check the Monochromatic option.

Guides are used to visualise the layout. Create a mask and transform it to the dimensions of 960px, right click on your mask, then select Transform Selection. Alter the width in the Photoshop header bar.

A top heading bar is added and filled with a grey-brown (#6a675d). The layer is set to Multiply to allow the noise texture to show through.

A new pattern swatch is created to use as a fill for special elements. Go to File > New and enter dimensions of 5x5px. Using the pencil tool draw a diagonal line across the canvas then go to Edit > Define Pattern.

Switch back to the main document and create a thin selection underneath the header. Grab the fill tool and change the drop down to ‘Pattern’, then fill this selection with the lined Pattern swatch.

My logo file is pasted in and aligned to the centre margin. This particular badge/emblem was created in Adobe Illustrator (see the tutorial). A subtle Drop Shadow is added using the settings 12% opacity, 5px distance and 0px spread & size to seat the badge on the design.

The text tool is used to add a collection of navigation items. These items will be generated as Pages in the final WordPress theme. The Georgia font is used with increased tracking for a touch of style.

The same font is used on the opposite side of the header, but this time small icons are added to give visual clues for the subscription options.

A subtle container is added to the 960px width using two 1px lines. One is filled with a swatch from the colour palette (#dfddd5), and the other line is filled with white. When viewed at 100% it gives the effect of a chiseled line.

A tagline is added underneath the logo to introduce the website. A ‘non web font font’ (Tallys) is used to spice up the design. This will later be replicated using the @font-face CSS rule.

The same chiseled effect is added to the text using the Drop Shadow layer effect by changing the options to Normal blend mode, 100% opacity, white shadow colour at 1px distance and zero in the spread and size fields.

Now the header is complete, the main content is visualised using typical blog elements. The post date, title, category and comments count are all added as a post header. The most important item is the header, so this is given the largest type size. All links are given a contrasting red colour to alllow them to stand out to the viewer.

Videos are popular on my blog, so it’s important to create some kind of styling for them to blend in with the site. The diagonal lines pattern is used to create a background for the embedded video to fill out the whole content width.

Links to previous and next pages are important elements, so they are made large and prominent. Inner Shadow and Drop Shadow layer effects are used to continue the inset appearance used elsewhere in the design.

The same style is also used on the categories list. The list is designed to fill out the width of the sidebar, and is introduced with a header set in the same Tallys font. Displaying the post count is an option in the WordPress list_categories tag, so this will be styled up the match this design concept.

Another important element for my website is to showcase my main blogs. A list is laid out each containing a title accompanied by the website’s favicon and a short description.

The blog design is finished off with a large footer, which is filled with a dark contrasting colour. The layer is set to Multiply to allow the background texture to show through, and the patterned lines added as a border along the top edge to replicate the header.

The footer is used to display all kinds of social information, so the headers and lists are conceptualised in Photoshop. Different colours are required for the dark background, and different fonts are used for the various elements.

Scripts are available to pull in feeds from your Last.fm and Flickr profiles, so these are replicated in Photoshop to test how they would fit into the design. The Tallys font continues the generic heading style throughout the footer, and everything is aligned to the guides and margins.

View full size concept

The final concept gives a clear insight into how the website will look. Next up is to visualise how the inner pages will look, then the next step will involve coding up the design in HTML and converting the design into a fully working WordPress theme. Stay tuned for the next installment.

March 08 2010

07:00

Design & Code a Cool iPhone App Website in HTML5

HTML5 is definitely the flavor of the month, with everyone in the design community getting excited about its release. In this tutorial we’ll get a taste of what’s to come by building a cool iPhone app website using a HTML5 structure, and visual styling with some CSS3 effects.

iPhone app website for PKE Meter

HTML5 isn’t here just yet, but the Working Draft is complete enough for us to play around and get to grips with the exciting new elements we can use in our code. To learn how a few of these elements can be used, let’s put together a simple website for say, a fictional iPhone app. How about we use the recent tutorial I wrote over at Tutorial9 as a base for our app website? This tutorial covered the process of building an interface just like the awesome apps from Tapbots, so head over and check it out, then we’ll be ready to build an accompanying website for our PKE Meter application.

View the demo

The PSD concept

First, we’ll need to put together a concept for our app website. Create a new document in Photoshop. I use the dimensions of 1680×1050 to give a typical widescreen monitor resolution to work with.

Fill the background with grey (#252525), then add some subtle texture by heading to Filter > Noise > Add Noise. Select the Gaussian and Monochromatic options and set the amount to 1.3%.

Draw a simple app icon with the rounded rectangle, and type out the name of our app in Helvetica Bold.

Double click the layer of each object to add some layer styling. Give each one a Color Overlay of #00ffcc and a soft Outer Glow to create an illuminated appearance.

CMD-Click the layer thumbnail of each object to load the selection, then fill a new layer with a horizontal scan-lines pattern. Check out the original tutorial for more information on how to create custom patterns.

Change the blending mode of the scan-lines to Multiply and drop the opacity to around 35%. Add a little logo and the usual highlight to the iPhone icon graphic.

Type out an enticing introduction for the app with the type tool and add the same illuminated layer style. If you haven’t guessed already, the PKE Meter is the tool Egon Spengler uses in Ghostbusters. If Egon was busting ghosts in 2010, there’s no doubt he’d be using his iPhone to track psycho-kinetic energy.

Fill out the design with a description of the app. To give the text a little extra pop, add a black drop shadow.

Take the time to line-up the elements of your design and finish off the description of the app with a list of features.

Download the handy iPhone UI kit from Teehan+Lax and paste in the custom app screenshot in place. Position the iPhone over to the right. Keeping the scale pretty large will help it act as a main focal point for the design and maintain the small details of the app interface.

No iPhone app website would be complete without the ‘Available on the App Store’ badge. Paste in a copy of the badge and add some general styling with a subtle Inner Shadow.

With just some copyright and disclaimer information added to the footer area, the concept is ready to be sliced and exported. Save the logo, the large iPhone graphic, the app store badge and a clipping of the textured background as PNG graphics.

The HTML5 structure

<!DOCTYPE html>
<html>
<head>
	<title>PKE METER app for iPhone</title>
	<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
	<div id="container">

	</div>
</body>
</html>

Next we’ll put together the basics for the HTML index page. The HTML5 doctype is pretty simple indeed. Just add <!DOCTYPE html>. This is followed by some familiar HTML that outlines the <head> and <body>. We’ll add a div with an id of container to enclose all the content in a fixed width.

<header>
	<img src="images/logo.png" alt="PKE Meter" id="logo" />
	<h1>Track ghosts,<br> on your iPhone</h1>
</header>

Now the new HTML5 elements will come into play. The <header> element is used to enclose a group of introductory or navigational aids. The logo and intro title of our design would fit perfectly here. The logo itself is added as an image, and the intro, being the most descriptive element is coded in a <h1>.

<section>
	<p>Follow in the footsteps of Ghostbuster legend Egon Spengler and become a doctor of parapsychology with the PKE METER app for iPhone.</p>

	<h2>Features:</h2>
	<ul>
		<li>Study paranormal activity.</li>
		<li>Track sources of psycho-kinetic energy.</li>
		<li>Measure supernatural energy readings.</li>
	</ul>
</section>

A <section> in HTML5 refers to a grouping of content, so all the information about the app in our design can be enclosed in the section element.

<aside>
	<a href="#"><img src="images/iphone.png" alt="iPhone showcasing a screenshot of the PKE METER app." /></a>
</aside>

An <aside> in HTML5 is pretty similar to a <section> as it also basically a grouping of content, but an aside is used specifically for separate content that has a connection to a nearby section. The large graphic of the iPhone and app screenshot is related to the information that’s within the adjacent <section> element in our design, so it would work well as an aside.

<footer>
	<a href="#" id="app-store">Available on the iPhone app store</a>

	<p><small>&copy; Paranormal Lab of Columbia University.</small></p>
	<p><small>Use of PKE METER for long periods may result in brain cell mutation.</small></p>
</footer>

The <footer> element is another handy structural HTML tag that replaces the old <div id="footer"> method with something more descriptive. Within the footer I’ve used <small> tags to surround the copyright and disclaimer. The <small> element is used to represent small print, and can be used for disclaimers, caveats, legal restrictions and copyrights (not small as in size, as the name suggests.)

<!DOCTYPE html>
<html>
<head>
	<title>PKE METER app for iPhone</title>
	<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
	<div id="container">
		<header>
			<img src="images/logo.png" alt="PKE Meter" id="logo" />
			<h1>Track ghosts,<br> on your iPhone</h1>
		</header>

		<section>
			<p>Follow in the footsteps of Ghostbuster legend Egon Spengler and become a doctor of parapsychology with the PKE METER app for iPhone.</p>

			<h2>Features:</h2>
			<ul>
				<li>Study paranormal activity.</li>
				<li>Track sources of psycho-kinetic energy.</li>
				<li>Measure supernatural energy readings.</li>
			</ul>
		</section>

		<aside>
			<a href="#"><img src="images/iphone.png" alt="iPhone showcasing a screenshot of the PKE METER app." /></a>
		</aside>

		<footer>
			<a href="#" id="app-store">Available on the iPhone app store</a>

			<p><small>&copy; Paranormal Lab of Columbia University.</small></p>
			<p><small>Use of PKE METER for long periods may result in brain cell mutation.</small></p>
		</footer>
	</div>
</body>
</html>

So here’s our simple HTML5 page altogether. We’ve only used a couple of the new elements, but that’s all we needed for this particular design. It has however, enabled us to create a really clean markup and has seriously cut down on the number of <div> tags scattered around the HTML, making it much more easy to see where specific sections start and end.

The CSS styling

body, div, h1, h2, h3, h4, h5, h6, p, ul, li, img, header, section, aside, footer, button {
	margin: 0; padding: 0; border: 0;
}

body {
	font-family: Helvetica, Arial, Sans-Serif;
	background: #2b2b2b url(images/bg.png);
}

#container {
	width: 960px;
	margin: 0 auto;
	padding: 90px 0 100px 0;
	position: relative;
	overflow: hidden;
}

Now it’s time to get everything styled up according to the visual concept. To begin, the stylesheet is given a quick reset to strip out the browser default styling, the body is given the dark textured background and the containing div is positioned centrally.

header {}
	header img#logo {
		margin: 0 0 50px 0;
	}
	header h1 {
		margin: 0 0 30px 90px;
		font-size: 60px;
		font-weight: normal;
		line-height: 74px;
		color: #00ffcc;
		text-shadow: 0px 0px 10px #00ffcc;
	}

The logo and title can be moved into position by editing their margins, and the text for the intro title can be styled up the match the visual concept by adding the bright green color, and the illuminated effect with the CSS3 text-shadow property.

section {
	margin: 0 15px 30px 0;
	width: 530px;
	float: left;
}
	section p {
		margin: 0 0 30px 90px;
		font-size: 22px;
		line-height: 35px;
		color: #d9d9d9;
		text-shadow: 0px 1px 5px #000;
	}
	section h2 {
		margin: 0 0 10px 90px;
		font-size: 40px;
		font-weight: normal;
		color: #00ffcc;
		text-shadow: 0px 0px 10px #00ffcc;
	}
	section ul {
		margin: 0 0 30px 90px;
		font-size: 22px;
		line-height: 45px;
		color: #d9d9d9;
		text-shadow: 0px 1px 5px #000;
	}

The <section> that contains all the textual information is given a specific width and floated to the left, and all the subsequent content elements such as the header two, paragraphs and unordered list are all given the appropriate font-sizing, margin and coloring to match the PSD concept.

aside {
	position: absolute;
	top: 20px;
	right: 0;
}

The <aside> can then be moved into place with some absolute positioning. This ensures the iPhone graphic appears 20px from the top of the page, relative to the containing div.

footer {
	width: 960px;
	float: left;
	clear: both;
	overflow: hidden;
}
	footer a#app-store {
		display: block;
		width: 198px;
		height: 72px;
		background: url(images/app-store.png);
		text-indent: -9999px;
		margin: 0 0 0 84px;
		float: left;
	}
	footer p {
		float: right;
		clear: right;
		font-size: 16px;
		color: #5a5a5a;
		margin: 10px 0 0 0;
	}

The footer can then be cleared so that it sits underneath the previous content and given an overflow:hidden declaration to clear itself after the floats used on the anchor and paragraphs. Speaking of anchors and paragraphs, these elements are each given moved into place with floats to finish off the CSS.

Previewing the site in Firefox, Chrome and Safari will show the site in all its coded glory. Unfortunately, Internet Explorer doesn’t share support for HTML5, so it needs a little extra work.

<script>
  document.createElement('header');
  document.createElement('footer');
  document.createElement('section');
  document.createElement('aside');
</script>

Because IE doesn’t support HTML5, it just doesn’t recognise those new fancy elements. The good news is it’s easy to tell IE to create them anyway by adding the above Javascript to your <head>. As soon as this code is added, everything looks perfect in IE, albeit with the cool illumination effects being gracefully degraded. It’s worth noting that if Javascript is turned off, IE will show the broken version of the site. Chances are with an iPhone app website like this, the majority of the visitors are going to be clued up on their browsers, so it’s a risk that we could take for this particular design.

View the demo

February 15 2010

07:00

How to Code up a Web Design from PSD to HTML

A couple of weeks back we went through the process of creating a gnarly snowboarding themed website design concept in Photoshop. The tutorial covered the process of designing our site concept from sketch to finished PSD design. Now, let’s take the design to the next step and code up a complete mockup in HTML and CSS, ensuring our code is semantic and standards compliant. We’ll then add some finishing touches with a spot of jQuery.

To refresh your memory

See the making of the concept

Cast your mind back and you’ll remember we left off at the end of the post titled Create a Gnarly Snowboarding Themed Web Design with a finished PSD sporting a textured background, large feature area and a mix of text, images and video making up the main content area.

Check out part one of the tutorial

Cutting up the PSD concept

With our design being pretty design heavy, there’s a good selection of elements that will need exporting from the PSD. The first is the large textured background.

Select the background texture

Disable all other layers then draw a large marquee across the design that includes all the textured elements and blue gradient. Press CMD+Shift+C to copy this selection, then paste in into a new document.

Extend the background to accommodate large monitors

To take into consideration larger monitors, we need to make sure our design is wide enough not to be cropped off. A width of 2200px should be more than sufficient to accommodate even the larger of monitor setups. Select a portion of the gradient and press CMD-T to transform and stretch the background to fill the white space. Save this large image for the web, but take care to balance between file size and quality. With the image being super-sized, it’s important to carefully select the appropriate compression settings. My final file weighs in at 220kb, which is pretty heavy in normal circumstances, but considering that the rest of the design is quite lightweight, it’s a sacrifice that can be justified. We could have made things much easier for ourselves by not including a gradient as well as a texture, this way we could set a smaller graphic in the center that fades out to a flat colour. (Or wait until the multiple backgrounds CSS3 property is more widely supported!)

Selecting the logo graphic

Continue selecting individual page elements with the marquee tool, pressing CMD-Shift-C to copy-merged then paste in a new document and export. Elements such as the logo, feature graphics, profile shots and every small icon needs saving as an individual graphic.

Exporting individual page items

Remember to choose the most appropriate file type and compression setting for each item. An element that is made up of flat colours will be more suited to PNG format. Elements that require a transparent background can be exported using the PNG-24 option.

Overview of all image files

Once all of the images have been saved, you’re ready to move onto the HTML section of the website build.

Building the HTML structure

It’s always important to build the house before decorating the rooms, so we’ll begin by writing out the HTML structure of the website. We’ll base the HTML on the XHTML Strict Doctype and add the initial link to the stylesheet and a containing div to hold the content.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Snow Candy</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>
<div id="container">

</div>
</body>
</html>

The header

The structure for the header is pretty simple. We have our logo, which is set in a H1 and links back to the homepage. Our navigation is perfect for an unordered list, and each contains an anchor to the relevant page. A class of active will then allow us to target an individual page for highlighting the active page.

<div id="header">
	<h1><a href="#">Snow Candy</a></h1>
	<ul id="nav">
		<li><a href="#" class="active">Home</a></li>
		<li><a href="#">Apparel</a></li>
		<li><a href="#">Team</a></li>
		<li><a href="#">Shop</a></li>
	</ul>
</div>

The content

Next we flesh out the bulk of the page content. The whole main area can be contained within a div with an ID of content. Within this we’ll start with the large feature graphics, an unordered list will once again be a handy element to use, as it allows us to easily list them out in sequence. Inside each list element is each image graphic, complete with a descriptive alt attribute.

<div id="content">
<div id="features">
	<ul>
		<li><a href="#"><img src="images/feature-1.jpg" alt="5th Annual Big Air Jam. 5th January 2010" /></a></li>
		<li><a href="#"><img src="images/feature-2.jpg" alt="Salomon Shred Round One" /></a></li>
		<li><a href="#"><img src="images/feature-3.jpg" alt="Snow Candy in S&auml;len" /></a></li>
	</ul>
</div>

The design then splits into two columns, so we can add a div with a class of column ready for floating with CSS later. Within the featured video section I’ve embedded a cool snowboarding video from Vimeo, followed by the title and description, both set in natural header and paragraph tags. A paragraph tag with a class of “btn” will allow us to set up a global style for any button style objects, allowing some unique styling to be added. The actual Vimeo embedding code has been modified slightly to keep it valid within our Strict doctype, thanks to the help of this article.

<div class="column">
	<h2 class="featured-video">Featured Video</h2>
	<div class="video">		
		<object width="379" height="213" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=3155182&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1">
			<param name="allowfullscreen" value="true" />
			<param name="allowscriptaccess" value="always" />
			<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=3155182&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1" />
		</object>
	</div>

	<h3><a href="#">Snow Candy in S&auml;len</a></h3>
	<p>The Snow Candy team head to S&auml;len to experience the local snow, attractions and lifestyle.</p>
	<p class="btn"><a href="#">See more videos</a></p>
</div>

In the second column, the list of events has a layout that lends itself well to being rendered as a definition list, with the date and event description being relative to each other. The date can be set as the definition title, and the definition description as the content, which will help us target these tags to style up the fancy layout we’ve got going on. With the dates being laid out vertically at different type sizes, adding a span around the month will help provide that extra hook needed for the CSS styling.

<div class="column">
	<h2 class="events">Upcoming Events</h2>
	<dl>
		<dt>5 <span>Feb</span></dt>
		<dd>
			<h4>5th Annual BigAir Jam</h4>
			<p>Elite riders compete for the title of 2010 BigAir champion in the 5th annual running of the event in Sallback, Austria. Last year’s winner Nate Bailey is returning to defend his crown against some of the most elite names from Europe and the USA.</p>
		</dd>

		<dt>3 <span>Mar</span></dt>
		<dd>
			<h4>Salomon Shred Round 1</h4>
			<p>Elite riders compete for the title of 2010 BigAir champion in the 5th annual running of the event in Sallback, Austria. Last year’s winner Nate Bailey is returning to defend his crown against some of the most elite names from Europe and the USA.</p>
		</dd>
	</dl>
	<p class="btn"><a href="#">See more events</a></p>
</div>

The last portion of content is the list of team members. Again, this list of objects is tailored nicely to be written as an unordered list element. Within each list element is an anchor link that will head off to the relevant page. Each anchor also has a class to help identify each team member when styling them up.

<h2 class="team">Meet the Team</h2>

<ul id="team">
	<li><a href="#" class="joe">Joe</a></li>
	<li><a href="#" class="charlie">Charlie</a></li>
	<li><a href="#" class="lars">Lars</a></li>
	<li><a href="#" class="marco">Marco</a></li>
</ul>

The footer

The HTML is then closed out with the footer, containing a simple back-to-top link, and the body and HTML tags closed to finish off the document. A quick validation ensures there’s no errors, meaning it’s time to move onto some CSS styling.

	<div id="footer">
		<p><a href="#header" class="back-top">Back to top</a></p>
	</div>

</div>

</body>
</html>

Styling the CSS

Body styling complete

The first line of CSS that’s written is to quickly reset any browser specific styling. Ensuring that we’re starting from a clean slate when it comes to margins, padding and borders. Next, the sans-serif font-family is set on the body tag, to render the Helvetica font throughout the design. A line-height of 24px will help us stick to our 24px baseline grid from the design, and will help fix any differences between browsers.

The main background of the site is then added. First the flat blue colour is specified, then the large textured background. This is positioned at the top center, and told not to repeat. Unlike inline images, background images don’t create scrollbars if they are larger than the content window, so despite our graphic being a huge 2200 pixels wide, a portion of the edges will be hidden according to how large the viewer’s monitor is.

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	font-family: Helvetica, Arial, Sans-Serif; line-height: 24px;
	background: #b9d2f8 url(images/body-bg.jpg) center top no-repeat;
}

The header

Styling the header section

Next up for styling is the main container div, which is simply given a 980px width and set to appear centrally. This is followed by the header and its sub-elements. The header div is given some padding to create the spacing at the top and sides according to the PSD concept, and is given an overflow:hidden property to clear itself and correctly calculate its height after the floated navigation elements.

The header one tag is given specific dimensions in order to properly display the logo as a background image, and a negative text-indent shifts the standard header text out of the way off-screen. The navigation is then floated alongside it, with a little margin to help align the elements. Each anchor inside the list items is styled to give the appropriate appearance according to the PSD concept, which includes setting the font-size and gaps between each element. They are then finished off with the addition of the transparent brush stroke graphic as a background image for links that have the active class, or are being hovered by the mouse.

#container {
	width: 980px; margin: 0 auto;
}

#header {
	padding: 48px 16px 0 16px; overflow: hidden;
}
	#header h1 a {
		display: block; width: 221px; height: 107px; float: left;
		background: url(images/logo.jpg); text-indent: -9999px;
	}

	#header ul#nav {
		width: 720px; float: right; margin: 42px 0 0 0;
	}
		#header ul#nav li {
			float: left; list-style: none;
		}
			#header ul#nav li a {
				display: block; width: 155px; height: 34px; margin: 0 0 0 25px; padding: 12px 0 0 0; 
				font-size: 24px; text-transform: lowercase; color: #fff; text-decoration: none; text-align: center;
				text-shadow: 0 3px 3px #333;
			}
				#header ul#nav li a:hover, #header ul#nav li a.active {
					background: url(images/active-nav.png);
				}

General content styling

Styling the content background

The main central content area can then be styled to mimic the original PSD concept. First it’s given a specific width, with padding to push the content away from the edges. It’s set to overflow:hidden because it will contain some floated elements, and is given a transparent-white background PNG to create the translucent effect. Other options to create the white transparency could have been the opacity property, or the CSS3 RGBa property, but a good old PNG-24 graphic is the most cross-browser friendly, with just IE6 requiring extra work to enable the alpha transparency.

To finish off the content area, a small radius is added to the corners using the border-radius property. Because this isn’t fully supported yet, browser specific code can tell individual browsers to add the novelty effect.

#content {
	width: 938px; padding: 16px 16px 60px 16px; overflow: hidden;
	background: url(images/white-trans.png);
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

Styling the feature section

Styling the features section

The large features section in the design currently holds three slides, but the aim is to only display one at a time. When Javascript is added, these can be tweaked to transitionally fade between each one, but we also need the section to work without Javascript being enabled. To do this, the features section is given the specific dimensions of one slide. The overflow:scroll property will then add scrollbars to allow the user to manually navigation between slides. The UL is given a width of 2820px (3x the width of the slides), and they’re floated side by side. Without limiting the features container to a specific size, the slides would simply fill up the whole page, which ruins the usability of the site. This way, the user can experience the features slideshow, albeit in a much more low-tech way.

#content #features {
	width: 940px; height: 457px; margin: 0 0 48px 0;
	overflow: scroll; /* Changed to hidden if javascript enabled */ 
}
	#content #features ul {
		width: 2820px;
	}

	#content #features ul li {
		float: left;
	}

Styling the columns and their content

Styling the columns content

Remember those two columns we wrote out in the HTML? They need floating side by side, so a width is calculated that will fit inside the content div, and the float:left property added. Inside these columns the video and upcoming events sections are styled. The video div simply has an image background to style up the embedded video, and some padding quickly aligns everything up. The definition list for the events section requires some extra CSS to manipulate the basic definition list element into the fancy layout we have planned. The date of each event is contained within the definition title, so that can be floated to the side and set to a large font-size. The extra span we added then comes in handy to render the month text at a smaller font-size, and as a block element so that it drops down below the number.

The definition description and its header h4 tags can then be given the appropriate typographic treatment once the DD is floated alongside the DT. With all styling complete it matches the original concept perfectly.

#content .column {
	width: 409px; float: left; padding: 0 30px 0 30px; margin: 0 0 24px 0;
}
	#content .column .video {
		width: 387px; height: 222px; padding: 13px 0 0 17px; margin: 0 0 24px 0;
		background: url(images/video-bg.jpg) no-repeat;
	}

	#content .column dl dt {
		width: 55px; float: left; padding: 10px 0 0 0;  overflow: auto;
		color: #fff; font-size: 64px; line-height: 34px;
	}
		#content .column dl dt span {
			font-size: 16px; text-transform: uppercase; display: block;;
		}
		#content .column dl dd {
			float: left; width: 354px;
		}

		#content .column dl h4 {
			font-size: 32px; font-weight: normal; color: #fff; margin: 0 0 5px 0;
		}

Styling the team list

Styling the team section

The last part of the content styling is to flesh out the list of team members. Earlier each team member photo was exported, so these can now be set to each individual anchor tag. Each list item is set to float left, and is given the appropriate margin to space them out across the page. Anchor elements are by default inline elements, so to allow a specific width and height to be set, they need to be converted to display:block. Each individual team member can then be targeted through the class names on each anchor, with each photo graphic and image dimensions being added as a background.

#content ul#team {
	list-style: none; overflow: hidden;
}
	#content ul#team li {
		float: left; margin: 0 0 0 27px;
	}
		#content ul#team li a {
			display: block; text-indent: -9999px;
		}
			#content ul#team li a.joe {
				width: 199px; height: 229px;
				background: url(images/joe.jpg);
			}
			#content ul#team li a.charlie {
				width: 199px; height: 229px;
				background: url(images/charlie.jpg);
			}
			#content ul#team li a.lars {
				width: 205px; height: 233px;
				background: url(images/lars.jpg);
			}
			#content ul#team li a.marco {
				width: 198px; height: 229px;
				background: url(images/marco.jpg);
			}

Styling the footer

Styling the footer

The footer area can be quickly finished up by adding the subtle texture background, and the back-to-top link floated over to the right, styled up and positioned into place.

#footer {
	min-height: 159px; overflow: hidden;
	background: url(images/footer-bg.jpg) center 0 no-repeat;
}
	#footer p a.back-top {
		float: right; margin: 14px 24px 0 0;
		font-size: 12px; text-decoration: none; color: #4d74bb;
	}
		#footer p a.back-top:hover {
			color: #234c97;
		}

Adding the Javascript

Let’s not forget the extra Javascript effects we had planned for that features section. With the help of some jQuery, and the super cool Cycle plugin, we can easily transform that basic features list into a fully working slideshow.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>

First, the jQuery library and our own scripts file is referenced in the HTML. The cycle plugin is included in the scripts.js, then some of our own Javascript can put it all into practice. First the overflow:scroll on the features list needs changing to hidden to remove those ugly scrollbars, then the cycle plugin is initiated on the features list. By default the plugin will place a simple fading transition between each element, but there’s plenty more options that could be configured.

$(document).ready(function() {

/* Change the overflow:scroll to overflow hidden on the Features list */

	$('#features').css('overflow','hidden');


/* Initiate the cycle on the Features list */
	$('#features ul').cycle();
});

The final concept

View the final demo

So here we have the complete mockup in live HTML and CSS format. Our HTML is clean and valid, and the CSS renders everything how we wanted according to the original PSD concept.

View the demo

Similar Posts

Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
Get rid of the ads (sfw)

Don't be the product, buy the product!

Schweinderl