Webdesign Blog, Tutorials and Books

We have been looking forward to it for some years now: the release of CSS3. It promises a huge variety of new ways to create an impact with your designs. Are you as impatient to get started as I am? We are not the only ones, because browser manufacturers have already started rolling out support for many of the new features. While it is still in development and the specification document still isn’t finalized, we can start using it already.

What is CSS3?

CSS3 is the new version of the Style Sheet language [what is CSS?]. There are some major improvements and additions that will allow us a lot more possibilities. It will be completely backwards compatible so your site will not require any changes in order to style to display correctly in the future.

New possibilities?

Well, you where able to do these things before, but not with a Stylesheet. Using CSS a lot of things will become easier, quicker and ‘light weight’. Some examples of these new possibilities:

• Rounded corners
  
• Gradients
• Drop shadows
• Image effects
• Text effects
• And much, much more!
  Check out this draft with selectors in CSS3, by w3.org.

What Browsers Support CSS3?

We can start using CSS3, but not every browser supports every property yet. Google Chrome and Safari support most properties and selectors on both Macintosh and Windows, followed by Firefox and Opera. Sadly, Microsoft’s Internet explorer is way behind on this. But we all know they aren’t big on web standards.

The fact that IE users will not be able to see whatever I make in CSS3 is not going to stop me from using it, personally. For instance: If I give a DIV rounded corners, IE users will simply see the default ones, no harm done as everything is backwards compatible.
Think of it as doing something extra for the users that do have browsers that support this new language.

For a complete overview of supported properties and selectors visit this site:

Findmebyip.com CSS3 and HTML5 properties support per browser

What is the status of the development?

I have to be honest, most of the rules will not be mainstream for another year or 2, but there is no reason not to start learning them today.
If you want more information on the current status visit these websites

http://www.w3.org/Style/CSS/current-work
This page contains descriptions and a rough schedule of what the CSS WG is working on. If you want to follow the development of CSS3, this page is the place to start.

http://www.css3.info/
This site is keeping track of everything that happens around the topic of CSS3, a very useful resource.

Lets get tutorialized!

Enough introduction, lets get started shall we?

Here is a selection of awesome CSS3 tutorials to break a leg on, enjoy!

Tutorial 1: Rounded Corner Boxes

__

Tutorial 2: Super Awesome Buttons

__

Tutorial 3: Border Images

__

Tutorial 4: Awesome Overlays

__

Tutorial 5: LetterPress Effect

Please Comment and / or Rate this Article, I hope you enjoyed it.
Nizno, Webdesign-spot Writer

Sources:

• designshack.co.uk
• CSS3.info
• W3C.org
• Webmonkey.com

Related posts:

1. CSS3 Button Techniques
2. Cross-browser Coding Tutorial
3. HTML5 Support in Dreamweaver CS5
4. How To Help Kill IE6
5. CSS: The Missing Manual