20 Useful Resources for Learning about CSS3

Jan 28 2009 by Jacob Gube | 30 Comments

Though W3C’s CSS3 specifications aren’t finalized yet, modern web browsers such as Mozilla Firefox, Opera, and WebKit-based browsers already have full or partial support for them.

As a web developer, it’s crucial to be well-informed about modern and future web standards. To help you stay ahead of the curve – here are 20 excellent resources on the topic of CSS3.

1. CSS3 Progress Report

CSS3 Progress Report - screen shot.

The CSS3 Progress Report is a web page by the CSS Working Group outlining the current status of all the CSS3 modules. For would-be contributors, this may be a helpful resource in discovering places where you can potentially contribute.

2. Get Started with CSS 3

Get Started with CSS 3 - screen shot.

Web Monkey has a tutorial on how to get started with CSS3. It will give you an overview of some CSS3 features that are already supported by modern browsers. This is a great article to read for those that are just beginning to explore CSS3.

3. Progressive Enhancement with CSS 3

Progressive Enhancement with CSS 3 - screen shot.

Opera – one of the web browsers in the forefront of supporting CSS3 specs – has an excellent tutorial on a progressive enhancement approach to CSS3 usage that discusses how you can utilize CSS3 for modern/cutting-edge browsers yet still have a design that’s accessible to older browsers that don’t support it.

4. Accessibility Features of CSS

Accessibility Features of CSS - screen shot.

With the rise in popularity of mobile hand held devices and non-traditional web browsers such as screen readers, the CSS Working Group puts accessibility as one of the leading issues that will be addressed in CSS3. This W3C document outlines some of the accessibility features and considerations that are inherent in current and future CSS3 specifications.

5. Introduction to CSS3 (Design Shack)

Introduction to CSS3 (Design Shack) - screen shot.

In this 5-part series, Design Shack gives readers an excellent induction to the world of CSS3. The article series goes through an overview of CSS3 in plain-speak and talks about some CSS3 techniques and topics such as borders and text effects.

6. CSS3 . Info

CSS3 . Info - screen shot.

CSS3 . Info is an enormously comprehensive site about all things CSS3-related. They share news, interviews, and resources from around the web regarding CSS3. CSS3 . Info also has a demo section called CSS3 Previews so that you can see CSS3 modules and features at work for browsers that support them such as Opera and WebKit-based browsers.

7. CSS Advanced Layout Module

CSS Advanced Layout Module - screen shot.

Learn about one of the more popular modules in CSS 3 specs: the Advanced Layout Module. This resource is W3C’s working draft and will show you just how great CSS3 will be for us developers.

8. Six Questions: Eric Meyer on CSS3

Six Questions: Eric Meyer on CSS3 - screen shot.

Six Revisions was fortunate enough to discuss CSS3 with celebrated CSS expert, Eric Meyer. In this interview, Eric Meyer talks about what excites him the most about CSS3, the modular approach to CSS3 specs development, and JavaScript’s relationship to CSS3.

9. CSS3 properties tests for webkit based browsers

CSS3 properties tests for webkit based browsers - screen shot.

In this live demonstration, you’ll find properties currently supported (and unsupported) by WebKit-based browsers such as Safari; it also provides you information about iPhone’s support of these properties.

10. WaSP Community CSS3 Feedback

WaSP Community CSS3 Feedback - screen shot.

This article is an excellent summary of the feedback received from the Web Standards Project (WaSP) blog post entitled, “Tell the CSS WG what you want from CSS3“. It’s a great read to see what web developers around the world think about current CSS3 specs.

11. CSS 3 attribute selectors

CSS 3 attribute selectors - screen shot.

An exciting improvement in CSS3 is the ability for very complex and specific DOM selection. This tutorial on Dev.Opera shows you the potentials of the new attribute selection features in CSS3.

12. W3C: Selectors

W3C: Selectors - screen shot.

W3C’s working draft of CSS3 Selectors is an excellent introduction into the concept of Selectors in CSS3.

13. Conversation with CSS 3 team

Conversation with CSS 3 team - screen shot.

XHTML.com’s interview of Bert Bos (former chairman of W3C’s CSS Working Group) is an insightful look at CSS3 development through the eyes of a leading expert in CSS.

14. The fundamental problems with CSS3

The fundamental problems with CSS3 - screen shot.

This article by Matt Wilcox discusses some of the current issues surrounding CSS3.

15. CSS Working Group Blog

CSS Working Group Blog - screen shot.

The people in charge of maintaining and developing CSS standards – the CSS Working Group (CSS WG)  -  has a regularly updated weblog that shares useful information about CSS3.

16. Rounded Corner Boxes the CSS3 Way

Rounded Corner Boxes the CSS3 Way - screen shot.

24 Ways, an annual online publication that puts out articles by top web professionals, has a tutorial on rounded corner boxes written by CSS expert Andy Budd. The tutorial showcases one of CSS3′s styling improvements: rounded corners without using CSS backgrounds.

17. Push Your Web Design Into The Future With CSS3

Push Your Web Design Into The Future With CSS3 - screen shot.

Smashing Magazine’s article on CSS3 by graphic/web designer Chris Spooner delves into crafting web designs that leverage current CSS3 specs. It’s an inspiring scrutiny of the things that you can do with CSS3 – right now.

18. Introduction to CSS3 Transparency

Introduction to CSS3 Transparency - screen shot.

This article explores and explains the concepts CSS3 transparency; a concept that’s part of the CSS Color Module.

19. Styling Forms with Attribute Selectors

Styling Forms with Attribute Selectors - screen shot.

Dev.Opera showcases the benefits of attribute selectors in this “learning-by-doing” tutorial which deals with styling web forms.

20. 5 Techniques to Acquaint You With CSS 3

5 Techniques to Acquaint You With CSS 3 - screen shot.

Practice makes perfect; this tutorial from NETTUTS shows you how to learn about CSS3 by using it. This article covers things like adding drop shadows to page elements and changing an element’s opacity.

Are you using CSS3 today?

Have you incorporated CSS3 into your web development practices? Where are you at in terms of learning about CSS3? Share your thoughts and experiences with all of us in the comment section.

Related content

30 Comments

Webmasterish

January 28th, 2009

Very useful indeed!

Timothy

January 28th, 2009

I love what CSS3 has to offer, but it won’t be of much use until people move away from IE6 & IE7

Carter Harkins

January 28th, 2009

The future is looking good!

Brooklynne

January 28th, 2009

After reviewing my stats for both my blog and my website I have come to the conclusion that about 97% of my readers use css3 friendly browsers with a majority on firefox… So I have decided to sit down and start learning css3 and really giving it a go….

Jacob Gube

January 28th, 2009

@Timothy: In a way, that’s true – but there are ways, such as the concept of Progressive Enhancement, that you can utilize so that you can have a design that will work in IE yet still be able to give users of modern browsers a better experience. The resource above called “Progressive Enhancement with CSS 3” explains this concept very well.

@Brooklynne: Good for you! But I’d suggest, just as a good practice, not to neglect the 3% of your users that do use other browsers. It’s definitely worth getting up to speed with CSS3, but it’s also important to know that many browsers don’t fully implement the most recent CSS3 specs.

insic

January 29th, 2009

nice post. very useful to someone like me learning css3.

kiran

January 29th, 2009

Great Post.Thanks for sharing.

jon

January 29th, 2009

nice post

Two more site you should add on your css3 listing:

http://www.csshook.com
http://www.csscody.com

thanks

Karl

January 29th, 2009

Good summary of links there, thank you.

My upcoming redesign will use CSS3 and HTML 5. I don’t really get the opportunity in corporate land, especially when the user base is IE6 :(

I’m finding it good for the soul to stretch out like that – I’m even saying goodbye to IE6.

Regards, Karl

Shane

January 29th, 2009

@Jacob – your comment to Timothy is something I’ve seen quite a few people complain about in blog posts – that lack of support for CSS3 by IE6/7 is a problem.

I know I’m repeating you here, but it really isn’t. There are other browsers that DO support it. Start using CSS3, start having fun with it. Don’t rely on it, since IE6/7 market share is large, but give those users with more capable browsers that something a little nicer. This is exactly the essence of progressive enhancement.

If we stuck to the lowest common denominator, things would never move forwards!

Adam

January 29th, 2009

Great resource, I have been using CSS3 techniques for a while now to enhance some pages for people browsing with CSS3 browsers; however normally I would have to make sure sites looked perfect in all browsers so using these techniques has become more of an inconvenience and not a real solution at this stage. It’s a real shame it’s going to be years before the vast majority of users will be on css3 friendly browsers.

@Brooklynne: I think 97% is an usually high amount, you would normally see at least 30% on ie6/7 alone; across the 5 sites I manage its more like 60% of users are browsing with CSS3 support. You’re lucky to have such a good set of visitors!

Jacob Gube

January 29th, 2009

@Karl: Keep us posted on your site’s redesign using CSS3. Will you be using progressive enhancement to serve alternate styles to old/legacy browsers that don’t support CSS3?

@Shane: That’s the one thing I want to outline in this post: experiment, and experiment now. The reason is that you want to be ahead so that when the time comes and CSS3 has been assimilated fully (much like CSS2), you’re already up to speed. Plus it’s great practice to learn the principles of progressive enhancement, which is very important in our current environment with the proliferation of mobile devices and other non-traditional browsers. Thanks Shane!

@Adam: Yeah, but don’t get discouraged! The more the people in the front lines push (us – being web developers and designers), the quicker it will be for browsers to commit CSS3 specs. For now – we should talk about it, use it, experiment with it, look at places where W3C needs a hand, offer our help to The Web Standards Project which has done wonders in getting browsers to conform to web standards, and do whatever we can to get the word out.

As with @Brooklynne’s comment, I’m pretty sure it was an exaggeration just to underscore the point that the majority of her visitors use CSS3-capable browsers. With Six Revisions, it’s close to 85%.

Jonas Jacek

January 29th, 2009

I will check out number 13. Strange that I have never ever visited xhtml.com.

Anyway, nice list.

Coljung

January 29th, 2009

Very nice post !!

One question though, whats the compatibility of CSS3 with today’s browsers, aren’t we a bit behind ?

Jacob Gube

January 29th, 2009

@Coljung: Check out this page on CSS . Info, it’s called “CSS3 Module Status“. For modules that are already implemented by some browsers, you should see a link right beside it that says, “Compatibility Table”.

To make a long story short, browsers differ in what CSS3 specs they’ve committed to their most recent version. In terms of who’s the most up to date, I would say Opera at this point.

I hope that helps.

M.L. Zupan

January 31st, 2009

Great article – I’m glad css3 is finally getting finalized.

I think that web developers should do what everyone else does when it comes to upgrades – Not Support legacy software. Build flashing signs that tell people they have a legacy piece of property and a big click button showing them where to upgrade – they will upgrade.

That would solve a lot of reverse designing issues and the web world would be able to move ahead a whole lot faster.

Geoserv

February 2nd, 2009

Wow, I’m another one of those who hasn’t heard of most of these.

When will CSS3 be finalized?

Steven Dobbelaere

February 20th, 2009

Now, all we have to do is wait about 5 years until users switch from IE6 and IE7 to decent browsers using CSS3.0 to start using it.

alex Kuet

February 22nd, 2009

Beatifull post. Thanks for your work for us. Very usefull links for me to learn css3.

Joy

March 14th, 2009

Very good resources on CSS3. However, I would wait until it is finalized and all browsers fully support it. Though the learning curve can be shorted by learning it ahead of time of course.

Jyoti Kumar

June 2nd, 2009

Nice Post, Thanks for sharing this.

kodes

November 22nd, 2009

Very good resources on CSS3. However, I would wait until it is finalized and all browsers fully support it. Though the learning curve can be shorted by learning it ahead of time of course.

Rap

November 22nd, 2009

Ya you may seen all but not these, the best programs that will suite for your development are

1) webuilder 2008 (html,css,php,javascript and other)
(I use it for xhtml/css and javascript)

2) phpdesigner (It’s highly recommended for php dev and it’s also an IDE so you know what i mean you can work with other coding languages too)

Webstandard-Blog

March 2nd, 2010

Very helpful collection of CSS3-stuff, but if you want some more don’t miss the following two CSS3-Tutorials Website-Navigation ( based on Border-Radius ) or Sliding Navigation without JavaScript!

Hiphop

April 25th, 2010

Very good resources on CSS3. However, I would wait until it is finalized and all browsers fully support it. Though the learning curve can be shorted by learning it ahead of time of course.

mask

April 26th, 2010

Great resource, I have been using CSS3 techniques for a while now to enhance some pages for people browsing with CSS3 browsers; however normally I would have to make sure sites looked perfect in all browsers so using these techniques has become more of an inconvenience and not a real solution at this stage. It’s a real shame it’s going to be years before the vast majority of users will be on css3 friendly browsers.

@Brooklynne: I think 97% is an usually high amount, you would normally see at least 30% on ie6/7 alone; across the 5 sites I manage its more like 60% of users are browsing with CSS3 support. You’re lucky to have such a good set of visitors!

Martin Lachapelle

May 20th, 2010

Like always great ressources…
dyscovering six Revisions…
merci beaucoup
Tkx a lot

betaboy

July 11th, 2010

How to make the inclined gradient set in degrees, for webkit, like here? http://emfire.ru/

Guillermo Anidi

January 18th, 2011

Remarkable Submit, concerning being reading this internet site recent hours but right away we spent the time to say thanks for one’s understanding you’ll be selling around.

serack preston

June 28th, 2011

It is very good to do a transition to CSS3. But the future is not far where all will be using the updated version of browsers.

Leave a Comment

Subscribe to the comments on this article.

Mobify empowers marketers and developers to create amazing mobile web experiences. Tap to learn more

Mobify