Today we are excited to release a new freebie resource. A free Slick UI Elements. We are releasing this free resource in a fully layered PSD file. This resource is offered exclusively on ahmadhania.com. Download, full preview and more information after the jump.

The Slick UI Elements resource contains a design for major UI Elements in a blue over gray color theme, with design for the following elements: text box, button, toggle button, check box, combo box, radio button, separator, slider, dialog box and progress bar. All necessary states has been designed as well: normal, hover and selected or clicked. You can customize and use this resource for web or interface design projects or simply as a learning material to see how it was designed. Here’s a full preview of the resource.

The Slick UI Elements Resource is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.

Download

Today we are excited to release a new freebie resource. A free Orange Blog Template. We are releasing this free resource in a fully layered PSD file. This resource is offered kindly and exclusively on ahmadhania.com by our friend Scott Rollo. Download, full preview and more information after the jump.

The Orange Blog Template resource is a unique blog template that focuses on good use of typography with a minimalist, clean-cut and CSS friendly design. Typography features include leading to make body copy easier to read, asymmetric pagination for comfortable reading, quote blocks and paragraph indentations amongst other features. The template has a width of 980px and uses Helvetica Neue and Vollkorn fonts. You can customize and use this resource for web or interface design projects or simply as a learning material to see how it was designed. Here’s a full preview of the resource.

The Orange Blog Template Resource is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.

About the Designer: Scott Rollo is passionate about hand building beautiful interfaces, themes and resources with a focus upon quality and user customization.

Download

Today we are excited to release a new freebie resource. A professional and corporate website template. We are releasing this free resource in a fully layered PSD file. This stylish resource is offered kindly and exclusively on ahmadhania.com by our friend Michael John Burns. Download, full preview and more information after the jump.

This free corporate website template is called EMPOWER. The template is suitable to be used for any business website and it contains a header with main menu and call to action section, a slider with professional and stylish design, a products section, a content section with fully designed contact form and a simple footer. You can customize and use this resource for web or interface design projects or simply as a learning material to see how it was designed.

Here’s a full preview of the resource.

EMPOWER: Corporate Website Template is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.

About the Designer: Michael John Burns is a Graphic & Webdesigner from Philippines. Visit his page on D.A burnstudio and also you can follow him on Twitter.

Download

In web application when a developer wants to store anything for user to use it again, he thinks of two ways: one is the client side and the other is the server side. The server storage is a good solution if we think about large data but if we want our application to work offline there is no way to manipulate server data without using client side storage.

So, for small amount of data that needs to stay at the client side where poor solutions are present like cookies, userData – IE special object, Google gears. The last two are browser specific which means they will not work in any browser, while cookies work in all browsers it suffers from serious limitations like:

1. Small size, up to 4kb per cookie and 20 cookies accepted from a particular server or domain.
2. It may be cleaned by user.
3. Consumes bandwidth, because it is included in every request header.

Read Full Tutorial »

Today we are excited to release a new freebie resource. A simple, professional and minimal Product Viewer. We are releasing this free resource in a fully layered PSD file. This stylish resource is offered kindly and exclusively on ahmadhania.com by our friend Lewis Bell. Download, full preview and more information after the jump.

This free Product Viewer resource has a very unique minimal style with filter side widget, product image preview, information panel, buttons with normal, hover and pressed states and an information tooltip all in a unique and compact design. You can customize and use this resource for web or interface design projects or simply as a learning material to see how it was designed.

Here’s a full preview of the resource.

The Product Viewer Resource is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.

About the Designer: Lewis Bell is an English designer, specializing in web and interface design, with a passion for user-friendliness and meeting high standards.

Download

Dribbble is show and tell for creatives. Designers, developers and other creatives share shots—small screenshots of the designs and applications they are working on. Dribbble is a great source for inspiration in web design, icon design, interface design and many others. In this article I compiled a list of 36 Delicious Icon designs that I found and like at Dribbble, the icons displayed here is all about food and drink icons that is designed with an eye on little details.

Here’s my account on Dribbble I’d appreciate it if you sent me an invitation: http://dribbble.com/ahmad_hania. If you are an icon designer and have some high quality icons that you would like it to be in the next article please contact me with the details of your icons.

Today we are excited to release a new freebie resource. A free Drop Image Uploader. We are releasing this free resource in a fully layered PSD file. This resource is offered kindly and exclusively on ahmadhania.com by our friend Scott Rollo. Download, full preview and more information after the jump.

The Drop Image Uploader resource is a unique twist on the traditional methods of uploading images to the internet; this sleek image uploader functions like a dropbox for users. Design includes intricate stich lines along with scale slider and a format ribbon. You can customize and use this resource for web or interface design projects or simply as a learning material to see how it was designed. Here’s a full preview of the resource.

The Drop Image Uploader Resource is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.

About the Designer: Scott Rollo is passionate about hand building beautiful interfaces, themes and resources with a focus upon quality and user customization.

Download

In this article you will learn how to convert THISandTHAT: Vintage Website Template from PSD to HTML in a detailed step-by-step tutorial. You will learn how to create this layout using CSS styles and some CSS3 styles. 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:

• THISandTHAT: Vintage Website Template [Free PSD]

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

Step 1 – Preparation

You will 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.5+, Chrome 8+, Opera 10, 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 freebie article, 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 repeatable background pattern image.
2. The layout has 4 main sections: header, intro, content and footer
3. The header, intro and footer sections each has a full page width with a repeatable background image.
4. The content section has a fixed width.

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>THIS and THAT: Free Vintage Website Template by Ahmad Hania Blog</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/style.css" rel="stylesheet" media="all" />
</head>
<body>
    <a name="top"></a>
    <div class="header">
        <div class="header_container">
            header goes here.
        </div>
    </div>
    <div class="intro">
        <div class="intro_container">
            intro content goes here.
        </div>
    </div>
    <div class="content">
        main content goes here.
    </div>
    <div class="footer">
        <div class="footer_container">
            footer content goes here.
        </div>
    </div>
</body>
</html>

Here we linked all the CSS style files in the header section. In the body we’ve added four main divisions each with a unique class name and some content inside. Now let’s add the general CSS styles as follows (all CSS should be added in style.css file):

body {
    color: #333;
    font-size: 13px;
    font-family: Arial;
    background: #f5f5ed url(../images/bg.jpg) repeat left top;
    text-shadow: 1px 1px 0px #fff;
}

    body.alternate_bg {
        background: #f5f5ed url(../images/alternate_bg.jpg) repeat;
    }

*::-moz-selection {
    background: #e53d32 none repeat scroll 0 0;
    color: #fff;
}

*::selection {
    background: #e53d32 none repeat scroll 0 0;
    color: #fff;
}

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

a:hover {
    text-decoration: overline underline;
}

a:visited {
    opacity: 0.5;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
    filter: alpha(opacity=50);
}

p {
    text-align: justify;
    line-height: 15.2px;
    padding: 5px 0;
    margin: 0 0 5px 0;
}

h1, h2, h3, h4, h5, h6, ul, ol {
    font-family: Lucida Fax;
    margin-bottom: 10px;
    font-weight: normal;
}

    h2 {
        font-size: 34px;
        line-height: 34px;
        margin-bottom: 0px;
    }

img {
    border: 4px solid #edede3;
    display: block;
    margin: 0 auto;
}

    img.float_left, img.float_right {
        margin: 10px;
    }

We’ve added some general styles that will keep our template as we want. I’ve set font type, color, shadow and size in the body style along with a repeating background position. You should also notice that there’s another body class “alternate_bg” which only changes the repeating background to the alternate one you have in the PSD. Then we’ve added some other styles for selection, links, paragraphs, headers and images. Now let’s add the CSS style for our basic HTML structure.

.header {
    width: 100%;
    height: 80px;
    background: transparent url(../images/header_bg.png) repeat-x top;
    overflow: hidden;
    position: relative;
    z-index: 4;
}

    .header .header_container {
        width: 980px;
        margin: 0 auto;
        height: 80px;
    }

.intro {
    background: #fff url(../images/intro_bg.jpg) repeat-x top;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 186px;
    margin: -17px 0 0 0;
}

    .intro .intro_container {
        width: 980px;
        height: 186px;
        margin: 0 auto;
    }

.content {
    width: 980px;
    margin: 0 auto;
    margin-top: 20px;
    overflow: hidden;
}

.footer {
    width: 100%;
    height: 300px;
    background: #323232 url(../images/footer_bg.jpg) repeat-x top;
    overflow: hidden;
}

    .footer .footer_container {
        width: 980px;
        height: 300px;
        overflow: hidden;
        margin: 0 auto;
        padding: 40px 0 0 0;
        color: #fff;
        font-size: 12px;
        line-height: 14px;
        text-shadow: 0 0 0 #333;
    }

Let’s start with the header class name which is styled with full width, fixed height, a horizontally repeating background image, overflow set to hidden, position set to relative so we can use and apply z-index which is set to 4. The header_container has a fixed width and height with margins “0 auto” to center it horizontally in the page. The intro class name is styled with a repeating background image, relative position, z-index set to 1, full page width, fixed height and a top margin of -17px. The intro_container class name has the same style as the header container with height value changed, this also applies for the content class name with an added overflow set to hidden. The footer class name is styled with full page width, fixed height, a horizontally repeating background image and overflow set to hidden. Finally, the footer_container class has same styles as other containers but height value is changed, overflow set to hidden, top padding of 40px, font size set to 12px, line height set to 14px and text shadow is switched off. The result should be the same as the image below.

Step 4 – Adding and Styling Header Content

Now, that we have a basic HTML layout we can start by filling the main divisions with the content we want. The header content is added inside the division with class name header_container. Basically, it’s an <h1> tag with link inside it with is used for the logo, an unordered list which will display the main menu and a division with links which will hold the social icons. Here’s the HTML markup for the header division.

<div class="header">
    <div class="header_container">
        <h1 class="logo">
            <a href="#" title="THIS and THAT: Free Vintage Website Template by Ahmad Hania Blog">THIS and THAT</a>
        </h1>
        <ul class="main_menu">
            <li><a href="#" title="Portfolio">Portfolio</a></li>
            <li><a href="#" title="About">About</a></li>
            <li><a href="#" title="Contact">Contact</a></li>
            <li><a href="#" title="Blog">Blog</a></li>
        </ul>
        <div class="social_icons">
            <a href="#" title="Twitter" class="twitter">Twitter Profile</a>
            <a href="#" title="Facebook" class="facebook">Facebook Profile</a>
        </div>
    </div>
</div>

Now, we need to add the CSS styles for the header content. Here’s the CSS code.

.header .header_container h1.logo {
    text-indent: -10000px;
    float: left;
    width: 165px;
    height: 30px;
    background: url(../images/logo.png) no-repeat center center;
    margin: 20px 0 0 0;
}

    .header .header_container h1.logo a {
        display: block;
    }

.header .header_container ul.main_menu {
    float: left;
    margin: 22px 0 0 40px;
    padding: 0 3px 3px 0;
    overflow: hidden;
}

    .header .header_container ul.main_menu li {
        font-size: 14px;
        font-weight: bold;
        font-style: italic;
        font-family: Arial;
        text-transform: uppercase;
        list-style: none;
        margin: 0 0 0 10px;
        float: left;
    }

        .header .header_container ul.main_menu li a {
            color: #fff;
            text-shadow: 1px 1px 1px #d33b30;
            text-decoration: none;
            display: block;
            padding: 2px 10px;
        }

            .header .header_container ul.main_menu li a:hover,
            .header .header_container ul.main_menu li a.selected {
                background-color: #d72f26;
                -moz-box-shadow: 1px 1px 2px #f7968f;
                -webkit-box-shadow: 1px 1px 2px #f7968f;
                box-shadow: 1px 1px 2px #f7968f;
                -moz-border-radius: 12px;
                -webkit-border-radius: 12px;
                border-radius: 12px;
                background-image: linear-gradient(top, #d72f26, #d93228);
            }

    .header .header_container .social_icons {
        float: right;
        width: 56px;
        height: 24px;
        background-color: #d72f26;
        -moz-box-shadow: 1px 1px 2px #f7968f;
        -webkit-box-shadow: 1px 1px 2px #f7968f;
        box-shadow: 1px 1px 2px #f7968f;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        border-radius: 12px;
        margin: 22px 14px 0 0;
        background-image: linear-gradient(top, #d72f26, #d93228);
    }

        .header .header_container .social_icons a {
            text-indent: -10000px;
            width: 14px;
            height: 17px;
            float: left;
            margin: 5px 5px 0 15px;
        }

            .header .header_container .social_icons a.twitter {
                background: url(../images/twitter.png) no-repeat center center;
            }

            .header .header_container .social_icons a.facebook {
                background: url(../images/facebook.png) no-repeat center center;
                margin-left: 0px;
                margin-right: 0px;
            }

The h1 with class name logo is styled with text indent set to -10000px which will hide the text when the page is displayed but will be available for search engines to find it which will benefit your SEO, float set to left, fixed height and width to match the logo dimensions, a non repeating background for the logo and a top margin of 20px. For the link inside h1 we simply set display to block to take all the logo space.

The main_menu class or unordered list is styled with float set to left, a top and left margins, right and bottom margins and overflow set to hidden. for the main menu list items we set font size, weight, style and font type then we set text transform to uppercase, list style to none, a left margin to make horizontal space between menu items and float to left. We then set the links styles for the normal, hover and selected states. We’ve added text shadow some padding for the normal state. Set box shadow, rounded corners and gradient background styles for hover and selected states.

The social_icons class is style with float set to right, fixed height and width, background color set to #D72F26, box shadow, border radius and gradient background similar to the one’s we used in the main menu links with a fixed top and right margins. Now the links is styled with negative text indent value, fixed width and height, float to left and some margins for spacing between icons. To add the icon images we’ve added a unique class name for each social icon with its relative icon image as background.

The result should be as the image below.

Step 5 – Adding and Styling Intro Content

Now, let’s add the HTML markup for the Intro content. This will be added inside the division with class name intro_container and it consists of two divisions one with class name ribbon and the other with class name intro_content with an h2 inside and some paragraph with text.

<div class="intro">
    <div class="intro_container">
        <div class="ribbon">Huge Savings</div>
        <div class="intro_content">
            <h2>
                Hello
            </h2>
            <p class="italic">
                “ Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus, a tincidunt metus interdum id. Maecenas suscipit sapien in erat consequat sed vestibulum velit ornare. ”  <a href="#" class="no_decoration normal">- Lorem</a>
            </p>
        </div>
    </div>
</div>

Now, let’s add the CSS code to style the intro content.

.intro .intro_container .ribbon {
    width: 89px;
    height: 162px;
    background: url(../images/ribbon.png) no-repeat center top;
    display: block;
    float: right;
    text-indent: -10000px;
}

.intro .intro_container .intro_content {
    padding: 65px 119px 0 0;
}

The above CSS code simply sets the ribbon style to fixed height and width, a non repeating background image, display set to block, float to right and negative text indent to hide text. The intro_content is style with some padding from top and right. The result should be as the image below.

Step 6 – Adding Main Content Markup and Style

Now, before adding the markup for the content you may think that it is complicated but it isn’t. It consists of some divisions with class name either one_column or two_column which is obvious what they do from their names and each division has image, links or other normal HTML markup and content.

<div class="content">
    <div class="one_column">
        <h2>Projects</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus.
            <br /><br />
A tincidunt metus interdum id. <a href="#">Maecenas</a> suscipit sapien in erat consequat sed vestibulum velit of this
rnare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus ipsum dolor sit amet.
        </p>
    </div>
    <div class="two_columns no_margin">
        <div class="thumb_link">
            <a href="#">
                <img src="images/image1.jpg" alt="" />
            </a>
            <a href="#" class="full_preview" title="Full Preview">Full Preview</a>
            <span class="image_ribbon">
                <span class="title">title here</span>
            </span>
        </div>
    </div>
    <div class="clear"></div>
    <div class="one_column">
        <div class="thumb_link margin">
            <a href="#">
                <img src="images/image2.jpg" alt="" />
            </a>
            <span class="image_ribbon">
                <span class="title">title here</span>
            </span>
        </div>
        <h2>Column</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus.
            <br /><br />
A tincidunt metus interdum id. Maecenas suscipit sapien in erat consequat sed vestibulum velit of this
rnare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit lorem psum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus ipsum dolor sit .
        </p>
    </div>
    <div class="one_column">
        <div class="thumb_link margin">
            <a href="#">
                <img src="images/image3.jpg" alt="" />
            </a>
            <span class="image_ribbon">
                <span class="title">title here</span>
            </span>
        </div>
        <h2>Column</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus.
            <br /><br />
A tincidunt metus interdum id. Maecenas suscipit sapien in erat consequat sed vestibulum velit of this
rnare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit lorem psum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus ipsum dolor sit .
        </p>
    </div>
    <div class="one_column no_margin">
        <div class="thumb_link margin">
            <a href="#">
                <img src="images/image4.jpg" alt="" />
            </a>
            <span class="image_ribbon">
                <span class="title">title here</span>
            </span>
        </div>
        <h2>Column</h2>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus.
            <br /><br />
A tincidunt metus interdum id. Maecenas suscipit sapien in erat consequat sed vestibulum velit of this
rnare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit lorem psum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus ipsum dolor sit .
        </p>
    </div>
    <div class="clear"></div>
    <div class="one_column no_background">
        <div class="thumb_link">
            <a href="#">
                <img src="images/image5.jpg" alt="" />
            </a>
            <a href="#" class="full_preview" title="Full Preview">Full Preview</a>
            <span class="image_ribbon">
                <span class="title">title here</span>
            </span>
        </div>
    </div>
    <div class="two_columns no_margin no_background">
        <h2>News</h2>
        <p>
            A tincidunt metus interdum id. <a href="#">Maecenas</a> suscipit sapien in erat consequat sed vestibulum velit of this rnare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus.
            <br /><br />
Sapien in erat consequat sed vestibulum velit of this rnare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus ipsum dolor sit amet  erat consequat sed.
        </p>
    </div>
    <div class="clear"></div>
    <div class="one_column no_background">
        <div class="thumb_link">
            <a href="#">
                <img src="images/image6.jpg" alt="" />
            </a>
            <a href="#" class="full_preview" title="Full Preview">Full Preview</a>
            <span class="image_ribbon">
                <span class="title">title here</span>
            </span>
        </div>
    </div>
    <div class="two_columns no_margin no_background">
        <h2>News</h2>
        <p>
            A tincidunt metus interdum id. <a href="#">Maecenas</a> suscipit sapien in erat consequat sed vestibulum velit of this rnare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus ipsum dolor sit amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus.
            <br /><br />
Sapien in erat consequat sed vestibulum velit of this rnare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus ipsum dolor sit amet  erat consequat sed.
        </p>
    </div>
    <div class="clear"></div>
    <a href="#top" class="to_top">• Back to top</a>
</div>

Now, to make believe that the content is very simple let’s add the CSS styles which isn’t complicated.

.content .one_column {
    float: left;
    margin: 0 40px 0 0;
    padding: 30px 0 30px 0;
    width: 300px;
    background: url(../images/sep.png) repeat-x bottom;
}

    .content .one_column.no_margin {
        margin: 0px;
    }

    .content .one_column.no_background {
        background: transparent none;
    }

.content .two_columns {
    float: left;
    margin: 0 40px 0 0;
    padding: 30px 0 30px 0;
    width: 640px;
    background: url(../images/sep.png) repeat-x bottom;
}

    .content .two_columns.no_margin {
        margin: 0px;
    }

    .content .two_columns.no_background {
        background: transparent none;
    }

.content .thumb_link {
    position: relative;
    display: block;
    color: #fff;
}

    .content .thumb_link.margin {
        margin-bottom: 15px;
    }

    .content .thumb_link .full_preview {
        width: 20px;
        height: 20px;
        text-indent: -10000px;
        background: url(../images/full_preview.png) no-repeat center center;
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .content .thumb_link .image_ribbon {
        position: absolute;
        left: 4px;
        bottom: 11px;
        height: 22px;
        line-height: 19px;
        padding: 0 17px 0 0;
        margin: 0 0 0 0;
        font-size: 10px;
        text-transform: uppercase;
        font-weight: bold;
        font-style: italic;
        text-shadow: 1px 1px 0px #c9362d;
        background: url(../images/img_ribbon_e.png) no-repeat top right;
    }

        .content .thumb_link .image_ribbon .title {
            background: url(../images/img_ribbon_b.png) repeat-x top;
            display: block;
            padding: 0 7px 0 7px;
        }

.content .to_top {
    float: right;
    margin: 10px 0;
    font-size: 12px;
}

The CSS code simply defines the style for one_column and two_column classes along with no margin or no background for each class, thumbnails and image styles to make the ribbons appear on the images and finally some style for back to the top link. Now, let’s dig a little more in details.

The one_column class is styled with floating to left, right margin,  top and bottom padding, fixed width and a background image to represent the separator. The two_column class has the same style as one_column with a different width value.

Now, you should notice that images has a “plus” icon in the top right corner and a ribbon that contains some information text. To style this we placed the image, the “plus” icon [or as I called it full_preview] and image_ribbon inside a division with class name thumb_link. This class is styled with position set to relative, display to block and font color set to white. The full_preview class is styled with fixed height and width, negative text indent, background image for the plus icon, position set to absolute which will relative to the parent thumb_link, 10px from top and right. The image_ribbon class is styled with relative position, 4px from the left, 11px from bottom, fixed height and line height, left padding, zero margins, some font styles and text shadow with a background image for the ribbon end cut. The title class is styled with a horizontally repeating background image to complete the ribbon look with left and right padding. Finally, the back to top link is styled with floating to right, top and bottom margins and 12px font size. Now our layout should look like this.

Step 7 – Adding and Styling Footer Content

Now, let’s add the HTML markup for the footer content which will be added inside footer_container division.

<div class="footer">
    <div class="footer_container">
        <div class="column">
            <h3>About us</h3>
            <p>
                Lorem ipsum dolor sit amet, consectetur elit. In suscipit accumsan <a href="#">adipiscing</a> ipsum at faucibus. Nunc vel eros orci. Vivamus dictum congue metus.
                <br /><br />
A tincidunt metus interdum id. Maecenas suscipit sapien in erat consequat sed vestibulum velit of this
rnare. Lorem ipsum dolor sit amet, <a href="#">consectetur</a> adipiscing elit. In suscipit accumsan ipsum at faucibus. vel eros orci. Vivamus dictum congue metus ipsum dolor sit .
            </p>
        </div>
        <div class="column">
            <h3>Latest tweets</h3>
            <ul>
                <li>Lorem ipsum dolor sit amet, consectetur #<a href="#">adipiscing</a>. In suscipit accumsan ipsum at faucibus. - <span class="underline">13 hours ago</span></li>
                <li>@<a href="#">Maecenas</a> suscipit sapien in erat consequat sed vestibulum velit of this amet elit metus sapien rnare. Lorem ipsum dolor sit amet. . - <span class="underline">21 hours ago</span></li>
                <li>Nare. Lorem, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. - <span class="underline">2 days ago</span></li>
            </ul>
        </div>
        <div class="column no_margin">
            <h3>Next events</h3>
            <div class="event">
                <div class="date">
                    <span class="day">21</span>
                    <span class="month">jun</span>
                </div>
                <p>Lorem ipsum dolor amet sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci.</p>
            </div>
            <div class="event">
                <div class="date">
                    <span class="day">16</span>
                    <span class="month">apr</span>
                </div>
                <p>Lorem ipsum dolor amet sit amet, consectetur adipiscing elit. In suscipit accumsan ipsum at faucibus. Nunc vel eros orci.</p>
            </div>
        </div>
        <div class="clear"></div>
        <p class="copyright">
            © 2011 All Copyrights reserved to <a href="http://www.ahmadhania.com" title="Ahmad Hania Blog - Design, Development & Inspiration Articles" rel="Bookmark">Ahmad Hania Blog</a>, designed by <a href="http://www.tutegate.net/">Scott Rollo</a>.
        </p>
    </div>
</div>

We simply added three divisions with class name column with some content inside with a clear division after them and a copyrights paragraph. Now let’s add the CSS style for the footer content.

.footer .footer_container h3 {
    font-size: 24px;
}

.footer .footer_container .column {
    width: 300px;
    float: left;
    margin: 0 40px 0 0;
}

    .footer .footer_container .column.no_margin {
        margin: 0px;
    }

.footer .footer_container ul {
    list-style-position: inside;
}

    .footer .footer_container li {
        font-style: italic;
        font-family: Arial;
        text-align: justify;
        border-bottom: 1px dashed #515151;
        margin: 0 0 5px 0;
        padding: 0 0 5px 0;
    }

    .footer .footer_container li:last-child {
        border: 0 none;
    }

.footer .footer_container .event {
    display: block;
    border-bottom: 1px dashed #515151;
    margin: 0 0 5px 0;
    padding: 0 0 5px 0;
    overflow: hidden;
}

    .footer .footer_container .event:last-child {
        border: 0 none;
    }

    .footer .footer_container .event .date {
        float: left;
        margin: 3px 5px 0 0;
        width: 40px;
        text-align: right;
    }

        .footer .footer_container .event .date .day {
            color: #e53e32;
            font-size: 31px;
            line-height: 31px;
            font-family: Lucida Fax;
            display: block;
            margin: 0 auto;
        }

        .footer .footer_container .event .date .month {
            font-size: 14px;
            line-height: 14px;
            font-family: Lucida Fax;
            letter-spacing: 3px;
            display: block;
            margin: 0 auto;
            text-transform: uppercase;
        }

    .footer .footer_container .event p {
        float: left;
        width: 255px;
    }

.footer .footer_container p.copyright {
    text-align: center;
    margin: 30px 0 0 0;
}

The column class is styled with fixed width, float to left, and a right margin of 40px. Then we added some styles for the list items inside the footer. Now to style the events inside the third column we start by styling the event class with bottom border, equal bottom margin and padding, block display and overflow set to hidden. The last-child pseudo is used to hide the border at last event. Now we set the date class style with floating to left, top and right margin, fixed width and text align set to right. For the day and month classes we set some font, text and letter styles to make them look exactly as in the PSD. Finally, we style the paragraphs inside the events and the copyright paragraph.

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 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 in comments below.

DemoDownload

Today we are excited to release a new freebie resource. A free Search Tooltip. We are releasing this free resource in a fully layered PSD file. This resource is offered kindly and exclusively on ahmadhania.com by our friend Scott Rollo. Download, full preview and more information after the jump.

The Search Tooltip resource is designed to be attractive, efficient and stylish with a dark interface. It includes a search text field, search button and suggestion list all in a compact container. You can customize and use this resource for web or interface design projects or simply as a learning material to see how it was designed.

Here’s a full preview of the resource.

The Search Tooltip Resource is licensed under the Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.

About the Designer: Scott Rollo is passionate about hand building beautiful interfaces, themes and resources with a focus upon quality and user customization.

Download

Typography is the art and technique of arranging type. The arrangement of type involves the selection of typefaces, point size, line length, leading (line spacing), adjusting the spaces between groups of letters (tracking) and adjusting the space between pairs of letters (kerning).
Typography in web design is one of the main factors to make web design beautiful, professional and attractive. Websites usually communicate with visitors using text and this is where typography comes into play as an important factor for visual communication. For that typography can either make or break web design overall feel. In this article I compiled a list of 35+ websites that puts good use of typography.

Links are listed in no specific order. If you are a website designer and designed a software or App website please be kind and share it in comments.