Learn30 Essential CSS3 Resources

Treehouse
writes on July 17, 2009

Share with your friends










Submit

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.

60 Responses to “30 Essential CSS3 Resources”

  1. Could I point out to two CSS3 tutorials I’ve written for my blog? One is about the border-radius property (http://www.bloggingcss.com/en/tutorials/the-css3-border-radius-property/) and the other is about the box-shadow property (http://www.bloggingcss.com/en/tutorials/css3-box-shadow-property/).

    I think they’re pretty good, but you can check that for yourself 😉

  2. Great list! I look forward to going through all of them. I have also added it to my feature list at http://geek.michaelgrace.org/webnet/ Keep up the good work!

  3. Great list! Added to my Delicious and Stumble bookmarks.

    Quick point: Perhaps anchor the .comments-count link to #respond if no comments? :)

    Loving the new site design. Those illustrations either side are new since the launch as well aren’t they?

    • Ryan Carson on July 17, 2009 at 12:56 pm said:

      Hey Kev,

      Thanks for the kind feedback. Yes, the illustrations are new – Mike added them. They were there before we launched and we removed them last minute.

      All the best,
      Ryan

  4. Great list which now are bookmarked and added to the Swedish version of Digg.

  5. Might also want to check out my CSS 3 Quick Reference Guide:
    http://www.veign.com/reference/css3-guide.php

    Would make a great addition to your list.

  6. I won’t be able to read all of the articles in this and the other list for HTML5. It would be a better to alot of the readers if you narrowed it down to essentials, highligthed the best ones – or wrote on the topic(s).

    Waddaya say?

    • Ryan Carson on July 17, 2009 at 4:23 pm said:

      @ Tor

      Thanks for the feedback. Essentially we’re posting one large ‘feature’ per week and five ‘quick’ posts. This round-up of 30 CSS3 resources is a quick post. Unfortunately we don’t have the manpower to write a full length feature article every day. Sorry!

      Best,
      Ryan

  7. Amazing post..! thanks for sharing Ryan

  8. great collection. :)

  9. Thank you for sharing these vital resources to make the Web simpler for older folks. I believe that Web 3.0 will be the easy-to-use platform for all ages.

  10. Great article, if you know of any worthy sites using css3 please feel free submit them on our new CSS3 Gallery

  11. Cool site, love the info.

  12. Very nice list – thanks for sharing.

  13. what web editor support css3 ??

  14. Very nice. I am currently working on a re design of my site and plan on incorporated a good amount of css3.

  15. This is an incredible post. Its amazing to see what CSS3 can do , at the same time its sad a lot of customers still want IE support which sucks at CSS3 big time. I am taking the liberty of adding this article to my CSS aggregator site at http://www.cssfind.com . Hope you dont mind. :)

  16. Thanks for the list! I’ve written a few CSS3 tutorials as well that I’ve put online such as this Flip Animation tutorial: http://www.qmobile.com.au/css3-tile-flip-animation-tutorial

  17. Thanks for showing all the amazing things CSS3 can do. I can’t wait to start using more of these.

  18. Anonymous on March 5, 2011 at 3:46 am said:

    Very informative. Thanks!

  19. Anonymous on March 5, 2011 at 3:56 am said:

    Very informative.

  20. The same thin also happened to me, very love this article. 😀

Leave a Reply

Learn to code with Treehouse

Start your 14 day free trial today and get access to hundreds of video courses in web development, design and business!

Learn more