Suggest a Snippet Login Register
  • LOG IN:

    Not a member? JOIN NOW!
     Username                   Password
    Remember me Recover password
DevSnippets Design Community & Snippets Gallery
  • Subscribe by RSS
>
  • Webdesign
    • Design
    • HTML5
    • lists
    • Menu
    • Navigation
    • Portfolio
    • Showcase
    • Template
    • Tooltip
    • Tutorial
    • webdesign
  • Web development
    • AJAX
    • CodeIgniter
    • CSS
    • CSS3
    • Database
    • Javascript
    • jQuery
    • Mootools
    • MySQL
    • PHP
    • PHP Framework
    • plugins
    • WordPress
    • WordPress Hacks
  • Inspiration
    • Fonts
    • Icons
    • Inspiration
    • Mac
    • Mac apps
    • Photography
    • Wallpapers
  • Snippets
In {Articles} -27th Apr- {37 Comments}

12 Elegant, Free & High Quality HTML5+CSS3 Templates

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.

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.

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.

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.

5. Coding A HTML 5 Layout From Scratch

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.

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.

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

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>

8. Simple Website Layout Tutorial

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

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.

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.

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.

12. A free HTML5 and CSS3 theme

A truly HTML5 and CSS3 elegant theme with a Fully working Ajax PHP contact form, Uses the ChunkFive font to headings and IE6 & IE7 warning.

Related Posts-

  • - 5 Advanced CSS Pseudo Classes that will Save your Day
  • - Designing for the Future with HTML5+CSS3 : Tutorials and Best Practices

Author: Noura Yehia

Noura Yehia is a Web Designer, Blogger and Creative Thinker. Founder of Noupe.com a popular blog about web design, tutorials, resources and inspiration. If you’d like to connect with her, you can follow her on Twitter or at her blog Devsnippets.

Category: Article | Leave a Comment | 37 Comments

Related Posts

  • 5 Advanced CSS Pseudo Classes that will Save your Day 5 Advanced CSS Pseudo Classes that will Save your Day
  • Designing for the Future with HTML5+CSS3 : Tutorials and Best Practices Designing for the Future with HTML5+CSS3 : Tutorials and Best Practices

37 Comments, Add Comment or Ping

  1. Hian Battiston says:
    April 27, 2010 at 6:21 am

    Great, really great post!
    Thanks so much!

  2. anthony says:
    April 27, 2010 at 6:27 am

    nice!

  3. Nikhil says:
    April 27, 2010 at 7:13 am

    Fantastic! Just superb collection of tutorials and themes.
    Thanks for these resources.

  4. Mohammad Koubeissi says:
    April 27, 2010 at 8:23 am

    Amazing stuff. Thanks

  5. Mohammed Alaa says:
    April 27, 2010 at 1:11 pm

    Wowww Amazing :) Thanks a lot

  6. David Clothier says:
    April 28, 2010 at 12:17 am

    Excellent post – I love the new features of CSS3 and HTML5 – has given me a few ideas to try out, and seeing as my own site needs a revamp it’s come at the right time too!

  7. Derek says:
    April 28, 2010 at 3:07 am

    Great thanks for posting!

  8. Carlos Carvalho says:
    April 28, 2010 at 7:45 am

    Really nice resource for inspiration!!

    Thanks for sharing

  9. Dzinepress says:
    April 29, 2010 at 12:20 am

    really useful and helping for HTML5 concepts with CSS3 techniques.

  10. Bruce says:
    May 19, 2010 at 4:01 am

    [...] 12 Elegant, Free & High Quality HTML5+CSS3 Templates | DevSnippets (tags: html5 css3 templates webdesign) [...]

  11. psychic readings says:
    June 14, 2010 at 2:11 pm

    thanks ill check it out!

Trackbacks/Pingbacks

  • Tweets that mention 12 Elegant, Free & High Quality HTML5+CSS3 Templates | DevSnippets -- Topsy.com
  • uberVU - social comments
  • pligg.com
  • 12 Elegant, Free & High Quality HTML5+CSS3 Templates | DevSnippets « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit
  • 12 Elegant, Free & High Quality HTML5+CSS3 Templates » Web Design
  • All Teched Up! « Caintech.co.uk
  • 12 Elegant, Free & High Quality HTML5+CSS3 Templates | DevSnippets : Popular Links : eConsultant
  • HTML5+CSS3で作られたハイクオリティでフリーテンプレート12種類 | Branberyheag Lab
  • [HTML5 CSS3] 12 Elegant, Free & High Quality HTML5+CSS3 Templates – HTML5とCSS3でコーディングされたウェブテンプレート - mBlog
  • 12 Elegant, Free & High Qualit… - 0bits.log
  • links for 2010-04-28 « Mandarine
  • Mes favoris du 28-04-10 au 29-04-10 » Gilles Toubiana
  • [Web] 連結分享 - 傑夫碎碎唸-有線電視、漫畫、PHP、Pushmail、Blackberry
  • freewebdev.jp
  • links for 2010-04-29 « 個人的な雑記
  • 12 Elegant, Free & High Quality HTML5+CSS3 Templates | DevSnippets - html
  • What do you think about aquasana water filters?
  • Twitter Weekly Updates for 2010-05-02 - 0bits.log
  • Lab Factory » Blog Archive » ELEGANT WEBSITE WITH HTML 5 AND CSS3
  • links for 2010-05-03 » 4exp.net
  • Weekly Good Tweets – 04.26 – 05.01 « Tutvid News
  • Twitter Weekly Updates for 2010-05-09 - 0bits.log
  • Code Computerlove » Blog Archive » HTML5, CSS3 useful link, resources, tips and tricks
  • 9 Beispiele für den Einsatz von CSS3 | webdemar.com
  • HTML5 CSS3テンプレート : SS labs | SS labs
  • Weekly Links #22. | claudio schwarz – c.schwarz – claudioschwarz.com

Sponsored Ads

ADVERTISE HERE

Sponsored Ads

DevSnippets Latest Articles

  • Using Illustrations in WebDesign: 30 Creative Examples
    Tags: Illustration, Inspiration, webdesign Jul/20/2010
  • Dark and Mysterious High Quality Desktop Wallpapers
    Tags: Dark, Wallpapers Jun/23/2010
  • 10+ Most Beautiful Island Photography on Earth
    Jun/16/2010
  • 35 High Definition iPad Wallpapers For A Great Experience
    Tags: Inpiration, Wallpapers Jun/09/2010
  • 30 Unique Logo Designs That Actually Say Something
    Tags: Branding, Inspiration, Logo Jun/02/2010
  • Creating 10 Most-Used Javascript Techniques Using Pure CSS Styling
    Tags: CSS, Tutorial May/31/2010
  • 40 Creative Advertisements With Unexpected Ideas
    Tags: Advertising, Inspiration May/27/2010
  • Getting Slim, Spicy, & WordPress-Ready with Top 10 jQuery Plugins
    Tags: jQuery, WordPress May/25/2010
  • Spicing Up Your Tumblr Experience: Beautiful Themes, Icons and Apps
    Tags: Templates, Tumblr May/19/2010
  • 20 NEW & FREE High Quality (X)HTML/CSS Templates
    Tags: CSS, Design, Template, Tutorial May/17/2010
More Articles →

Design Community News

  • Is It Worth Shifting To Photoshop CS5?

    SloDive
    Jul/04/2010
  • Free Wordpress Theme Vector Nature Template

    templates4all
    Jul/04/2010
  • Best jQuery plugins – June 2010

    Spider8411
    Jun/22/2010
  • Freebies: Vintage Mega Pack 10 Samples from Designious.com

    Doink
    Jun/22/2010
  • CSS3 Animations, the Power Back to CSS Part 1: Transitions

    Teylor Feliz
    Jun/22/2010
  • Create a Photo-Realistic Candle with Basic Photoshop Tools

    Frank
    Jun/22/2010
  • Credit cards and payment icon set

    icon sets
    Jun/22/2010
  • 40 Refreshing Nature Inspired Web Designs

    Brukhar
    Jun/22/2010
  • How to Create a Tumblr Theme (Code Structure)

    Dainis Graveris
    Jun/21/2010
  • The Simple Photoshop CS5 Cheat Sheet

    Frank
    Jun/21/2010
More News →

Our Friends

  • Graphic Design School

  • Designm.ag

Top ↑

Add a Snippet / Design News

© 2008-2010 DEVSNIPPETS | Made by Noura Yehia | Submit Snippet | About| Subscribe | Advertise
In partnership with (mt) Media Temple