In my last post, “Tutorial: Take your minimalist web design from Photoshop to HTML,” we started work on splitting up the PSD file and created background images for the HTML page and then started our foundation HTML code (index.html) and some styles to establish the different sections (styles.css). Our initial styles set the main, container, header, left sidebar column, and right sidebar column, which also includes the feature content sections for an image and two feature articles. The download contains all the files utilized in this demonstration.
Adding styles and building the HTML
Picking up where we left off in the previous piece, we will start with adding in more styles for the remaining images, adding in the content text and linking for the navigation section, titles for the featured article sections, and feature content. Figure A shows how our index.html file looks at this point, as rendered in Chrome 17.0.9:
Figure A
Let’s start with adding in the header image to the top left of the header section. To enable the image to be viewed, we will add in several lines of styles to the styles.css file, and we will add some textual content to the index.html file as well. I’ve kept the solid 1 pixel red border for now, but it will be removed as we move through the tutorial. The headername.gif file is called as a background-image as a URL, the height is set at 100px, the margin-top is set to 50px, the font-family, size and color are set to Tahoma, 14px, and #4b6262 respectively, and then a top padding of 18px and left padding of 15px rounds out the styling code additions to the styles.css file, which are displayed below:
Header styles:
#header {
border:1px solid red;
background-image:url(images/headername.gif);
background-repeat:no-repeat;
height:100px;
margin-top:50px;
font-family:Tahoma, Geneva, sans-serif;
font-size:14px;
font-weight:normal;
color:#4b6262;
padding-top:18px;
padding-left:15px;
}
The HTML code added to the header of the index.html file:
<header id="header">
<h1>The sub-heading slogan or catch phrase</h1>
</header>
Figure B shows the updates above as rendered in Chrome 17.0.9:
Figure B
Next, we will create our search bar and submit button for the final piece of the header section. Before we start with the code, we will need to capture the submit button arrow that we created in the original PSD file (see download). Using the same procedures as in the first segment of the tutorial, we will open the PSD file in Photoshop and make the button layers the only visible layers, crop to fit the arrow and gradient, size it to around 50×35 pixels, and then save it as a web-ready gif and name it search_button.gif, saving into the web images directory:
Figure C
The code for the search bar includes several CSS3 additions for gradients, border radius, box shadow, and backgrounds; the updates to the styles.css file are displayed below:
/* Search Form Styles */
#form {
margin-left:700px;
}
.search {
display: inline-block;
zoom: 1; /* display:inline-block for IE7 */
*display: inline;
border: solid 1px #d2d2d2;
padding: 1px 1px;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);
-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #b9c7c7;
background: -webkit-gradient(linear, left top, left bottom, from(#b9c7c7), to(#ededed));
background: -moz-linear-gradient(top, #b9c7c7, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b9c7c7', endColorstr='#ededed'); /* ie7 */
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b9c7c7', endColorstr='#ededed'); /* ie8 */
}
.search input {
font-family:Tahoma, Geneva, sans-serif;
font-size:22px;
color:#e0e9e9;
}
.search .field {
background: #b9c7c7;
padding: 0px 2px 3px 12px;
width: 190px;
border: solid 1px #bcbbbb;
outline: none;
-webkit-border-radius: 7px;
-moz-border-radius: 7p;
border-radius: 7px;
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.search .button {
margin-bottom:-10px;
}
And the HTML <form> section and code is added to the header section just below the <h1> sub-title in the index.html file as displayed below:
<section id="form">
<form class="search">
<input class="field" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />
<input class="button" value="" type="image" src="images/search_button.gif"/>
</form>
</section>
Figure D shows the resulting header section as displayed in Chrome 17.0.9:
Figure D
The search functionality included in the <form> for this tutorial is for demonstration purposes only, and will not actually be a working search. (A database back end connection would need to be implemented for searchable content results. )
Next, we will add in the styling and HTML for the left navigation sidebar with the “About”, “Blog”, “Products”, “Services”, and “Contact” textual content. All hyperlinks will point to “dummy” pages to keep this tutorial moving along; however, should you want to link to actual sub-pages all you need to do is use the final index.html file as a template, and rename them as necessary for the remaining pages. First the HTML for the navigation is set into an unordered list and is the only code added to the left sidebar section as displayed below:
<section id="main_content">
<section id="left_sidebar">
<ul>
<li><a href="#">About</a></li><br />
<li><a href="#">Blog</a></li><br />
<li><a href="#">Products</a></li><br />
<li><a href="#">Services</a></li><br />
<li><a href="#">Contact</a></li>
</ul>
</section>
And the CSS styling is added to the left sidebar for anchor and list items, and with one modification to the margin set to -35px for alignment.
#left_sidebar {
margin-top:10px;
margin-left:-35px;
float:left;
top:0;
left:0;
width:200px;
min-height:750px;
overflow:auto;
padding-left:5px;
padding-right:5px;
}
#left_sidebar a, li {
font-family:Tahoma, Geneva, sans-serif;
font-size:22px;
font-style:normal;
font-weight:600;
color:#4b6262;
text-decoration:none;
list-style:none;
}
Figure E shows the resulting updates for the navigation section as rendered in Chrome 17.0.9:
Figure E
Next, we will add in the styling for our featured content areas which are separated into the left and right sub-sections within the right column section and just below the feature image. The styling additions to the right column includes font and some CSS3 text shadow effect for the feature titles and a separate font styling for the feature article, the additional styles which were added to the style.css file are displayed below:
#right_column .feature_title {
font-family:Tahoma, Geneva, sans-serif;
font-size:22px;
font-weight:500;
color:#1f2626;
margin-top:-5px;
text-shadow: 2px 1px 2px #656e6e;
filter: dropshadow(color=#656e6e, offx=2, offy=1);
}
#right_column .feature_article {
font-family:Verdana, Geneva, sans-serif;
font-size:14;
font-weight:normal;
}
The HTML code added to the index.html file is displayed below:
<article id="left_feature">
<p class="feature_title">Featured Content Title 1</p>
<p class="feature_article">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</article>
<article id="right_feature">
<p class="feature_title">Featured Content Title 2</p>
<p class="feature_article">"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
</article>
Figure F shows the result with the feature article sections as displayed in Chrome 17.0.9:
Figure F
Figure G shows the web page as it stands with the latest HTML and CSS styles added and with the red borders removed from the header and container sections, but the footer section’s red border remains to differentiate it from the sections that have been converted.
Figure G
The third and final segment of the Minimalist PSD to HTML tutorial series will conclude with adding in the footer section, including creating a CSS3-styled gradient.
