12 Elegant, Free & High Quality HTML5+CSS3 Templates

On 06.09.11, In HTML5, view: 3915

HTML5 is the next major version of HTML. HTML5 provides some great new features for web designers who love to create readable code and semantically-meaningful layouts. HTML 5 introduces and enhances a wide range of features including: form controls, APIs, dragging and dropping, multimedia, drawing graphics on screen and a lot more.

The new specifications has added quite a few interesting and useful tags for structuring your markup.
In today’s post, we would like to present 12 elegant, free and high quality HTML5+CSS3 Templates for your next project, some of these templates include a step by step tutorials to teach you how to create your own.

1. Touch The Future: Create An Elegant Website With HTML 5 And CSS3

The aim of this tutorial is to create an elegant blog/portfolio for an efficient professional (graphic and web designer or photographer). You will can download the template at the end of the tutorial.

Demo: www.pvmgarage.com/downloads/portfolio/

Download: www.pvmgarage.com/en/2010/04/touch-the-future-create-an…

2. Free 2 Column & 3Column HTML5 template

2 column layout and another 3 column with a little contact box, .psd file is included with each template.

Demo: www.webdezign.co.uk/blog/html5-examples/3col/

Download: lostkore.es/blog/2010/02/27/gotta-love-html5-css3/

3. One-Page Website Template

An HTML5 web template, using some of the new features brought by CSS3 and jQuery, with the scrollTo plug-in.

Demo: demo.tutorialzine.com/2010/02/html5-css3-website-templa…

Download: tutorialzine.com/2010/02/html5-css3-website-template/

4. EarthDay HTML5 and CSS3 Template

EarthDay is a 3-column HTML5 and CSS3 template designed to honor Earth Day. Sporting the blues and greens we’ve come to expect from eco-friendly sites, the template should work well for any green inspired content.

Demo: freehtml5templates.com/downloads/free/earthday/

Download: freehtml5templates.com/earthday-html5-and-css3-template…

5. Coding A HTML 5 Layout From Scratch

A very basic layout which covers most of the elements we can start coding using HTML5. Basically: the page’s name and it’s slogan, a menu, a highlighted (featured) area, a post listing, an extras section with some external links, an about box and finally a copyright statement.

Demo: media.smashingmagazine.com/cdn_smash/wp-content/uploads…

Download: www.smashingmagazine.com/2009/08/04/designing-a-html-5-…

6. FlipThru HTML5 and CSS3 Template

FlipThru is a 1-column business-oriented HTML5 and CSS3 template that makes extensive use of CSS3 to create a horizontal accordion effect. This effect does work in IE as well.

Demo: freehtml5templates.com/downloads/free/flipthru/

Download: freehtml5templates.com/flipthru-html5-and-css3-template…

7. HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

In this tutorial, we are going to learn how to build a blog page using next-generation techniques from HTML 5 and CSS 3. Pretty much your every day blog design. Header with title, horizontal navigation, content area with comments and form, sidebar and a footer.

Take a look at the markup:

<!doctype html>

<html>

<head>

<title>Page title</title>

</head>

<body>

<header>

<h1>Page title</h1>

</header>

<nav>

<!– Navigation –>

</nav>

<section id=”intro”>

<!– Introduction –>

</section>

<section>

<!– Main content area –>

</section>

<aside>

<!– Sidebar –>

</aside>

<footer>

<!– Footer –>

</footer>

</body>

</html>

Demo: nettuts.s3.cdn.plus.org/373_html5/final/index.html

Download: net.tutsplus.com/tutorials/html-css-techniques/html-5-a…

8. Simple Website Layout Tutorial

A very Simple web page with HTML 5 and styling with CSS3.

Demo: www.designzzz.com/html-5-tutorial.html

Download: www.designzzz.com/website-layout-tutorial-html-5-css-3/

9. Gotta’ love HTML5 & CSS3

A tabbed image gallery but animated using some CSS transitions. All of this is going to be built with HTML5 & CSS3, there is going to be NO use of flash or javascript for this layout.

Demo: dl.dropbox.com/u/3182943/Gotta%27%20love%20HTML5_CSS3/i…

Download: lostkore.es/blog/2010/02/27/gotta-love-html5-css3/

10. HTML5 CSS3 starting template

It’s always useful to have a base to start a new website build from and what better way to encourage people to use HTML5 and CSS3 than sharing my basic HTML5/CSS3 template.

Demo: dl.dropbox.com/u/3182943/Gotta%27%20love%20HTML5_CSS3/i…

Download: lostkore.es/blog/2010/02/27/gotta-love-html5-css3/

11. H5 WordPress Theme Template

The H5 Theme Template provides everything you need to create beautiful themes with HTML 5 right now. H5 contains a complete set of theme files and folders, and each file has been meticulously crafted with all of the latest and greatest WordPress functionality.

Demo: themeclubhouse.digwp.com/

Download: digwp.com/2009/07/free-html-5-wordpress-theme/