CSS3 Tutorials and Resources

In my effort to keep up with my resolution this month, here is another list of some goodies. CSS3 is already a hit and still many designers/developers haven’t tried their hands on it. Well, CSSJockey to their rescue. :-) Worry no more, Resources are galore!!!

Resources:

1. Smashing Magazine – Push Your Web Design Into The Future With CSS3

A good intro to CSS3 by Smashing Magazine

2. CSS3.Info – Introducing the Flexible Box Layout Module

Know more about the one aspect of CSS3, that hasn’t received a lot of attention so far, i.e., Flexible Box Layout module in action.

3. W3C – Introduction to CSS3

Let the Big Guys show you the road map of CSS3 and how it works.

4. Desizn Tech – 20 Must Know Recent CSS and CSS3 Resources and Tools

Presenting 20 recent CSS & CSS3 tools and resources you need to be aware of as a web designer/developer.

5. Smashing Magazine – CSS 3 Cheat Sheet (PDF)

Get the main features of CSS3 in a handy, printable reference card with this download-able Free PDF.

6. Design Shack -Introduction to CSS3

Start from the very beginning – from not having even heard of CSS3, to feeling ready to hit it running as various features start to become more widely adopted.

7. Smashing Magazine – Stronger, Better, Faster Design with CSS3

Use CSS3 techniques like gradients, border-radius and drop-shadows to create compelling, flexible and buttons (and a little JavaScript) to create some practical elements and layouts.

8. CSS.Info – CSS3 Resource: Preview Custom Web Fonts with Font Dragr

Font Dragr is a HTML5/CSS3 powered web app for testing custom web fonts. This useful app allows web designers to preview how embeddable fonts will render in their target browsers without having to code a single line of html/css and without having to upload any files via ftp.

9. Smashing Magazine – 50 Brilliant CSS3/JavaScript Coding Techniques

50 useful and powerful CSS3/jQuery-techniques that can strongly improve user experience, improve designer’s workflow and replace dirty old workarounds used in Internet Explorer 6 & Co.

10. CSS.Info – CSS3 Demos

CSS3 . Info is an enormously comprehensive site about all things CSS3-related. They share news, interviews, and resources from around the web regarding CSS3.

11. Six Revisions – 20 Useful Resources for Learning about CSS3

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 Six Revisions brings you 20 excellent resources on the topic of CSS3.

12. A List Apart – CSS @ Ten: The Next Big Thing

Revisit the past and chart the future of CSS.

13. Smashing Magazine – Mastering CSS, Part 2: Advanced Techniques and Tools

Mastering CSS is one of the most important things a web designer can do, and has really become an essential criterion for being a successful designer.

14. Inspect Element – A Look at Some of the New Selectors Introduced in CSS3

Everyone who has been using CSS is immediately familiar with selectors as they are what is used to target elements on a page and style them. CSS3 brings even more options as far as selecting elements goes. Here is a run-down of just some of the things that is possible with CSS3 selectors.

15. W3Avenue – CSS3 Unleashed: Tips, Tricks and Techniques

A quick look at the numerous new features incorporated in CSS3 that will get you up to speed and bring you closer to the cutting edge of CSS development.

Tutorials:

1. Net Tuts – 5 Techniques to Acquaint You With CSS 3

CSS is a well-known, widely used language to style websites. With version three in the works, many time-saving features will be implemented. Although only the most modern browsers currently support these effects, it’s still fun to see what’s around the corner! In this tutorial I’ll show you five techniques.

2. CSS3.Info – CSS3 Opacity

The most widely implemented feature of CSS3 up till now is opacity. It’s probably also the one people have been waiting for the most.

3. Dev Opera – CSS Text Shadows and Background Sizing

Learn how CSS properties: text-shadow and background-size can add unique twists to everyday Web design with minimal effort.

4. Net Tuts – CSS Fundamentals: CSS 3 Transitions

As CSS3 rolls out around the web, it is bringing some interesting new presentational techniques along with it. Today, we’ll review the basics of using CSS3 transitions and animations to add an extra layer of polish.

5. 24 Ways – Rounded Corner Boxes the CSS3 Way

Learn to add not one, not four, but eight background images to a single element with CSS3.

6. A List Apart – Introducing the CSS3 Multi-Column Module

While most computer screens are wider than tall, most websites are the exact opposite: longer than wide.

7. Net Tuts – Design a Prettier Web Form with CSS

Thanks to advanced CSS properties, such as gradients and shadows, it’s now quite easy to turn a dull web form into something beautiful – with minimal effort. Learn how in this interesting tutorial!

8. Smashing Magazine – 50 Brilliant CSS3/JavaScript Coding Techniques

50 useful and powerful CSS3/jQuery-techniques that can strongly improve user experience, improve designer’s workflow and replace dirty old workarounds used in Internet Explorer 6 & Co.

9. Desizn Shack – Introduction to CSS3 User Interface

CSS3 brings some great new properties relating to resizing elements, cursors, outlining, box layout and more. This tutorial focuses on three of the most significant user interface enhancements.

10. Max Design – CSS Centering: Fun for all!

How do you center a containing block on a page using CSS? There are two main methods and the choice should be made based on whether your page layout is liquid (will move in and out depending on the size of the browser window) or fixed width.

11. Apples to Oranges – CSS For Bar Graphs

Learn to create flexible, inexpensive and interesting visualizations, coded in xHTML and CSS.

12. The Wojo Group – CSS Stacked Bar Graphs

Learn to create a stacked bar graph in a one of its type tutorial.

13. Arc90 – Link Thumbnail

A picture’s worth a thousand words, right? So, spice up those plain old text links with Link Thumbnail, this great tool from the arc90 lab.

14. 3point7designs – Advanced Typography techniques using CSS

This is an example of what you can do by combining and tweaking type using CSS.

15. A List Apart – Mountaintop Corners

Learn to create the widely loved rounded corners with a new look.

So, here I did my bit to share the best of resources and tutorials on the web. If you know better resources or tutorials for any of the above features or more than the above, be kind & share your best knowledge!

36 thoughts on “CSS3 Tutorials and Resources”

  1. Very nice collection of CSS3-Stuff, but I miss Bouncing Navigation & Sliding Menu ( without JavaScript an Images )!

    1. CSSJockey says:

      Thanks for sharing :)

  2. Awesome collection of CSS3 resources…thanks for posting this!

  3. Thanks! I especially like the bar graphics one. Statistics are fun.

  4. Awesome Resource, you always share great info. Thanks!

  5. Navi says:

    Great list, thanks for sharing ! The link thumbnail tool looks pretty nice 😮

  6. Andrew says:

    This is a good collection of CSS resources for website designers. You could also check out Sitepoint as they too keep a lot of useful material.

    1. CSSJockey says:

      Thanks Andrew, I like sitepoint they really have good stuff for us all.

      1. Edwar says:

        Thanks for the amazing info. I find these posts have a lot of maiartel. I can’t wait to get a chance to impliment all these great posts. Thank you very much.

  7. sucuk says:

    thanks for resources. bookmarked it

  8. It’s a great and useful collection, thanks!
    I’m sure that some day soon, we all as designers and developers will need to adopt to the changes that are being done to create one standard for html and css.

    1. CSSJockey says:

      Thanks, Eagerly waiting for that day :)

  9. CSS3 absolutely rocks for my designs! I’m using CSS border-radius, box-shadows and gradients for my new websites. IE alternatives for the shadows and gradients are a couple of Microsoft filters.

    Do you guys know which other CSS3 visual effects work in all browers, IE not included?

  10. Dharne says:

    With HTML5 already in the news, it won’t take much time for CSS3 to be deservedly out there. Great resources

    1. CSSJockey says:

      Agree, but I am sad that HTML5 doesn’t work with IE without Javascript so we need to wait till Microsoft takes some action. You can use HTML5 If you can afford to ignore IE users with Javascript disabled on their browsers. Same goes with CSS most of the code doesn’t work on this buggy browser. I hope it resolves soon.

  11. Wandtattoo says:

    Very nice css artikle. Best regards Maike

      1. Humberto says:

        CSS is the most important part of dsgien. It can make or break a site. CSS literally defines the goal of a site. Lightweight? Brilliant-looking? Heavy? It can all be defined through CSS. A basic knowledge of html is easy, but I still have to master the CSS part.

  12. Wow – what a list! This is going to be interesting to investigate – thanks a lot! :-)

  13. Phillip says:

    nice articel thanks

  14. This article seems like a very valuable CSS3 resource. I havn’t been diving really deep into it but I definitely want, and need to. So this post will definitely added to my CSS3 favourites! :-)

  15. Paul Web says:

    CSS Jockey indeed! When I decided to really learn all I could about CSS this was one of the first sites I found and you’ve never disapointed me. I’m glad you are keeping on top of all the new developments and resources out there – for me that would be a full-time job, and I already have one! So Thanks!

  16. Katie Dawson says:

    Thanks for sharing this CSS3 resources! :)

  17. suraj says:

    Hi Mohitji nice list, started to learn CSS and this list definitely help me a lot!!
    Thank you very much!

  18. Awesome collection!
    Will take a while to investigate it al :)

  19. Jasdeep says:

    Absolutely Helpful and amazing

  20. lokum says:

    thanks for resources. bookmarked

  21. sawebdesigns says:

    Great collection thank your for sharing

  22. Awesome collection of CSS3 resources…thanks for posting this! This is just what i was looking for :)

  23. Wandtattoo says:

    Very nice artikle.
    Best regards from Wandtattoo Kings

  24. Viktor Wandtattoo says:

    Very helpful blog of CSS Articles, thank you for posting.

    Best Regards
    Viktor

  25. hcg drops says:

    Good reading. Thanks for taking the time. I’ll definitely return again to find out more and tell my coworkers about this, hcg.

Leave a Comment

Your email address will not be published.*

*