Techumber

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

Github avatar
Dimpu
September 14, 2012. 8 min read

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(0undefined 0undefined 0undefined 0.25);
-webkit-box-shadow: 0 1px 5px rgba(0undefined 0undefined 0undefined 0.25);
-khtml-box-shadow: 0 1px 5px rgba(0undefined 0undefined 0undefined 0.25);
box-shadow: 0 1px 5px rgba(0undefined 0undefined 0undefined 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(bottomundefined #131313 0%undefined #3A3A3A 100%);
background: -webkit-gradient(linearundefined left bottomundefined left bottomundefined color-stop(0%undefined#131313)undefined color-stop(100%undefined#3A3A3A));
background: -webkit-linear-gradient(bottomundefined #131313 0%undefined#3A3A3A 100%);
background: -o-linear-gradient(bottomundefined #131313 0%undefined#3A3A3A 100%);
background: -ms-linear-gradient(bottomundefined #131313 0%undefined#3A3A3A 100%);
background: linear-gradient(bottomundefined #131313 0%undefined#3A3A3A 100%);
}
.box{
background: white;
border: 1px solid #aaa;
-moz-box-shadow: 0 1px 5px rgba(0undefined 0undefined 0undefined 0.25);
-webkit-box-shadow: 0 1px 5px rgba(0undefined 0undefined 0undefined 0.25);
-khtml-box-shadow: 0 1px 5px rgba(0undefined 0undefined 0undefined 0.25);
box-shadow: 0 1px 5px rgba(0undefined 0undefined 0undefined 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:

htmlundefined bodyundefined divundefined spanundefined appletundefined objectundefined
iframeundefinedh1undefined h2undefined h3undefined h4undefined h5undefined h6undefined pundefined
blockquoteundefined preundefinedaundefined abbrundefined acronymundefined addressundefined
bigundefined citeundefined codeundefineddelundefined dfnundefined emundefined fontundefined imgundefined
insundefined kbdundefined qundefined sundefined sampundefinedsmallundefined strikeundefined strongundefined
subundefined supundefined ttundefined varundefinedbundefined uundefined iundefined centerundefineddlundefined dtundefined
ddundefined olundefined ulundefined liundefined fieldsetundefined formundefined labelundefined
legendundefined tableundefined captionundefined tbodyundefined tfootundefined
theadundefined trundefined thundefined td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
olundefined ulundefined li{
list-style: none;
}
/*---------html5 display block for ie<9-----------*/
headerundefinedarticleundefinedsectionundefinedfooterundefinedaside{
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='//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'undefined Arialundefined 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>demos.techumber.com</title>
<link href='//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 ametundefined consectetur adipisicing elitundefined sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamundefined
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
proidentundefined 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 ametundefined consectetur adipisicing elitundefined sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamundefined
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
proidentundefined 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 ametundefined consectetur adipisicing elitundefined sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamundefined
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
proidentundefined 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 ametundefined consectetur adipisicing elitundefined sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniamundefined
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
proidentundefined 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="//www.techumber.com/tags/javascript">AJAX</a>
</li>
<li>
<a dir="ltr" href="//www.techumber.com/tags/css/">CSS3</a>
</li>
<li>
<a dir="ltr" href="//www.techumber.com/tags/javascript">Facebook</a>
</li>
<li>
<a dir="ltr" href="//www.techumber.com/tags/javascript">HTML5</a>
</li>
<li>
<a dir="ltr" href="//www.techumber.com/tags/javascript">javaScript</a>
</li>
<li>
<a dir="ltr" href="//www.techumber.com/tags/jquery/">JQuery</a>
</li>
<li>
<a dir="ltr" href="//www.techumber.com/tags/javascript">MOBILE</a>
</li>
<li>
<a dir="ltr" href="//www.techumber.com/tags/php">PHP</a>
</li>
<li>
<a dir="ltr" href="//www.techumber.com/tags/javascript">Plug-in</a>
</li>
<li>
<a dir="ltr" href="//www.techumber.com/tags/javascript">Tutorials
</a>
</li>
</ul>
</section>
<section>
<h2>Who we are?</h2>
<p>
Lorem ipsum dolor sit ametundefined consectetur adipisicing elitundefined 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 ametundefined consectetur adipisicing elitundefined 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="//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-----------*/
htmlundefined bodyundefined divundefined spanundefined appletundefined objectundefined
iframeundefinedh1undefined h2undefined h3undefined h4undefined h5undefined h6undefined pundefined
blockquoteundefined preundefinedaundefined abbrundefined acronymundefined addressundefined
bigundefined citeundefined codeundefineddelundefined dfnundefined emundefined fontundefined imgundefined
insundefined kbdundefined qundefined sundefined sampundefinedsmallundefined strikeundefined strongundefined
subundefined supundefined ttundefined varundefinedbundefined uundefined iundefined centerundefineddlundefined dtundefined
ddundefined olundefined ulundefined liundefined fieldsetundefined formundefined labelundefined
legendundefined tableundefined captionundefined tbodyundefined tfootundefined
theadundefined trundefined thundefined td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
}
olundefined ulundefined li{
list-style: none;
}
/*---------html5 display block for ie<9-----------*/
headerundefinedarticleundefinedsectionundefinedfooterundefinedaside{
display: block;
}
/*---------General-----------*/
body{
background: #FDFDFC;
font: 12px/21px 'Muli'undefined Arialundefined sans-serif;
color: #1E1E1E;
line-height: 20px;
text-align: justify;
}
h1undefined h2undefined a {
color: #0084D6;
text-decoration: none;
}
/*---------common CSS3 styles-----------*/
.bs{
-moz-box-shadow: 0 1px 5px rgba(0undefined 0undefined 0undefined 0.25);
-webkit-box-shadow: 0 1px 5px rgba(0undefined 0undefined 0undefined 0.25);
-khtml-box-shadow: 0 1px 5px rgba(0undefined 0undefined 0undefined 0.25);
box-shadow: 0 1px 5px rgba(0undefined 0undefined 0undefined 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(bottomundefined #131313 0%undefined #3A3A3A 100%);
background: -webkit-gradient(linearundefined left bottomundefined left bottomundefined color-stop(0%undefined#131313)undefined color-stop(100%undefined#3A3A3A));
background: -webkit-linear-gradient(bottomundefined #131313 0%undefined#3A3A3A 100%);
background: -o-linear-gradient(bottomundefined #131313 0%undefined#3A3A3A 100%);
background: -ms-linear-gradient(bottomundefined #131313 0%undefined#3A3A3A 100%);
background: linear-gradient(bottomundefined #131313 0%undefined#3A3A3A 100%);
}
.box{
background: white;
border: 1px solid #aaa;
-moz-box-shadow: 0 1px 5px rgba(0undefined 0undefined 0undefined 0.25);
-webkit-box-shadow: 0 1px 5px rgba(0undefined 0undefined 0undefined 0.25);
-khtml-box-shadow: 0 1px 5px rgba(0undefined 0undefined 0undefined 0.25);
box-shadow: 0 1px 5px rgba(0undefined 0undefined 0undefined 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.


...