CSS3 and HTML5 are changing the way we use the web, and how programmers and web designers build sites. Web browsers are quickly becoming compatible with HTML5 and CSS3's new tags and features, which are opening up a whole new world of possibilities.

One of those possibilities is the use of Responsive Web Design. In a world where mobile web browsing is ubiquitous, Responsive Web Design techniques allow designers to use flexible grids and page layouts in sites that will respond to user behaviour and adjust automatically to the user's browser capabilities and screen resolution of their device (meaning you don't have to make a different version of your site for every mobile phone and tablet out there). We'll be writing more about Responsive Web Design here soon (so watch this space!)

In response to the increase in demand for these skills we're now running regular HTML5 & CSS3 Training courses here in Brighton - the two 1-day workshops are scheduled together and can be booked together as a package. We're also running regular JavaScript Training and jQuery Training courses.

To give you an idea of some of the exciting new things you can do with CSS3 - here's our favourite 5 new features in CSS3, along with links to relevant CSS3 Examples.

Top 5 New Features in CSS3

1) Border-radius

The new border-radius feature in CSS3 comes as a great relief for anyone who has had to create rounded corners with corner images and extra DIVs: all you need is a few lines of CSS. It's not yet supported by IE7 and IE8, but you can use a CurvyCorners Script for these browsers.

CSS3 Border Radius Example

2) Web fonts with @font-face

Goodbye to limited web fonts - brilliant! CSS3's @font-face feature allows you to attach absolutely any font you like to a web page. Find free fonts at the Google Web Fonts Directory and Font Squirrel. Use the Font Squirrel @Font Face Generator to convert to web font formats and generate the CSS to attach a font to your site.

CSS3 @font-face Examples

3) Box-shadow

The CCS3 Box-shadow feature allows you to add inner or outer drop shadows directly to any HTML element without graphics. Values can be specified for color, size, blur and offset.

CSS3 Box-shadowExamples

4) CSS3 2D Transforms

This feature allows you to move, scale, turn, spin, and stretch elements. Difficult to explain in words - so check out the link below for examples.

CSS3 2D Transforms Examples

5) CSS3 Transitions

Add an effect when changing from one style to another, without using Flash animations or JavaScripts. Specify the CSS property you want to add the effect to and the duration of the effect, e.g. you can change the background colour of a button from one colour to another over a duration of two seconds when someone hovers over it. Great for creating animated rollovers and navigation elements that don't require Flash.

CSS3 Transitions Examples