30 Essential CSS3 Resources

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.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Treehouse

Our mission is to bring affordable Technology education to people everywhere, in order to help them achieve their dreams and change the world.

Comments

60 comments on “30 Essential CSS3 Resources

  1. 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?

    • 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

  2. Pingback: Internet Brain » Carsonified » 30 Essential CSS3 Resources

  3. 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?

    • @ 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

  4. Pingback: CSS3 Resources: http://carsonified.com/b… « LinkJAMB

  5. Pingback: links for 2009-07-17 | Digital Rehab

  6. Pingback: links for 2009-07-18 » 4exp.net

  7. Pingback: Digital Media Buzz - 30 Essential CSS3 Resources | Digital Media Buzz

  8. Pingback: ASAP – As Simple as Possible » Blog Archive » WebDev Weekly #29

  9. Pingback: 30 Essential CSS3 Resources | Design Newz

  10. Pingback: Cool articles – SEO, blogging, internet marketing(july13-july19 2009) « Stefanm, my link collection

  11. 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.

  12. Pingback: HTML5, CSS3 y el futuro del desarrollo Web | Incubaweb

  13. Pingback: Kick-Ass Squeeze – July 2009

  14. Pingback: 70 Must-Have CSS3 and HTML5 Tutorials and Resources | trackteq.com

  15. Pingback: 70 Must-Have CSS3 and HTML5 Tutorials and Resources - Iconlandia

  16. Pingback: AMB Album » 70 Must-Have CSS3 and HTML5 Tutorials and Resources

  17. Pingback: 70+ 必备的 CSS3 和 HTML5 教程资源

  18. Pingback: Adept > 70 Must-Have CSS3 and HTML5 Tutorials and Resources

  19. Pingback: 30 Essential CSS3 Resources « Vleerkatcreations

  20. Pingback: 70 CSS3 and HTML 5 tutorials and resources | Netfire.us - Design tutorials, articles, resources, and creative inspiration.

  21. Pingback: 250+ Resources to Help You Become a CSS Expert | Webdesigner Depot

  22. Pingback: 30 Essential CSS3 Resorces | Teevolutions Blog

  23. Pingback: 250+ Resources to Help You Become a CSS Expert - MixTech

  24. Pingback: Free Resources to Help You Become a CSS Expert Designer, | guidesigner.net

  25. Pingback: 250+ Resources to Help You Become a CSS Expert | X Design Blog

  26. Pingback: CSS3 Gallery, Showcase & Inspiration. Showcasing the best CSS3 Web Design on the Internet | 70 CSS3 & HTML5 Tutorials | CSS 3 Gallery

  27. Pingback: 250+ Resources to Help You Become a CSS Expert | huibit05.com

  28. Pingback: Guia para estudar CSS | import Zeh.Design

  29. Pingback: CSS3 y HTML5: Tutoriales y recursos para el nuevo diseño web | Recursos para desarrollo y diseño web - AlmacenPlantillasWeb Blog

  30. Pingback: Mes favoris du 5-09-09 au 7-09-09

  31. Pingback: 20+ Sumber yang akan membuat anda menjadi CSS Master « Webdesigner Resource

  32. Pingback: Tero Auralinna

  33. Pingback: CSS3 – katsaus ominaisuuksiin

  34. Pingback: Fundamental CSS3 Resources for Designers | Son Of Byte

  35. Pingback: 250+资源帮助你成为一个CSS专家 - 唯创网站设计博客

  36. Pingback: Recursos fundamentales sobre CSS3 para diseñadores | Cosas sencillas

  37. Pingback: Utilidades y recursos CSS3! | Carlos Zapata

  38. Pingback: 70+ 必备的 CSS3 和 HTML5 教程资源 « SomeDay I'll Fly | Gabriel's blog

  39. Pingback: 70+ 必备的 CSS3 和 HTML5 教程资源 « SomeDay I'll Fly | Gabriel's blog

  40. Pingback: 350+ Recursos para ser un CSS3 Master - Pablo Di Filippo

  41. Pingback: 70 Fantastic CSS3 and HTML5 Tutorials and Resources | DesignerWall

  42. 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. :)