Simple Web Design Using HTML5 And CSS3(part-2)

This is the continues part of the tutorial Simple Web Design Using HTML5 And CSS3 you can read the first part at Simple Web Design Using HTML5 And CSS3(part-1).
simple web desing tutorial using html5 and css3(part2)-techumber.com


demo

download

Final look:This how the final template look like. You can check out the demo above. simple web design using html5 and css3-final template(techumber.com) Note:Thought it is a html5 and css5 use the browser which supports them. Css3

.bs{ 
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); 
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); 
-khtml-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); 
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);  
} 
.br{ 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-khtml-border-radius: 5px; 
border-radius: 5px;  
} 
.black-gradient{ 
background: #222;  
background: -moz-linear-gradient(bottom, #131313 0%, #3A3A3A 100%);  
background: -webkit-gradient(linear, left bottom, left bottom, color-stop(0%,#131313), color-stop(100%,#3A3A3A));  
background: -webkit-linear-gradient(bottom, #131313 0%,#3A3A3A 100%);  
background: -o-linear-gradient(bottom, #131313 0%,#3A3A3A 100%);  
background: -ms-linear-gradient(bottom, #131313 0%,#3A3A3A 100%);  
background: linear-gradient(bottom, #131313 0%,#3A3A3A 100%);  
} 
.box{ 
background: white;  
border: 1px solid #aaa;  
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); 
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); 
-khtml-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); 
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);  
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-khtml-border-radius: 5px; 
border-radius: 5px;  
padding: 10px;  
padding-bottom: 3%;  
margin: 2% 2% 4% 2%;  
} 

Here I have created 4 classes.
.bs:This is for shadow effect for divs. .br:This is for rounded corners. .black-gradient:This is for gradient effect for header area. .box:This is very impotent class in our template. Actually this is the combination of .bs and .br class. Css reset code:

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, font, 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 {  
margin: 0;  
padding: 0;  
border: 0;  
outline: 0;  
} 
ol, ul, li{  
list-style: none;  
} 
/*---------html5 display block for ie<9-----------*/ 
header,article,section,footer,aside{  
display: block;  
} 

Generally every browser render tags in its own way. Web developer use this code for rendering the tags same in all browsers. Here i included html5 display block hack because by default IE render these tags in-line be using above code we can display it in block.
Typography:Here the Typography means the fonts and its properties we use in the web-design. Typography has a very key role in webdesign. It changes feel and look of the template to next level if we use correct font. Personally I don't like the default fonts. You can find very good fonts at Google fonts. In this template tutorial i will use my favorite font MuliTo use the font in your template just include the following code in your index.html between head tags.

<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'/> 

and change your body tag css as

body{  
background: #FDFDFC;  
font: 12px/21px 'Muli', Arial, sans-serif;  
color: #1E1E1E;  
line-height: 20px;  
text-align: justify;  
} 

Finally.
index.html

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
<title>demo.techumber.com</title>  
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'/>  
<link rel="stylesheet" href="css/style.css" />  
<!–[if lt IE 9]>  
<script src="js/html5shiv.js"></script>  
<![endif]–>  
</head>  
<body>  
<div id="wrapper" class="br bs">  
<header class="black-gradient">  
<h1>  
<a href="">SiteName</a>  
</h1>  
</header>  
<nav>  
<ul>  
<li><a href="#">Home</a></li>  
<li><a href="#">Blog</a></li>  
<li><a href="#">Portfolio</a></li>  
<li><a href="#">Contact</a></li>  
</ul>  
</nav>  
<div id="main">  
<article class="box">  
<h2><a href="">This is post title</a></h2>  
<p>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 <a href="#">read more..</a></P>  
</article>  
<article class="box">  
<h2><a href="">This is post title</a></h2>  
<p>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 <a href="#">read more..</a></P>  
</article>  
<article class="box">  
<h2><a href="">This is post title</a></h2>  
<p>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 <a href="#">read more..</a></P>  
</article>  
<article class="box">  
<h2><a href="">This is post title</a></h2>  
<p>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 <a href="#">read more..</a></P>  
</article>  
</div>  
<aside class="box">  
<section>  
<h2>Categories</h2>  
<ul class="cat">  
<li>  
<a dir="ltr" href="http://www.techumber.com/search/label/AJAX">AJAX</a>  
</li>  
<li>  
<a dir="ltr" href="http://www.techumber.com/search/label/CSS3">CSS3</a>  
</li>  
<li>  
<a dir="ltr" href="http://www.techumber.com/search/label/Facebook">Facebook</a>  
</li>  
<li>  
<a dir="ltr" href="http://www.techumber.com/search/label/HTML5">HTML5</a>  
</li>  
<li>  
<a dir="ltr" href="http://www.techumber.com/search/label/javaScript">javaScript</a>  
</li>  
<li>  
<a dir="ltr" href="http://www.techumber.com/search/label/JQuery">JQuery</a>  
</li>  
<li>  
<a dir="ltr" href="http://www.techumber.com/search/label/MOBILE">MOBILE</a>  
</li>  
<li>  
<a dir="ltr" href="http://www.techumber.com/search/label/PHP">PHP</a>  
</li>  
<li>  
<a dir="ltr" href="http://www.techumber.com/search/label/Plug-in">Plug-in</a>  
</li>  
<li>  
<a dir="ltr" href="http://www.techumber.com/search/label/Tutorials">Tutorials  
</a>  
</li>  
</ul>  
</section>  
<section>  
<h2>Who we are?</h2>  
<p>  
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
tempor incididunt ut labore et dolore magna aliqua <a href="">readmore....</a>  
</p>  
</section>  
<section>  
<h2>Sponcers</h2>  
<p>  
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod  
tempor incididunt ut labore et dolore magna aliqua <a href="">readmore....</a>  
</p>  
</section>  
</aside>  
<footer>  
<div class="copyright">© Copyright 2012 by <a href="http://techumber.com">  
Techumber.com</a>. All Rights Reserved.  
</div>  
</footer>  
</div>  
</body>  
</html> 

This is the complete markup of index.html. Only thing here is i added some text for look that's it.
style.css

/*---------CSS reset-----------*/ 
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, font, 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 {  
margin: 0;  
padding: 0;  
border: 0;  
outline: 0;  
} 
ol, ul, li{  
list-style: none;  
} 
/*---------html5 display block for ie<9-----------*/ 
header,article,section,footer,aside{  
display: block;  
} 
/*---------General-----------*/ 
body{  
background: #FDFDFC;  
font: 12px/21px 'Muli', Arial, sans-serif;  
color: #1E1E1E;  
line-height: 20px;  
text-align: justify;  
} 
h1, h2, a {  
color: #0084D6;  
text-decoration: none;  
} 
/*---------common CSS3 styles-----------*/ 
.bs{ 
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); 
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); 
-khtml-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); 
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);  
} 
.br{ 
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-khtml-border-radius: 5px; 
border-radius: 5px;  
} 
.black-gradient{ 
background: #222;  
background: -moz-linear-gradient(bottom, #131313 0%, #3A3A3A 100%);  
background: -webkit-gradient(linear, left bottom, left bottom, color-stop(0%,#131313), color-stop(100%,#3A3A3A));  
background: -webkit-linear-gradient(bottom, #131313 0%,#3A3A3A 100%);  
background: -o-linear-gradient(bottom, #131313 0%,#3A3A3A 100%);  
background: -ms-linear-gradient(bottom, #131313 0%,#3A3A3A 100%);  
background: linear-gradient(bottom, #131313 0%,#3A3A3A 100%);  
} 
.box{ 
background: white;  
border: 1px solid #aaa;  
-moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); 
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); 
-khtml-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); 
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25);  
-moz-border-radius: 5px; 
-webkit-border-radius: 5px; 
-khtml-border-radius: 5px; 
border-radius: 5px;  
padding: 10px;  
padding-bottom: 3%;  
margin: 2% 2% 4% 2%;  
} 
/*---------wrapper-----------*/ 
#wrapper{ 
margin: 0 auto;  
width: 960px;  
border: 1px solid #aaa;  
overflow: hidden;  
} 
/*---------header section-----------*/ 
header{  
background: #676767;  
height: 100px;  
} 
header h1{  
padding: 40px 0px 0px 12px;  
} 
header h1 a{ 

color: #fff;  
text-decoration: none; 

} 
/*---------navgation-----------*/ 
nav{  
background: #676767;  
height: 30px;  
} 
nav ul li{  
border-top: 3px solid #676767;  
float: left;  
margin-left: 10px;  
height: 27px;  
line-height: 27px;  
} 
nav ul li:hover{  
background: #3F3F3F;  
border-top: 3px solid #0084D6;  
color: white;  
} 
nav ul li a{ color: #fff;  
text-decoration: none;  
text-transform: uppercase;  
} 
/*---------main content area-----------*/ 
#main{ 
width: 66%;  
float: left;  
} 

/*---------sidebar-----------*/ 
aside{  
width: 27%;  
float: left;  
} 
aside section{  
margin-bottom: 20px;  
} 
aside section h2{ 

border-bottom: 1px solid #CCC; 

} 
ul.cat li a:hover{  
text-decoration: underline;  
} 
/*---------footer-----------*/ 
footer{  
background: #3F3F3F;  
border-top: 1px solid #484848;  
min-height: 50px;  
clear: both;  
color: #fff;  
} 
.copyright{ 
height: 50px;  
line-height: 50px;  
padding-left: 20px;  
} 
.copyright a{ 
color: #fff;  
text-decoration: underline;  
} 

That's it! Hope you enjoyed my work:)
Any doubts ask me.

Get posts by email

Like what you're reading? Get these posts delivered to your inbox.