Article 59 Tweet

30 Essential CSS3 Resources

By Ryan Carson @ryancarson

17 July 2009 | Category: Code, CSS3

Editor's Note: There is CSS3 and HTML 5 workshop at FOWD NYC. Hope you can join us!

Web designers around the world are extremely excited about the power of CSS3 and the creative freedom it offers. With that in mind, we've rounded up 29 resources for you to learn more.

CSS3 Resources

1. Push Your Web Design Into The Future With CSS3 – A good intro to CSS3 by Smashing Magazine
2. CSS3 Previews – A great article with demos of various CSS3 features
3. W3C – Cascading Style Sheets, Current Work – If you want to follow the development of CSS3, this page is the place to start.
4. W3C’s CSS3 Roadmap – An introduction to CSS3 by the W3C, and where it’s headed.
5. Dan Cederholm’s Handcrafted CSS Workshop – A valuable workshop by Dan Cederholm and Ethan Marcotte (Salem Massachusetts, $399)
6. Border-radius: create rounded corners with CSS – A demo of of how border-radius works
7. Border-image: using images for your border – How to use border-image
8. Box-shadow, one of CSS3’s best new features – A demo of how to use box-shadow
9. RGBA colors – How to add transparency to your colors
10. How to get @font-face to work in IE – A hack that allows you to use font embedding in Internet Explorer
11. Web Fonts – A great article on font embedding from A List Apart
12. Fonts available for @font-face embedding – Ignore the ugly styling of this page – it’s a great list of currently available fonts for @font-face
13. Handcrafted Bulletproof CSS – Our workshop taught by Dan Cederholm, who will guide you though a case study, pointing out the details that matter most when designing flexible, bulletproof designs (London, £375+VAT)

CSS3 Tutorials

1. HTML 5 and CSS 3: The Techniques You’ll Soon Be Using – A useful tutorial that walks you through building an HTML 5 site and adding CSS3 features
2. Liquid faux columns with background-size the CSS3 way – How background-size is going to make your life a lot easier.
3. CSS3 Opacity – How to add opacity to your images and text
4. CSS3 Text-Wrapping – How to properly use the text-wrap property in CSS3
5. Introducing the CSS3 Multi-Column Module – The W3C multi-column module is a CSS level-three working draft, proposed by the W3C to extend the current CSS box model. This article from A List Apart shows you how to use it.
6. Rounded Corner Boxes the CSS3 Way – A useful article on 24ways that explains how to build rounded corners with CSS3
7. Css3 Attribute selectors – A technical tutorial on how to use the advanced attribute selectors in CSS3
8. A mock-up interface using CSS3 Colour – Really cool example of what’s possible with CSS3 Colour. Read the article and then check out the demo.
9. Making an image gallery with :target – How to use the new CSS3 selector :target pseudo-class
10. Styling Forms with Attribute Selectors – A great tutorial from Dev.Opera
11. Tooltips with CSS3 – How to make use of the :before (or :after) pseudo element and content property, combined with the :hover pseudo class to create nice tooltips.
12. Stay on :target with CSS3 – Our very own tutorial on using the :target pseudo selector
13. CSS3 and International Text – An overview of the CSS3 modules currently in development that will introduce a large number of properties designed to support non-Latin text.
14. Using CSS 3 selectors to apply link icons – A quick tutorial on how to add handy icons to links.
15. Semantic code: put more in, get more out with CSS3 – A quick tutorial on how to use semantics so that you get more out of CSS3 selectors.
16. CSS 3 selectors explained – A good intro by 456 Berea St.
17. CSS text shadows and background sizing – A good tutorial from Dev.Opera that will show you how to use text-shadow and background-size.

We hope you find these resources valuable. Please point out other articles that we’ve missed by adding them in the comments.

Other Posts You Might Find Interesting

• Sorry - No Related Posts Found