May 02
Coding a layout in HTML5 and CSS3
Posted by Benedikte Vanderweeën on 02/05/2010
Since several months, i’m reading - in between client work - about the HTML 5 and CSS 3 specifications. Many blog writers encourage web designers to implement - already - some of the new HTML 5 and CSS 3 features in their websites (progressive enhancement).
I'm trying out here a very simple example layout/mockup that I will code in HTML 5 and CSS 3 to have a snippet (code) that i can implement later on in my design code. I'm not implementing new HTML 5 elements like video, canvas, etc... I will only cover the layout and structure of a HTML 5 document. Here we go:
A simple design
I chose to make a really simple layout so I can use the basic setup of the page for other projects too.
Making a HTML structure
Before we can start writing html code, the lay-out is structured in :
- header > h1 for the introduction heading
- aside for the illustration background
- section > article > header > h2 for the title of the article
- section > article > p for the content of the article
- footer
Writing the html and css
The document structure with html5 elements
<!DOCTYPE HTML><html><head><meta charset="UTF-8" /><title>An example html5 document</title></head><body><header><h1>Title</h1></header><aside><p>illustration</p></aside><section><article><header><h2>Title</h2><p>content</p></header><p>content</p></article></section><footer><p>content</p></footer></body></html>
css for global html
/*Layout*/
html {
margin: 0;
padding: 0;
background: #eee9df url(../images/tile1.png) center top repeat;
}
css for body and specific html5 elements
body {
width: 940px;
margin: 0 auto;
font: 10pt/1.5em Helvetica,"Helvetica neue", Arial, sans-serif;
}
/*HTML 5 specific*/
header,section,article,aside,footer{
display: block;
}
css for header
h1 {
font: 32pt Helvetica,"Helvetica neue", Arial, sans-serif;
background: url(../images/header-bg.png) center top no-repeat;
text-align: center;
text-transform: uppercase;
color: #e5b7ad;
padding-top: 30px ;
text-shadow: 1px 1px 2px #fff;
}
css for aside
aside{
float: left;
width: 470px;
min-height: 480px;
background: url(../images/aside-bg.png) center top no-repeat;
margin: 0 0 20px 0;
}css for section and article
section{
float: right;
width: 428px;
padding-left: 20px;
margin: 0 0 20px 0px;
border-left: 2px dotted #b2a497;
}
section h2 {
font: 14pt Helvetica,"Helvetica neue", Arial, sans-serif;
font-weight: lighter;
text-transform: uppercase;
color: #493831;
padding-bottom: 10px;
margin: 0;
}
css for footer
footer{
clear:both !important;
width:940px;
height: 100px;
padding: 10px;
color:#200f08 ;
background:#ddd3bf;
/*Opacity*/
filter:alpha(opacity=50); /* msie */
-moz-opacity: 0.50; /* firefox 1.0 */
-khtml-opacity: 0.50; /* webkit */
opacity: 0.50; /* css 3 */
/*Gradient*/
background-image: -moz-linear-gradient(top, #ddd3bf, #bcae91); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #ddd3bf),color-stop(1, #bcae91)); /* Saf4+, Chrome *
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ddd3bf', EndColorStr='#bcae91'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ddd3bf', EndColorStr='#bcae91')"; /* IE8 */
/*Round corners*/
-moz-border-radius: 12px; /* FF1+ */
-webkit-border-radius: 12px; /* Saf3+, Chrome */
border-radius: 12px; /* Opera 10.5, IE 9 */
}
Implementing javascript
For all HTML5 elements to work in Internet Explorer, we use a javascript that will render the HTML5 elements This javascript was done by Remy Sharp. You can link to it directly from Google code. Visit his website: HTML 5 enabling script
Put this piece of code in the head of your document to link the javascript:
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
Browser testing
This webpage was successfully tested in:
Mozilla Firefox for Mac 3.6.3
Safari for Mac 4.0.5
Google Chrome for Mac 5.0.342.9
Further reading and resources:
HTML5
- Dive into HTML 5
- Ordered List: Structural tags in html 5
- HTML5 tag reference
Connect