We are pretty bored with the current limits of the HTML-CSS and it is clear that the HTML5-CSS3 is the cure to let the creativity flow.

And, browser compatibility is no more a big issue as there are various resources like Modernizr, ExplorerCanvas or IE7.js that empower incompatible browsers.

If you didn't already, it is a good idea to warm your hands on HTML5 and CSS3 as they offer so much.

Here are 10+ free HTML5-CSS3 website templates to help you get inspired and started:

HTML5 Starter Pack

HTML5 Starter Kit is an impressive template that doesn't force you to build a specific type of website but shape it how you want.

This free HTML5 template is cross-browser (including IE6), tablet/netbook ready, can instantly use Cufón and includes some structural/re-usable classes.

And, it includes the layout as a .PSD file.

Gotta’ love HTML5 & CSS3

An image gallery layout with HTML5-CSS3 which includes:

• animated transitions, like a hover animated description for the images, using only CSS
• a tabbed interface for different galleries using CSS3’s :target element

Read the rest of this entry »

ProtoFluid is a free web-based tool which eases web application testing on various screen sizes and orientations.

It simply asks you you to mention the website to be tested and the desired screen size (sizes for popular devices are predefined).

Once launched, you can see the website inside a modal box with the mentioned size, and with a click, you can change the orientation.

For anyone, who prefers to complete this task on the browser-side, web developer add-on has the resize function, but keep in mind that you can still use Firebug or other tools at the fullscreen view with such a web-based app.

Also, it lets you design for CSS3 compliant (mobile) browsers using Media Queries.

FindMeByIP.com is sharing beautiful browser compatibility charts for HTML5 and CSS3 properties which we are seeing more and more everyday.

The charts include:

• CSS3 properties
• CSS3 selectors
• HTML5 web applications (local storage, geolocation, etc.)
• HTML5 embedded content (canvas, audio, etc.)
• HTML5 form inputs, attributes and audio/video codecs

and contain data for the popular browsers with their widely used versions.

P.S. You may also want to checkout FindMeByIP.com homepage which offers a free service to help you collect the browser capabilities of a remote user (like clients) for better responding to any browser-related cases/questions.

Microsoft has announced the "Preview Release" of Internet Explorer 9 which seems to be a milestone for the IE family considering it gets closer to the standards.

The IE9 has a new JavaScript engine which performs much better than IE8 & some other browsers.

Another good news is, it supports HTML5, CSS3 & SVG almost completely.

The website includes speed, HTML5 & graphics demos besides the comparisons of the features with other browsers.

This new release requires Windows Vista SP2 or Windows 7 which hopefully changes with the stable release (otherwise, IE may continue to be a barrier on new standards as XP will probably live long).

With the rise of the CSS3, we're seeing more & more tutorials + websites everyday that help us to use it.

After the CSS3, Please!, which was shared at WRD few days ago, Randy Jensen has created a very easy to use website for creating CSS3 rules named CSS3 Generator.

It simply lets you to choose the rule from a list that includes:

• border radius
• box shadow
• text shadow
• RGBA
• @font-face
• multiple columns
• box resize
• box sizing
• outline

and customize them while previewing the outputs instantly.

CSS3, Please! is a web-based & simple-yet-effective cross-browser CSS3 rules generator.

As every browser may require different prefixes for the CSS3 properties, this tool makes it so easy by providing them all with an editable & well-commented way where the output can be seen instantly.

Currently, it helps you write the rules for: border-radius, box-shadow, linear-gradients, rotation & @font-face. Some other transforms like skew & scale will be added soon.

For some transforms, that Internet Explorer can support via IE filters, they are mentioned too.

Nicolas Gallagher is sharing a creative way on creating good-looking speech bubbles with CSS3.

There are no images or JavaScript in the implementations but uses the :before and/or :after pseudo-elements to produce basic shapes.

The HTML remains semantic however we should remember that CSS3 is not fully supported by all major browsers & we may again require JavaScript to add this support (like IE7.js).

52framework is a CSS framework which aims to provide an easy way to build websites using HTML5 & CSS3 while still supporting all modern browsers (including ie6).

It uses HTML5 tags like header, nav, section, article, footer or new input field types like url, email, etc. The framework also has a HTML5 compatible reset stylesheet.

52framework uses the new ::selection selector that enables you to customize the properties of selected text.

It can apply rounded corners for any block level element, text-shadow for text elements & more.

The framework also includes styles for creating grids: 16 column, 52 pixel based with 8 pixel gutter.

52framework is a user-contributed resource & you can easily send suggestions to improve it further.

Many websites use various objects to create a 3D perception, an illusion of depth. Ribbons are probably one of the most popular ones.

PV.M Garage, a blog focused on web design, is sharing an inspiring tutorial which shows "how to create 3D ribbons with only CSS3".

The tutorial makes use of the CSS3 properties box-shadow, transform & border-radius.

Also, lets remember that it is possible to create triangles with CSS which is the key for the ribbons in this tutorial.

ie-css3.js is a project by Keith Clark which enables Internet Explorer to identify CSS3 pseudo selectors & render any such styles.

Including 2 JS files (DOMAssistant is required too) into your web pages & inserting CSS files with the <link> tag (inline styles are not supported) will make the rules work.

How does it work?

ie-css3.js downloads each style sheet on the page and parses it for CSS3 pseduo selectors.

If a selector is found, it's replaced by CSS class of a similar name. For example: div:nth-child(2) will become div._iecss-nth-child-2. Next, DOMAssistant is used to find the DOM nodes matching the original CSS3 selector and the same CSS class is applied them.

Supported selectors are:

• :nth-child
• :nth-last-child
• :nth-of-type
• :nth-last-of-type
• :first-child
• :last-child
• only-child
• :first-of-type
• :last-of-type
• only-of-type
• :empty

Alternatively, the popular IE7.js offers a similar functionality as well.

P.S. It doesn't support :not() pseudo selector.