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

Posted in Coding, Coding, HTML & CSS, Tutorials3 years ago • Written by 20 Comments

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;
}

If you enjoyed this article, get email updates (it's free).

Join over 77,235 Subscribers Today.

19 Written ArticlesWebsite

Ahmad Hania is a professional designer and developer with a B.Sc. in Computer Engineering. He is interested in freelancing and blogging. He is a cofounder of Wateen Technologies an application development and hosting company. He loves video games and sports. Read more articles by Ahmad Hania at his blog Follow Ahmad Hania at Twitter and Facebook.

20 Comments Best Comments First
  • Manmohanjit Singh

    Tuesday, January 11th, 2011 10:52

    1

    Could have used less images, and more CSS3. Like for the buttons, one button one image? :( Nice tut though

    0
  • Abhishek

    Tuesday, January 11th, 2011 22:26

    7

    Nice & Detailed. Very nice :P

    0
  • Dainis Graveris

    Tuesday, January 11th, 2011 23:27

    8

    Well, this is too private question, since I am not hiring guest writers any more, but it’s motivational for both parties.

    0
  • Eko S

    Wednesday, January 12th, 2011 01:57

    9

    Great tutorials here, thanks for share

    0
  • Donna

    Tuesday, January 11th, 2011 21:01

    6

    Wow, did you really code that all by hand?? I’m in awe. But don’t you find that using other tools to save the coding work to be worthwhile? I’m really curious. I think I would go nuts.

    Donna

    0
  • Theocb

    Tuesday, January 11th, 2011 18:17

    5

    Nice and useful tutorial, thanks!

    0
  • Sánchez y Sánchez

    Tuesday, January 11th, 2011 14:03

    2

    just one thing, you can use sprites for buttons, and play with background-position

    0
  • Meino

    Tuesday, January 11th, 2011 14:42

    3

    Great tutorial. Thanks a lot. How long did it take you to write this article?

    0
  • Ben

    Tuesday, January 11th, 2011 10:20

    4

    Very nice detailed tutorial. How much do you pay for these type of (detailed) tutorials ?

    0
  • Anonymous

    Wednesday, January 12th, 2011 05:12

    10

    Explained well.. Thanks for sharing this article..

    0
  • Scott Carmichael

    Wednesday, January 12th, 2011 12:59

    11

    Really cool tutorial, will definitely being using some of ideas. Thanks for sharing.

    0
  • Ahmed Abbouh

    Wednesday, February 23rd, 2011 02:43

    18

    thank you so much for this very detailed tutorial, i learned so much from it

    BIG TWEET :)

    0
  • Brett Widmann

    Monday, March 28th, 2011 02:26

    19

    This made the process so easy! This is a great tutorial and very explanatory.

    0
  • Brendon

    Saturday, December 17th, 2011 17:59

    20

    I’m sure the best for you with confident to get new coupon

    0
  • Rod

    Monday, February 7th, 2011 19:50

    17

    Hi guys… just a question for my own update… what do you people mean with a CSS3 way to code, like “using the images as a fallback” as someone said earlier? Could someone please be more clear and specific? Thanks so much for the tips.

    0
  • Bunny

    Wednesday, January 19th, 2011 16:15

    16

    Wow very informative article.

    0
  • Idraki Muhamad

    Thursday, January 13th, 2011 19:38

    12

    That can be solve using image sprites. But using CSS3 would be much better, and use the images as a fallback.

    0
  • David

    Thursday, January 13th, 2011 19:00

    13

    How do you think 3D design is going to influence the web in 2011? Also, would appreciate more articles on 3D-PSD to HTML. Thanks.

    0
  • Ahmad Hania

    Friday, January 14th, 2011 13:18

    14

    It took me about 1 day to create the layout and 4 days to complete the tutorial.

    0
  • saadbassi

    Tuesday, January 18th, 2011 12:06

    15

    I really think this is also not a professional move to ask such a question in comments.

    0
  • Brendon

    Saturday, December 17th, 2011 17:59

    20

    I’m sure the best for you with confident to get new coupon

    0
  • Brett Widmann

    Monday, March 28th, 2011 02:26

    19

    This made the process so easy! This is a great tutorial and very explanatory.

    0
  • Ahmed Abbouh

    Wednesday, February 23rd, 2011 02:43

    18

    thank you so much for this very detailed tutorial, i learned so much from it

    BIG TWEET :)

    0
  • Rod

    Monday, February 7th, 2011 19:50

    17

    Hi guys… just a question for my own update… what do you people mean with a CSS3 way to code, like “using the images as a fallback” as someone said earlier? Could someone please be more clear and specific? Thanks so much for the tips.

    0
  • Bunny

    Wednesday, January 19th, 2011 16:15

    16

    Wow very informative article.

    0
  • saadbassi

    Tuesday, January 18th, 2011 12:06

    15

    I really think this is also not a professional move to ask such a question in comments.

    0
  • Ahmad Hania

    Friday, January 14th, 2011 13:18

    14

    It took me about 1 day to create the layout and 4 days to complete the tutorial.

    0
  • David

    Thursday, January 13th, 2011 19:00

    13

    How do you think 3D design is going to influence the web in 2011? Also, would appreciate more articles on 3D-PSD to HTML. Thanks.

    0
  • Idraki Muhamad

    Thursday, January 13th, 2011 19:38

    12

    That can be solve using image sprites. But using CSS3 would be much better, and use the images as a fallback.

    0
  • Scott Carmichael

    Wednesday, January 12th, 2011 12:59

    11

    Really cool tutorial, will definitely being using some of ideas. Thanks for sharing.

    0
  • Anonymous

    Wednesday, January 12th, 2011 05:12

    10

    Explained well.. Thanks for sharing this article..

    0
  • Eko S

    Wednesday, January 12th, 2011 01:57

    9

    Great tutorials here, thanks for share

    0
  • Dainis Graveris

    Tuesday, January 11th, 2011 23:27

    8

    Well, this is too private question, since I am not hiring guest writers any more, but it’s motivational for both parties.

    0
  • Abhishek

    Tuesday, January 11th, 2011 22:26

    7

    Nice & Detailed. Very nice :P

    0
  • Donna

    Tuesday, January 11th, 2011 21:01

    6

    Wow, did you really code that all by hand?? I’m in awe. But don’t you find that using other tools to save the coding work to be worthwhile? I’m really curious. I think I would go nuts.

    Donna

    0
  • Theocb

    Tuesday, January 11th, 2011 18:17

    5

    Nice and useful tutorial, thanks!

    0
  • Ben

    Tuesday, January 11th, 2011 10:20

    4

    Very nice detailed tutorial. How much do you pay for these type of (detailed) tutorials ?

    0
  • Meino

    Tuesday, January 11th, 2011 14:42

    3

    Great tutorial. Thanks a lot. How long did it take you to write this article?

    0
  • Sánchez y Sánchez

    Tuesday, January 11th, 2011 14:03

    2

    just one thing, you can use sprites for buttons, and play with background-position

    0
  • Manmohanjit Singh

    Tuesday, January 11th, 2011 10:52

    1

    Could have used less images, and more CSS3. Like for the buttons, one button one image? :( Nice tut though

    0

Comments are closed.

54.211.231.221 - unknown - unknown - US