Loading content, Please wait..

CSS3 Tutorials and Resources

Posted under: HTML & CSS
20 Comments | 4317 Views | Share This

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

Into The Future With CSS3

Into The Future With CSS3

A good intro to CSS3 by Smashing Magazine

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

Introducing the Flexible Box Layout Module

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

W3C - Introduction to CSS3

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

Desizn Tech - 20 Must Know Recent CSS and CSS3 Resources and Tools

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)

Smashing Magazine - CSS 3 Cheat Sheet

Smashing Magazine - CSS3 Cheat Sheet

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

6. Design Shack -Introduction to CSS3

Design Shack -Introduction to CSS3

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

Smashing Magazine - Stronger, Better, Faster Design with CSS3

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

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

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

Smashing Magazine - 50 Brilliant CSS3/JavaScript Coding Techniques

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

CSS.Info - CSS3 Demos

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

Six Revisions - 20 Useful Resources for Learning about CSS3

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

A List Apart - CSS @ Ten: The Next Big Thing

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

Smashing Magazine - Mastering CSS, Part 2: Advanced Techniques and Tools

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

Inspect Element - A Look at Some of the New Selectors Introduced in CSS3

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

W3Avenue - CSS3 Unleashed: Tips, Tricks and Techniques

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

Net Tuts -  5 Techniques to Acquaint You With CSS 3

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

CSS3.Info - CSS3 Opacity

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

Dev Opera – CSS Text Shadows And Background Sizing

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

Net Tuts - CSS Fundamentals: CSS 3 Transitions

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

24 Ways - Rounded Corner Boxes the CSS3 Way

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

A List Apart - Introducing the CSS3 Multi-Column Module

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

Net Tuts - Design a Prettier Web Form with CSS

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

Smashing Magazine - 50 Brilliant CSS3/JavaScript Coding Techniques

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

Desizn Shack - Introduction to CSS3 User Interface

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!

Max Design - CSS Centering: Fun for all!

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

The Wojo Group - CSS Stacked Bar Graphs

The Wojo Group - CSS Stacked Bar Graphs

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

12. The Wojo Group – CSS Stacked Bar Graphs

The Wojo Group - CSS Stacked Bar Graphs

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

Arc90 - Link Thumbnail

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

3point7designs - Advanced Typography techniques using CSS

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

A List Apart - Mountaintop Corners

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!

20 Responses to “CSS3 Tutorials and Resources”

 


05 Jul, 2010

nice articel thanks

 


24 Jun, 2010

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

 


17 Jun, 2010

Very nice css artikle. Best regards Maike

 


22 Jun, 2010

Thanks!!

 


13 May, 2010

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

 


16 May, 2010

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 May, 2010

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?

 


16 May, 2010

I believe this will help, check it out http://findmebyip.com/litmus/#target-selector

 


08 May, 2010

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.

 


16 May, 2010

Thanks, Eagerly waiting for that day :)

 


24 Apr, 2010

thanks for resources. bookmarked it

 


30 Mar, 2010

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.

 


19 May, 2010

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

 


29 Mar, 2010

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

 


21 Mar, 2010

Awesome Resource, you always share great info. Thanks!

 


18 Mar, 2010

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

 


16 Mar, 2010

Awesome collection of CSS3 resources…thanks for posting this!

 


15 Mar, 2010

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

 


15 Mar, 2010

Thanks for sharing :)

Leave a Reply


This field is required.



This field is required.




I want to thank you for developing my site as per my design and helping me meet my web requirements on time and as per my need. I am sure we can work together on more projects in the future.
~ Teddy Jacob | TeddyJacob.net

"Mohit did an excellent job on a web project for me. The look, design, and service were all great. I really appreciated his work and the time he took to explain things. I highly recommend Mohit." ~ Chris Barnstable-Brown
Top qualities: Great Results , Good Value , On Time

"After hiring Mohit for the first time in 2007... I kept on consulting, hiring, and using Mohit's expertise in many website development projects where he exhibited unique talent in delivering his work on time and on budget." ~ Ali Husain
Top qualities: Great Results , Expert , On Time

"CSSJOCKEY is AWESOME. His work was fast, extremely well executed and we will DEFINITELY use his services in the near future. Having someone like this in our team makes life a hell of a lot easier. We absolutely 110% recommend using his web services." ~ Dan Atkins, Creator of the Superhero Mindset Programme

"Mohit is the Man! He whipped up a custom design for his coming soon plugin within a day and nailed it. His plugin is so easy to install and set up. I couldn't be more happy! He responded to my inquiry very quickly and answered all my questions. I'll definitely use his services again in the near future." ~ Client (Rebecca Cunningham)

"CSSJockey designed a very clean and beautiful layout for us and then built an easy to manage website. The project was quick and painless, a pleasure for sure." ~ Client (NDA)

Awesome theme! Thanks much. I love this theme, especially granite and copper dust.. ~ Vivek

Accredits & Testimonials!