News Flash

Great article by @NeutronUK on how to create a print stylesheet using Firebug and the Web Developer Toolbar - http://cot.ag/bOQiVM

Blog:

17 July 2009

30 Essential CSS3 Resources

By Ryan Carson

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.

58

Enjoy this article?

If you liked this article, feel free to re-tweet it to let others know. Thanks, we appreciate it :)

This post was written by

Ryan Carson

Ryan is an entrepreneur and father. He and his wife are the founders of Carsonified, a company in the UK that makes useful web apps and runs events, conferences and workshops. He posts his thoughts at twitter.com/ryancarson and RyanCarson.com. Watch an interview with Carsonified founder Ryan Carson at Smarta.

Related Articles

  1. Announcing the CSS3 Online Conference
  2. 23 Essential HTML 5 Resources
  3. Getting Started with Typekit
  4. Steve Smith on HTML5 and CSS3

We love .net Magazine

We're big fans of .net so they've hooked us up with a rad deal: Save 50 percent on your subscription.

CSS3 Online Conference March 22nd 2010 banner ad

58 Comments

Have your say:

Sign Up to our Newsletter

Enter your e-mail address below to receive regular updates on web design, web development and web business. Subscribe today and receive a free 44 page PDF "Designing Web User Interfaces" by Ryan Singer of 37signals.

Subscribe to the Think Vitamin articles RSS feed

Future of Web Apps Dublin May 14 2010

Think Vitamin Radio

Join host Keir Whitaker, Ryan Carson and Mike Kus for Think Vitamin Radio, a bi-weekly chat about web design, development and entrepreneurship. Listen to previous shows.

Think Vitamin Radio is kindly hosted by Buzzsprout

Recent Articles

News

Twitter

Follow us on Twitter

Subscribe

Article Subscribers

Feedburner blog subscriber indicator

News Subscribers

Feedburner blog subscriber indicator

Subscribe by Email

You can receive Think Vitamin updates via email. Just pop your email address in the box below and click the arrows.

Subscribe by RSS

You can also receive new Think Vitamin posts via your RSS feed reader

Subscribe RSS Think Vitamin is a proud member of the Smashing Network

Ads Via The Deck

Address:

19c Charles Street,
Bath BA1 1HX.
United Kingdom

Registered in England.
Company No. 5057020

Contact:

T: +44 1225 324 980
E: hello@carsonified.com

In partnership with

mediatemple logo