CSS3 and HTML5 are two of the coolest things to come along within web design for a very very a long long time. Whats not to love? And the best thing of all? The major browsers are now catching up and giving support.
Below you will find a collection of visually basic templates, but with all of them fully packed and enriched with CSS3 and HTML5 goodness. On top of all these templates you will also find a couple of HTML5 powered CSS3 frameworks.
This template has been heavily inspired by the Smashing Magazine HTML 5 template tutorial, however the (CSS & Design) has been modified in several ways.
This basic template comes in 4 colors (green, blue, purple and orange) with easy to customize CSS and HTML 5, HTML5 mouse over effects, HTML 5 text shadow and much more.
You can choose from either the two column or three versions of this HTML5 template.
The template displays a taster of what is to come from the CSS3 spec, mostly the lovely rounded corners and @font-face. There are also a few pseudo CSS selectors used to control some of the elements.
The template is supported in Firefox 3.5+ and Safari 4+. All other browsers will degrade into a nice square version of the design.
ZooCroo is a fun, playful and colorful template that utilizes HTML5 and CSS3, with a little extra fun thrown in. The nerd images in the content are animated, using CSS3’s transform properties. Hovering over the little nerds will rotate one and slide one right. This is, of course, assuming your browser is able to understand CSS3’s transform code.
In this tutorial with template source available for download, you are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how you will be building websites when the specifications are finalized and the browser vendors have implemented them.
Rockit is a 2 column grungy music-inspired template that makes use of CSS3 transform to create a cool rotating polaroid effect for a set of images. For browsers that understand this effect, hovering over each polaroid image will rotate it to the left a bit. For browsers that aren’t yet up to speed, the images will still have the polaroid-like frame around them, but just won’t rotate on hover.
Cardeo Three is a free website template coded using CSS3 with the following features: Rounded Corners (no images!), Custom Font Replacement and Font Shadow.
This fun in the sun template features a travel theme with a gradient background that uses CSS3 to create it without images. Browsers that don’t yet understand CSS3’s new gradient background will show a nice sandy background color instead. This template is 2-columns with a nice 4-section footer.
Papery is an HTML5 / CSS3 template that’s all about the face; font-face that is. This 2-column textured template focuses on @font-face, showing off what fun it can be to use non-standard fonts.
Adding to the font focus is a generous use of old paper textures, 3-sectioned footer, border shadows and drop-down menus to create a nice old but comfortable look and feel.
This free template is pure XHTML and CSS3. It is compatible with all browser versions, SEO friendly, and features a sleek jQuery scroll effect. Perfect for those cases when you need something up fast.
Newsy is a beautiful newspaper / magazine style template with the advanced multiple-column feature that CSS3 now offers. Content flows easily from one column to the next – automatically – without any effort on the part of the author.
IE won’t recognize the multiple columns, so the articles will look like normal one-column posts, but at least it doesn’t seem broken to IE users.
The Less Framework is an HTML5-powered CSS framework for building flexible multi-column website layouts. It has an eight-column grid optimized for a line-height of 24px, as well as a set of typography presets based on the golden ratio that fit into the grid’s vertical rhythm.
The frameworks layouts work perfectly in Chrome, Safari 3.0+, Firefox 3.0+, Opera 10+ and Internet Explorer 7+. They intelligently collapse into a single column in legacy browsers and on small screen devices, such as mobile phones.
The 52framework is a fairly new CSS framework that has been built with the much cleaner HTML5 and using CSS3. It supports all modern browers, and perhaps most remarkably, even IE6! Here are some of its features:
• Use of all the most useful current html5 tags including: header, nav, section, article, footer, and more to come soon (with styling)
• Use of the all new <!DOCTYPE html> and <html lang="en">
• New input field types: url, email, etc
• Modified Reset Stylesheet for HTML5
• Use of the new ::selection selector that enables you to customize the properties of selected text.
• Rounded Corners for any block level element
• Text-Shadow for text elements
• Box Shadow for block level elements
• 16 column, 52 pixel based with 8 pixel gutter
You might also like…
15 CSS3 Navigation and Menu Tutorials and Techniques »
20 CSS3 Tutorials and Techniques for Creating Buttons »
24 CSS (in some cases with jQuery) Navigation and Menu Tutorials »
22 CSS Button Styling Tutorials and Techniques »
CSS References, Tutorials, Cheat Sheets, Conversion Tables and Short Codes »
50 Useful Tools and Generators for Easy CSS Development »
50 Essential Web Typography Tutorials, Tips, Guides and Best Practices »
The Blueprint CSS Framework – Tutorials, How-to Guides and Tools »
20+ Resources and Tutorials for Creative Forms using CSS »