Written by Aaron Charlie– Mon 23 May 2011
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!)
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.
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.
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 Directoryand 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.
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.
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.