The HTML5 monster has been knocking on the door of web design for a while now. It’s certainly an exciting progression with the variety of new features (video, canvas, etc) and structural elements (not just div, div, div anymore!). Despite this, the markup specification is still incomplete, with a completion date due in 2014. Because of this, many developers view it as something that shouldn’t be meddled with. I disagree, and when possible I think HTML5 should be explored. It’s the future, especially with work on XHTML 2.0 now being discontinued. As web designers we should always be prepared for changes in the industry.
The features and potential of HTML5 have been discussed many times online already, so what I’m hoping to do with this blog is explain how to begin developing with the markup right now. Why learn what it can do, without learning how to code and develop with it? So read on… I’ve even thrown a bit of CSS3 into the mix.
I’ll be explaining how to code up a fairly simple and generic web layout using HTML5, introducing you to many of the new structural elements along the way. I’ll also demonstrate how to make the template render correctly in older browsers that aren’t “supposed” to support HTML5. Even IE6 you say? Yes… even IE6.
Then finally, I’m hoping to produce a follow up blog on using this layout with CSS media queries. Or what many people know as responsive web design. Lets march onwards!
So, here’s a link (click the preview below) to the template that we’ll be making. You can even download it from our free templates section. Generous or what!
HTML
The Head
To begin, as always, create a new HTML file in the web editor of your choice. The first thing we need to do is declare the doctype…
<!DOCTYPE html>
Small, neat, and easy to remember. Who can argue with that!
The rest of the head is nothing revolutionary. We’ll be using an easy unicode charset, and a normal meta tag layout.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Tristar HTML 5 Template</title> <meta name="distribution" content="Global" /> <meta name="rating" content="Safe For Kids" /> <meta name="author" content="Jack, Tristar" /> <meta name="copyright" content="Tristar Web Design" /> <meta name="description" content="An awesome example of HTML5 template design, by Tristar." /> <meta name="keywords" content="html5,css3,this,is,just,an,example,really" /> <link rel="stylesheet" type="text/css" media="all" href="styles.css" /> <link href="favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" /> </head>
That is a functional HTML5 head layout. But it needs more if we’re going to stop it breaking in older browsers. Let me introduce you to some hacks fixes.
First we’ll include the big one. Remy Sharp has produced a Javascript fix that tells IE how to display this mysterious new markup that Microsoft didn’t pay much attention to. We’ll wrap it in a conditional comment so all non IE browsers ignore it. Many problems solved.
Then to follow on, we’ll include a second Javascript file that brings IE6, IE7, and IE8 to a much more modern standard. Both of these fixes are hosted on Google Code servers, so there’s no need to download any files!
And although it’s not a fix, I’ll also include some JS files taken from the Google Font Directory. This is my favourite CSS font loading method at the moment. The fonts will be referenced in the CSS markup.
So the final head looks like this…
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Tristar HTML 5 Template</title> <meta name="distribution" content="Global" /> <meta name="rating" content="Safe For Kids" /> <meta name="author" content="Jack, Tristar" /> <meta name="copyright" content="Tristar Web Design" /> <meta name="description" content="An awesome example of HTML5 template design, by Tristar." /> <meta name="keywords" content="html5,css3,this,is,just,an,example,really" /> <link rel="stylesheet" type="text/css" media="all" href="styles.css" /> <link href="favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" /> <link href='http://fonts.googleapis.com/css?family=Ubuntu:regular,bold' rel='stylesheet' type='text/css' /> <link href='http://fonts.googleapis.com/css?family=Vollkorn:regular,italic,bold' rel='stylesheet' type='text/css'> <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]--> </head>
A final note, to make your HTML5 validate you don’t actually need to follow the traditional XHTML syntax of self closing tags, lower case code, etc. I just continue to do so, as it ‘s cleaner code, and the forgiving nature of HTML shouldn’t make you lazy with your markup.
Lets Rock the Body
Header and Navigation
No longer is there any need for <div id=”header”></div> , instead we can use the new header tag, <header>. The incredibly useful resource that is W3Schools gives the following description for this tag – “The <header> tag specifies an introduction, or a group of navigation elements for the document.”
We can also add the navigation area using a <nav>. Remember, these two new tags don’t only have to be used for the main header/navigation at the top of the website. The header can be used multiple times, maybe to define the header of an article post, while the nav tag could also be used in navigation you have in the footer. If it fits the description, use it!
Last but not least, I’ve also used the new <hgroup> tag for the text title. This has an incredibly simple definition of…
“The hgroup element is used to group headers, <h1> to <h6> , where the largest is the main heading of the section, and the others are sub-headings.”
Perfect for a website title and slogan…
A main header wrap is required, as our background image needs to stretch to fit this window. Couple this with the usual way of building a listed navigation and an image link to our logo, and our header is laid out like this:
<div id="headerwrap">
<header id="mainheader" class="bodywidth"> <img src="images/logo.png" alt="Logo" class="logo" />
<hgroup id="websitetitle">
<h1><span class="bold">HTML5</span>Goodness</h1>
<h2>about as modern as it gets...</h2>
</hgroup>
<nav>
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About">About</a></li>
<li><a href="#" title="News">News</a></li>
<li><a href="#" title="Contact Us">Contact Us</a></li>
</ul>
</nav>
</header>
</div>
P.S. You may have spotted my header has a mysterious class called “bodywidth”. I’ll be using this on all main alignment divs to set a width and an auto margin, thus centering it in the page. I’m favouring this method as it works better with CSS media queries which we’ll be moving on to next week. By all means, use the “standard” div wrapping method if you prefer to. Both work well… honest.
The Introduction
If you studied the template we’re creating by visiting the link I added near the top, you’ll notice our main content is split into 4 grid-like squares. At the top left we have the website introduction. A quote/testimonial is sitting loud and proud at the top right. The bottom left area is the main body text (i.e. description of the company), while the bottom right has a column of news articles.
I began the introduction area by inserting an aside tag. This new arrival to HTML has gained a reputation for often being overused by developers, who aren’t quite sure of when and how to use it. Again, if we take a peek at W3Schools, they tell us that…
“The <aside> tag defines some content aside from the content it is placed in. The aside content should be related to the surrounding content.”
Our introduction is certainly aside from the content below, and as it is basically introducing the main body text, it’s definitely related! So after inserting the aside, a div is required to align the main introduction to the left, while I’ll use a classic HTML element for the testimonial area – <blockquote> . And yes, you can give a blockquote an ID.
<aside id="introduction" class="bodywidth">
<div id="introleft">
<h2>Welcome to <span class="blue">our website</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis molestie sapien. Proin elit quam, commodo ut aliquet vel, elementum ut odio. Praesent semper tincidunt magna, sed sagittis elit congue sed. Mauris malesuada, elit ut luctus tristique, lectus libero rutrum mauris, ac tristique.</p>
<p><a href="#" title="Find Out More" class="findoutmore">Find out more?</a></p>
</div>
<blockquote id="introquote">
<p>This company is amazing. I can't come up with enough good things to say. Literally. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum magna tortor.</p>
<p class="quotename">John Smith, <span class="bold">Another Company</span></p>
</blockquote>
</aside>
Main Content Area
Not gonna lie, the layout for the main body text is pretty dull. I can’t even bring you one bit of HTML5 revolution. Bad times! Still, if divs are the ideal structural element, make sure you use ‘em. I’ve seen some pretty filthy HTML5 templates lately that are packed full with sections and asides which is abusing the markup badly!
So, here’s the content markup. Excuse the “maincontent” div that’s still open, the news area is waiting to creep inside.
<div id="maincontent" class="bodywidth">
<div id="aboutleft">
<h3>Awesome Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis molestie sapien. Proin elit quam, commodo ut aliquet vel, elementum ut odio. Praesent semper tincidunt magna, sed sagittis elit congue sed. Mauris malesuada, elit ut luctus tristique, lectus libero rutrum mauris, ac tristique justo ligula sit amet metus.</p>
<p>Etiam a magna vitae diam elementum dignissim. Donec eget justo ut eros fermentum sodales. Donec eleifend sodales gravida. Nulla nulla metus, laoreet at consectetur sed, dapibus vitae felis. Donec venenatis laoreet purus vel hendrerit. Donec sit amet sem a metus bibendum gravida sit amet at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<h4>Another Awesome Title</h4>
<p>Maecenas eu purus ipsum, non accumsan metus. Mauris augue dui, condimentum quis aliquam non, tincidunt id tortor. Donec dignissim sem sed nisl luctus scelerisque. Cras lacinia aliquam orci ac ultricies. Vestibulum ac lacus eu nisi commodo sollicitudin. Curabitur at consectetur leo. Donec augue velit, ornare in fermentum quis, tristique id augue.</p>
<p>Cras sem est, luctus ac pharetra id, feugiat id enim. Nullam at massa felis, vitae hendrerit tellus. Sed placerat arcu sed risus commodo iaculis. Aenean at felis enim. Mauris eget est in diam sagittis ultrices sit amet eu mi. Sed ultrices, orci et tincidunt fringilla, diam diam consequat elit, vel tempus mauris mi vitae sem. Ut lectus est, commodo a pulvinar at, faucibus et ligula.</p>
</div>
News Articles Area
A certain HTML5 tag named <article> has arrived into the markup with a round of applause. One of the major online growths has been the (fairly) recent influx of blogs and news portals, and HTML5 seems to have appreciated that, as we can now create a perfect looking markup for a news page or blog post.
For my template, I’ve aligned the news area to the right using a <section> tag. Probably offering one of the most broad definitions in the HTML5 tag library, it’s ultimately become the most abused. W3Schools tells us that…
“The <section> tag defines sections in a document. Such as chapters, headers, footers, or any other sections of the document.”
Since each news post is a different section, <section> is perfect in this case to define them as a group.
As explained previously, I’ve then wrapped each news post in <article> tags. I’m not even going to bother bringing you a description for that one! Another fresh tag has also arrived – <figure> . The figure element “should be relevant to the main content, but if removed it should not affect the flow of the document”. So, I’ve used “figure” to define, position, and style the occupying image that each news article has. The images are relevant (well, maybe not on our template example…) to each article, but if deleted the articles would still be perfectly understandable.
The final touch for this area was to wrap each article title in header tags. Perfect…
<section id="articlesright">
<article>
<figure> <img src="images/articleimage.jpg" alt="Article Image" /> </figure>
<header><a href="#" title="Article Title"><h5>Random News Article</h5></a></header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis molestie sapien. Proin elit quam dolor amet...</p>
<a href="#" title="Read More" class="readmore">Read more</a> </article>
<article>
<figure> <img src="images/articleimage.jpg" alt="Article Image" /> </figure>
<header><a href="#" title="Article Title"><h5>Random News Article</h5></a></header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis molestie sapien. Proin elit quam dolor amet...</p>
<a href="#" title="Read More" class="readmore">Read more</a> </article>
<article>
<figure> <img src="images/articleimage.jpg" alt="Article Image" /> </figure>
<header><a href="#" title="Article Title"><h5>Random News Article</h5></a></header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis molestie sapien. Proin elit quam dolor amet...</p>
<a href="#" title="Read More" class="readmore">Read more</a> </article>
</section>
</div>
The Footer
So, the HTML is almost there guys, but we can’t forgot a certain area at the bottom of the template. You’ve probably second guessed that there’s a tag ready and waiting for the footer. Yes, time to insert a <footer> .
I’ve placed the footer inside a footer wrap div (not unlike the header), to get that stretched out background once again. A <nav> block has also been thrown into the template for a second time (footer navigation is always useful). As mentioned previously, don’t forget that a footer doesn’t need to refer to the far bottom of your web page – sidebars can have footers, articles can have footers, and so can many other things.
Well, that completes the HTML. Here’s the full markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tristar HTML 5 Template</title>
<meta name="distribution" content="Global" />
<meta name="rating" content="Safe For Kids" />
<meta name="author" content="Jack, Tristar" />
<meta name="copyright" content="Tristar Web Design" />
<meta name="description" content="An awesome example of HTML5 template design, by Tristar." />
<meta name="keywords" content="html5,css3,this,is,just,an,example,really" />
<link rel="stylesheet" type="text/css" media="all" href="styles.css" />
<link href="favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon" />
<link href='http://fonts.googleapis.com/css?family=Ubuntu:regular,bold' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Vollkorn:regular,italic,bold' rel='stylesheet' type='text/css'>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lt IE 9]><script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script><![endif]-->
</head>
<body>
<div id="headerwrap">
<header id="mainheader" class="bodywidth"> <img src="images/logo.png" alt="Logo" class="logo" />
<hgroup id="websitetitle">
<h1><span class="bold">HTML5</span>Goodness</h1>
<h2>about as modern as it gets...</h2>
</hgroup>
<nav>
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About">About</a></li>
<li><a href="#" title="News">News</a></li>
<li><a href="#" title="Contact Us">Contact Us</a></li>
</ul>
</nav>
</header>
</div>
<aside id="introduction" class="bodywidth">
<div id="introleft">
<h2>Welcome to <span class="blue">our website</span></h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis molestie sapien. Proin elit quam, commodo ut aliquet vel, elementum ut odio. Praesent semper tincidunt magna, sed sagittis elit congue sed. Mauris malesuada, elit ut luctus tristique, lectus libero rutrum mauris, ac tristique.</p>
<p><a href="#" title="Find Out More" class="findoutmore">Find out more?</a></p>
</div>
<blockquote id="introquote">
<p>This company is amazing. I can't come up with enough good things to say. Literally. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum magna tortor.</p>
<p class="quotename">John Smith, <span class="bold">Another Company</span></p>
</blockquote>
</aside>
<div id="maincontent" class="bodywidth">
<div id="aboutleft">
<h3>Awesome Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis molestie sapien. Proin elit quam, commodo ut aliquet vel, elementum ut odio. Praesent semper tincidunt magna, sed sagittis elit congue sed. Mauris malesuada, elit ut luctus tristique, lectus libero rutrum mauris, ac tristique justo ligula sit amet metus.</p>
<p>Etiam a magna vitae diam elementum dignissim. Donec eget justo ut eros fermentum sodales. Donec eleifend sodales gravida. Nulla nulla metus, laoreet at consectetur sed, dapibus vitae felis. Donec venenatis laoreet purus vel hendrerit. Donec sit amet sem a metus bibendum gravida sit amet at ligula. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<h4>Another Awesome Title</h4>
<p>Maecenas eu purus ipsum, non accumsan metus. Mauris augue dui, condimentum quis aliquam non, tincidunt id tortor. Donec dignissim sem sed nisl luctus scelerisque. Cras lacinia aliquam orci ac ultricies. Vestibulum ac lacus eu nisi commodo sollicitudin. Curabitur at consectetur leo. Donec augue velit, ornare in fermentum quis, tristique id augue.</p>
<p>Cras sem est, luctus ac pharetra id, feugiat id enim. Nullam at massa felis, vitae hendrerit tellus. Sed placerat arcu sed risus commodo iaculis. Aenean at felis enim. Mauris eget est in diam sagittis ultrices sit amet eu mi. Sed ultrices, orci et tincidunt fringilla, diam diam consequat elit, vel tempus mauris mi vitae sem. Ut lectus est, commodo a pulvinar at, faucibus et ligula.</p>
</div>
<section id="articlesright">
<article>
<figure> <img src="images/articleimage.jpg" alt="Article Image" /> </figure>
<header><a href="#" title="Article Title"><h5>Random News Article</h5></a></header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis molestie sapien. Proin elit quam dolor amet...</p>
<a href="#" title="Read More" class="readmore">Read more</a> </article>
<article>
<figure> <img src="images/articleimage.jpg" alt="Article Image" /> </figure>
<header><a href="#" title="Article Title"><h5>Random News Article</h5></a></header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis molestie sapien. Proin elit quam dolor amet...</p>
<a href="#" title="Read More" class="readmore">Read more</a> </article>
<article>
<figure> <img src="images/articleimage.jpg" alt="Article Image" /> </figure>
<header><a href="#" title="Article Title"><h5>Random News Article</h5></a></header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse quis molestie sapien. Proin elit quam dolor amet...</p>
<a href="#" title="Read More" class="readmore">Read more</a> </article>
</section>
</div>
<div id="footerwrap">
<footer id="mainfooter" class="bodywidth">
<nav>
<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="About">About</a></li>
<li><a href="#" title="News">News</a></li>
<li><a href="#" title="Resources">Resources</a></li>
<li><a href="#" title="Sitemap">Sitemap</a></li>
<li><a href="#" title="Contact Us">Contact Us</a></li>
</ul>
</nav>
<p class="copyright">Copyright © 2011 <a href="http://tristarwebdesign.co.uk/" title="Web Design">Tristar</a>. Valid <a href="http://validator.w3.org/check?uri=referer" title="HTML5">HTML5</a>.</p>
</footer>
</div>
</body>
</html>
Time now to tip toe in some CSS3. HTML5 can’t be pretty on it’s own.
CSS
Many of you will have likely dabbled in some CSS3, or even developed with large quantaties of it. It’s learning curve certainly isn’t the steepest, so many web designers are happy to dive right into everything it offers. However, CSS3 does offer a lot more than many people realise. Features like “column-count” and “nth-child” can get a fair bit more technical than the more casual additions to CSS like rounded borders and gradients! Media queries is arguebly the most interesting development in my opinion, and I will be guiding you through it in next weeks follow up blog.
Meanwhile, I’ll give you a tour of the CSS for this template layout. Here’s the code (probably worth hovering over the area below and clicking the view source button that appears – the squashed effect doesn’t do my code layout justice…)
/* CSS Document */
/* Built by Jack at Tristar */
/* Reset */
* { margin: 0; padding:0; }
img, img a { outline: none; border: none; }
body { background-color: #fff; color: #575757; font: 81.3% "Georgia", times, serif; margin: 0; padding: 0; }
a,a:visited { outline: none; color: #4086c6; text-decoration: none; }
a:hover { text-decoration: underline; }
/* HTML5 Fix */
header, section, footer, aside, nav, article { display: block }
/* Base Structure */
.bodywidth { width: 960px; margin: 0 auto; clear: both; }
/* General Type */
h1,h2,h3,h4,h5,h6 { color: #2f2f2f; font-family: "Ubuntu"; }
.bold { font-weight: bold; }
.blue { color: #4086c6; }
/* Header */
#headerwrap { width: 100%; background: url('images/headerbg.jpg') repeat-x 0 0; height: 117px; }
#mainheader { padding: 35px 0 0 0; color: #2f2f2f; text-shadow: 0px 0px 1px #fff; }
.logo { float: left; margin: 0 10px 0 0; -webkit-transition: -webkit-transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; transition: transform 0.4s ease-out; }
.logo:hover { cursor: pointer; -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg); }
#websitetitle { float: left; margin: -8px 0 0 0; }
#websitetitle h1 { font-size: 2.538em; font-weight: normal; }
#websitetitle h2 { font: 1.462em "Georgia"; font-style: italic; font-weight: normal; margin: -3px 0 0 0; }
#mainheader nav { float: right; font: 1.615em "Ubuntu"; margin: 8px 0 0 0; }
#mainheader nav li { list-style-type: none; display: inline; margin: 0 0 0 65px; }
#mainheader a,#mainheader:visited { color: #2f2f2f; }
#mainheader a:hover { text-decoration: none; color: #7e7e7e; }
/* Intro */
#introduction { margin-top: 25px; }
#introduction h2 { font-size: 3.231em; font-weight: bold; margin: 0 0 5px 0; }
#introduction p { font-size: 1.154em; line-height: 140%; }
#introleft { float: left; width: 540px; margin: 0 0 25px 0; }
#introquote { float: right; font-style: italic; font-size: 1.15em; width: 335px; background: url('images/leftquotemark.png') no-repeat 0 0; padding: 28px 0 0 45px; margin: 20px 0 25px 0; }
#introduction .quotename { float: right; height: 27px; background: url('images/rightquotemark.png') no-repeat right top; margin: 10px 0 0 0; padding: 0 50px 0 0; font: 0.9em "Ubuntu"; color: #4086c6; }
a.findoutmore,a.findoutmore:visited { padding: 10px; font: 0.9em "Ubuntu"; font-weight: bold; color: #fff; text-shadow: 0px 0px 1px #1e5298; background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.12, rgb(109,171,229)),color-stop(0.56, rgb(59,126,189))); background-image: -moz-linear-gradient(center bottom,rgb(109,171,229) 12%,rgb(59,126,189) 56%); background-color: #468ac9; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin: 13px 0 0 0; float: left; }
a.findoutmore:hover { background-color: #2f2f2f; background-image: none; text-shadow: 0px 0px 1px #000; text-decoration: none; }
/* Main Content */
#maincontent { border-top: 1px #dbdbdb solid; padding: 25px 0 0 0; overflow: hidden; }
#aboutleft { float: left; width: 540px; }
#aboutleft h3 { font-size: 1.5em ; font-weight: bold; margin: 0 0 15px 0; }
#aboutleft h4 { font-size: 1.3em; font-weight: bold; margin: 0 0 15px 0; }
#aboutleft p { line-height: 135%; margin: 0 0 15px 0; }
#articlesright { float: right; width: 380px; }
#articlesright article { clear: both; margin: 0 0 20px 0; overflow: hidden; }
#articlesright figure { padding: 5px; border: 1px #dbdbdb solid; float: left; width: 119px; height: 119px; margin: 0 15px 0 0; }
#articlesright p { line-height: 135%; }
#articlesright h5 { font-size: 1.3em; margin: 0 0 6px 0; color: #4086c6; }
#articlesright h5:hover { color: #2f2f2f; }
a.readmore,a.readmore:visited { padding: 4px; font: 0.9em "Ubuntu"; font-weight: bold; color: #fff; text-shadow: 0px 0px 1px #1e5298; background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.12, rgb(109,171,229)),color-stop(0.56, rgb(59,126,189))); background-image: -moz-linear-gradient(center bottom,rgb(109,171,229) 12%,rgb(59,126,189) 56%); background-color: #468ac9; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin: 10px 0 0 0; float: left; }
a.readmore:hover { background-color: #2f2f2f; background-image: none; text-shadow: 0px 0px 1px #000; text-decoration: none; }
/* Footer */
#footerwrap { width: 100%; height: 78px; background: #2d2d2d url('images/footerbg.jpg') repeat-x 0 0; margin: 20px 0 0 0; }
#mainfooter { padding: 30px 0 0 0; text-shadow: 0px 0px 1px #000; }
#mainfooter nav { float: left; font-style: italic; font-size: 1.1em; width: 60%; }
#mainfooter li { list-style-type: none; float: left; margin: 0 35px 0 0; }
#mainfooter a,#mainfooter a:visited { color: #fff; }
.copyright { float: right; color: #b8b8b8; }
First thing to note, the “HTML5 Fix” styling is another fix to help out older browsers display the HTML5 structure. Make sure to include it!
90% of the CSS, as you’ll notice, is code that you’ve probably seen plenty of times before. Our new HTML5 tags are styled the same way as any old HTML markup, referencing the tag type, or a set ID.
So, as this blog is directed towards those who have past experience with CSS, I’ll only highlight the code that is something new and a little bit different.
The first use of CSS3 is included on the logo rollover. Gimmicky and ultimately useless, but I struggled to resist. By including the transform/rotate code, we can tell the logo to rotate a full 360 degrees on the hover state. I’ve also included some easing so the rotate doesn’t happen instantly (which, being a 360 degree rotate, would look like the logo hasn’t moved). I’ve included the webkit and moz alternative codes (as with all the other CSS3) so the effect works on every browser that can handle it.
I’ll move on to explain how I styled up the “find out more” and “read more” links scattered around the template. These are pure CSS3 buttons, with no images referenced, or png fixes. Using border-radius, buttons can be given smooth rounded corners. I highly recommend the Border Radius Generator to help you get the perfect code for whatever look you want.
The gradient background effect is created using the new gradient capability of CSS3. Angles, colour values, fades, etc can all be set. Once again, to help you out I recommend the following generator – CSS3 Gradients.
And finally, I regularly included some text-shadow on the font styling. Text shadow was part of CSS2 when it first arrived, but was eventually removed. CSS3 has brought it back and I love it! Many effects can be creating using text-shadow, including outer glows, and letterpress text.
That’s that! The finished product can be viewed again over here.
To sum it up, we’ve created a full HTML5 and CSS3 layout, that also proves HTML5 layouts can work in all browsers. Whether you decided to support all browsers is your decision!
Next week I’ll be demonstrating how to use media queries with this template. See you then!
Web Design Button & Form Builders 22.2.12 | 0 Comments
Free UI Elements for Web Design 13.2.12 | 2 Comments
Illustation in Web Design 7.2.12 | 0 Comments
10:47 03/04/2011
Hi Jack, this was a really good read. Easy to follow, informative and packed with some really sick tips. I am looking forward to your next one.
14:58 19/04/2011
Great post i now understand what they mean by HTML5
many thanks
03:33 09/05/2011
Since CSS and HTML 5 pair up seamlessly, the same standards for developing rich media apply to basic front end web development. HTML5 is now a very powerful tool since it can be useful in creating a website template..
11:55 09/05/2011
Hi Jack
Great little article, we have just developed our new website with HTML5 along with Jquery and managed some neat little tricks, which will be launched soon. We are also implementing many of these techniques into Magento websites and getting awesome response from clients.
Keep the great articles coming.
15:01 18/05/2011
Great work on this coding, I’ve been looking for these hacks for ages!
16:28 18/05/2011
Wouldn’t describe it all as a hack my friend… but thanks regardless!
10:13 25/05/2011
thanks for these css and html codes, It helps me a lot!
10:15 25/05/2011
No problem pal!
02:45 23/02/2012
Wonderful tutorial.
Thanks.