33 Must Read CSS3 Tips, Tricks, Tutorial Sites and Articles

Posted in Coding, HTML & CSS, Tutorials5 years ago • Written by 43 Comments

title-css3-useful-webdev-webdesign-resourcesSince previous article about CSS text effects got really big attention I decided to research and find more interesting articles and websites just focused on CSS3, teaching you how to use it, showing pros and cons and much more. To be honest it’s hard for me to keep up with technologies myself, but we really cannot not to use those new great selectors to make our designs even more beautiful, user-friendly and lightweighted. However since HTML5 is sort of tied with CSS3, I will soon continue with HTML5 article as well, so don’t miss it and keep coming back! Enjoy!

 

1. Take Your Design To The Next Level With CSS3

In this article you’ll learn why CSS3 should be used and how web designers use it already in good way. Great article for getting you started with CSS3.

next-level-sm-css3-useful-webdev-webdesign-resources

 

2. Push Your Web Design Into The Future With CSS3

Here are five CSS3 techniques snatched from the future that you can put into practice in your website designs today.

future-sm-css3-useful-webdev-webdesign-resources

 

3. Super Awesome Buttons with CSS3 and RGBA

Learn how to create super cool, scalable buttons with CSS3.

buttons-css3-useful-webdev-webdesign-resources

View Demo

 

4. A Look at Some of the New Selectors Introduced in CSS3

selectors-css3-useful-webdev-webdesign-resources

 

5. CSS 3 Cheat Sheet (PDF)

This is printable CSS 3 Cheat Sheet (PDF), a complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C. Each property is provided in a section that attempts to match it with the section (module) that it is most actively associated within the W3C specification.(Download *pdf)

cheat-sheet-css3-useful-webdev-webdesign-resources

6. CSS3.Info

CSS3 is the new kid in the stylesheet family. It offers exciting new possibilities to create an impact with your designs, allows you to use more diverse style sheets for a variety of occasions and lots more. Also check excellent CSS3 Preview page there, which shows demos of new features.

info-all-css3-useful-webdev-webdesign-resources

 

7. Get Started with CSS 3

Beautiful CSS3 tutorial article explaining several new CSS3 features and giving solutions how to create them actually.

webmonkey-css3-useful-webdev-webdesign-resources

 

8. Introduction to CSS3 – Part 1: What Is It?

These six part series are providing an introduction to the new CSS3 standard which is set to take over from CSS2 from DesignShack.

designshack-css3-useful-webdev-webdesign-resources

 

9. Accessibility Features of CSS from W3

This document summarizes the features of the Cascading Style Sheets (CSS), level 2 Recommendation ([CSS2]) known to directly affect the accessibility of Web documents. Some of the accessibility features described in this document were available in CSS1 ([CSS1]) as well. This document has been written so that other documents may refer in a consistent manner to the accessibility features of CSS.

w3-css3-useful-webdev-webdesign-resources

 

10. Progressive Enhancement with CSS 3: A better experience for modern browsers

In this article you will look at how you can use graceful (or, progressive) enhancement techniques to make use of CSS3 features in browsers that support them, while ensuring that your code will still provide a satisfactory user experience in older browsers that do not yet support those features.

 

11. Conversation with CSS 3 team

In this article, xhtml.com interviews Bert Bos, chair of the CSS Working Group at W3C, about the next release of the CSS specification and how past design decisions are influencing the future of CSS. This interview offers a rare opportunity to learn more about the inner workings and thought processes of the CSS Working Group at W3C.

conversation-css3-useful-webdev-webdesign-resources

 

12. Six Questions: Eric Meyer on CSS3

Great interview with Eric Meyer about CSS3.

eric-meyer-css3-useful-webdev-webdesign-resources

 

13. The fundamental problems with CSS3

This article brings up several problems and issues with CSS3, interesting reading.

problems-css3-useful-webdev-webdesign-resources

 

14. CSS3 Exciting Functions and Features: 30+ Useful Tutorials

In this post you will take a look at some interesting properties of CSS3 that you can put into practice in your website designs today.

exciting-functions-css3-useful-webdev-webdesign-resources

 

15. Old School Clock with CSS3 and jQuery

old-school-clock-css3-useful-webdev-webdesign-resources

 

16. The CSS3 border-radius property (Not Valid Anymore)

One of the CSS3 properties designers have been longing the most for is undoubtedly the border-radius property. With CSS3 border-radius property it’s possible to create the so popular rectangles with rounded corners exclusively via CSS – no images needed.

border-radius-css3-useful-webdev-webdesign-resources

 

17. Get the best out of CSS3

Craig Grannell turns into a cross between Jeffrey Zeldman and Russell Grant, taking a peek at what the future of CSS has to offer – with a little help from Opera, Safari and Firefox

craig-grannell-css3-useful-webdev-webdesign-resources

 

18. How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3

sliding-jquery-css3-useful-webdev-webdesign-resources

View Demo

 

19. Rounded Corner Boxes the CSS3 Way

rounded-css3-useful-webdev-webdesign-resources

 

20. #57: Using CSS3 by Chris Coyier

This screencast covers many of CSS3 techniques now possible, focusing on the ones that can be used for progressive visual enhancement. Border radius, @font-face, animations/transitions, text-shadow, box-shadow, multiple backgrounds, RGBa, gradients, border image.

chris-coyier-css3-useful-webdev-webdesign-resources

 

21. HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

In this tutorial, your are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them.

layout-html5-css3-useful-webdev-webdesign-resources

View Demo

 

22. 11 Classic CSS Techniques Made Simple with CSS3

In this tutorial from Nettuts you will learn eleven different time-consuming effects that can be achieved quite easily with CSS3.

11-simple-css3-useful-webdev-webdesign-resources

 

23. CSS 3 selectors explained – Overview of CSS 3 selector syntax

explained-selectors-css3-useful-webdev-webdesign-resources

 

24. 3 Easy and Fast CSS Techniques for Faux Image Cropping

faux-image-css3-useful-webdev-webdesign-resources

 

25. CSS3 Borders Preview

CSS3 takes borders to a new level with the ability to use gradients, rounded corners, shadows and border images. Mozila, Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items.

borders-css3-useful-webdev-webdesign-resources

 

26. CSS3 property tests

browser-support-css3-useful-webdev-webdesign-resources

 

27. CSS3 Background Images (Sizing & Multiple Imgs)

Background images / textures are being used and implemented in many ways, often adding the nicest of finishing touches to a website. It is now proposed that in CSS 3, we can apply background image dimensions as well as use multiple background images. Along with the +/- quick list of compatible browsers, here is how

bg-images-css3-useful-webdev-webdesign-resources

 

28. Overview of CSS3 Structural pseudo-classes

structural-pesudo-css3-useful-webdev-webdesign-resources

 

29. 5 CSS3 Techniques For Major Browsers using the Power of jQuery

techniques-css3-useful-webdev-webdesign-resources

 

30. jSlickmenu: A jQuery plugin for slick CSS3 menus

slick-jquery-menu-css3-useful-webdev-webdesign-resources

View Demo

 

31. Multiple Backgrounds (CSS3)

multiple-backgrounds-css3-useful-webdev-webdesign-resources

 

32. CSS: border-radius and -moz-border-radius

border-radius-moz-css3-useful-webdev-webdesign-resources

 

33. Modernizr

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

modernizr-css3-useful-webdev-webdesign-resources

193 Written ArticlesWebsiteGoogle+

Dainis is 25 years young man, who struggled for 3 years while studying in design academy and working for local design agency, because of ignorant teachers and agency boss. He couldn't believe this is all life could offer to him! And then he discovered true Internet possibilities, he was lucky to find his passion early in life and take advantage of this beautiful Information (Internet) Age! Now he is committed to help others succeed, to help others take charge of their life and follow their passion! His goal is to open Your eyes and help unveil Your true potential!

43 Comments Best Comments First
  • anggamovic

    Friday, June 10th, 2011 09:28

    33

    nice share.. may be i late to learn css3 and html 5, but its ok.. i learn now and i implement to my webpage…

    inspirate with mac leopard so i create style use css3 with little html5…..
    some tutor i use from this site.. so thanks for sharing…
    its useful…

    nb: sory for my english…

    +3
  • Chris Gilchrist

    Wednesday, October 13th, 2010 13:14

    29

    awesome list. thanks for sharing

    +3
  • Janek

    Saturday, October 23rd, 2010 21:04

    30

    Nice collection. Finally had a chance to use border-radius property on my site.

    +1
  • Miso

    Monday, March 29th, 2010 08:53

    26

    It’s really useful for me, thank much!!!
    Bookmarked.

    +1
  • Caricature

    Tuesday, February 23rd, 2010 13:20

    24

    Thanks , I just know the CSS3. Previously , I thinks, it has only CSS2.

    0
  • jayesh

    Monday, December 14th, 2009 15:28

    11

    I’ve been using some of the more popular CSS3 properties for some time — border-radius, box shadow.

    0
  • Omer Greenwald

    Sunday, February 28th, 2010 11:48

    25

    Totally useful collection of articles. No doubt you can some of these links are great way to learn the new features. thanks

    0
  • Asad

    Sunday, December 13th, 2009 08:43

    8

    Thanks, really nice and very useful

    0
  • Jon Crim

    Friday, December 11th, 2009 22:28

    1

    I’ve run across a few of these recently, but this puts many that I’ve seen and a bunch of others all in one place! Thanks for taking the time to put it together.

    @marco I checked out your tabbed navigation using CSS3 post yesterday, nice work!

    0
  • Ben

    Monday, December 21st, 2009 20:44

    17

    Wow! Very extensive list and tutorial on CSS3. I see that IE9 will support css3, but will previous versions of internet explorer support it?

    0
  • Deepu Balan

    Sunday, December 20th, 2009 19:59

    16

    Really useful list, thanks for this wonderful collection… Bookmarked for future reference. Thanks!

    -Deepu

    0
  • Sushant

    Tuesday, January 5th, 2010 20:37

    18

    I really never heard anything about css3. I read it for the first time from this post.

    0
  • Max Vx

    Friday, January 29th, 2010 13:28

    19

    Thanks for this collection! Very useful list!

    0
  • Chris

    Monday, December 14th, 2009 07:05

    9

    Great tips!

    Now I’ve modify the CSS of my block-quote to have rounded borders. It looks cool…!!

    Thanks for the information guys!

    0
  • Rajib Roy

    Monday, December 14th, 2009 15:12

    10

    It is very good articles. Thanks for share.

    0
  • Salman

    Monday, December 14th, 2009 11:10

    12

    Hi
    i was looking for this rounded corner with css. Very useful post.

    0
  • Fred

    Monday, February 13th, 2012 22:32

    42

    Very interesting. i’m newbie in html5 and css3. its awesome

    0
  • Benjamin Rama

    Friday, December 11th, 2009 20:10

    4

    thanks for these dainis very usefull i will read some of them soon when i have time

    0
  • Marco

    Friday, December 11th, 2009 18:59

    3

    Whoah – nice roundup with a great collection of several CSS3 articles. I’m currently writing a new CSS3 article, I hope you’ll like it too.

    Thanks for the inclusion!

    0
  • sid

    Wednesday, February 8th, 2012 13:35

    41

    I have a new css trick to show adsense ads eventhough your site is banned by adsense.

    0
  • Haurin

    Sunday, August 21st, 2011 06:26

    37

    What’s up, I have to grate often the autor inside the website. Each and every one is evident and also beneficial. The theory could be incredible i really believe. Might you please tel my vision subject material ? web theme should you make use of? web site when or carry on the best occupation.

    0
  • Joaquin Courtwright

    Sunday, July 17th, 2011 13:18

    36

    out there that foodstuff has essentially the most impact on slimming. this kind of

    0
  • Jason Zuckerman

    Tuesday, December 15th, 2009 22:15

    15

    A lot of great tricks of the trade on which I am glad to educate myself.

    0
  • saurabh shah

    Friday, December 11th, 2009 22:12

    5

    Cool ! round Dainis … Thanks for sharing …

    0
  • Edd Turtle

    Monday, June 27th, 2011 12:40

    35

    A Good Framework for CSS3 Buttons for those of you who are tired of implementing niggily CSS3 solid buttons

    0
  • Mukund

    Sunday, June 19th, 2011 14:48

    34

    Well, I would like to see more CSS tricks based on sprites because that saves a lot of time and runs actually the same way on all browsers! Few hacks mentioned above are valid only on few web browsers – not all! Whereas, when you build them with sprites, it will work on all platforms!

    0
    • Kris

      Friday, September 23rd, 2011 11:35

      38

      Time to face the music armed with this great inorfmtaion.

      0
  • Luis Lopez

    Saturday, December 12th, 2009 15:57

    6

    Excellent list, I love this collection because css3 is really unknown for me as I can see. I have to check them all, but I don’t know how much time it’ll take me.

    -1
  • Josh

    Saturday, December 12th, 2009 22:51

    7

    I’ve been using some of the more popular CSS3 properties for some time — border-radius, box shadow. At this point I think the pseudo selectors are going to be huge.

    -1
  • CSSim Benim

    Sunday, February 14th, 2010 02:57

    22

    Really useful, ty

    -1
  • purab kharat

    Tuesday, December 15th, 2009 07:59

    13

    Really helpful and futuristic Information. Thanks for collecting this nice information.

    -1
  • lee

    Wednesday, March 2nd, 2011 03:42

    31

    16. The CSS3 border-radius property the link now goes to an email harvesting spam-like website

    -1
    • 1WD Editorial

      Wednesday, March 2nd, 2011 15:05

      32

      Thanks for reporting. Unlinked :).

      +1
  • Jason Curby

    Tuesday, September 27th, 2011 07:28

    39

    That’s a great collection – I’ve already bookmarked some, but will be reading the rest over the coming week. Cheers!

    -1
  • Alex

    Tuesday, January 31st, 2012 00:16

    40

    Good article helped me staying motivated to learn web languages & pushing my limits.

    -1
  • Sidharth PK

    Tuesday, April 10th, 2012 01:25

    43

    now i know why all like 1stwebdesigner. great site i ever came across. super job.

    -1
  • Den

    Friday, August 13th, 2010 16:59

    28

    Wow those are the best css3 resource sites I would ever need

    -1
  • Bill

    Monday, April 5th, 2010 21:58

    27

    Really great tips for the CSS3. Knew a few of them but you made my life a bit easier. Just bookmarked the site to check back for updates and such.

    -1
  • blackgown

    Friday, January 29th, 2010 12:05

    20

    i love this one —>> Old School Clock with CSS3 and jQuery

    NICE!!

    -1
  • denbagus

    Friday, February 12th, 2010 08:56

    21

    nice collection…thank you bro !

    -1
  • STB

    Monday, February 22nd, 2010 17:25

    23

    Nice intro to CSS3. I am a huge fan of progressive enhancement. Everyone should use it.

    -1
  • Sidharth PK

    Tuesday, April 10th, 2012 01:25

    43

    now i know why all like 1stwebdesigner. great site i ever came across. super job.

    -1
  • Fred

    Monday, February 13th, 2012 22:32

    42

    Very interesting. i’m newbie in html5 and css3. its awesome

    0
  • sid

    Wednesday, February 8th, 2012 13:35

    41

    I have a new css trick to show adsense ads eventhough your site is banned by adsense.

    0
  • Alex

    Tuesday, January 31st, 2012 00:16

    40

    Good article helped me staying motivated to learn web languages & pushing my limits.

    -1
  • Jason Curby

    Tuesday, September 27th, 2011 07:28

    39

    That’s a great collection – I’ve already bookmarked some, but will be reading the rest over the coming week. Cheers!

    -1
  • Haurin

    Sunday, August 21st, 2011 06:26

    37

    What’s up, I have to grate often the autor inside the website. Each and every one is evident and also beneficial. The theory could be incredible i really believe. Might you please tel my vision subject material ? web theme should you make use of? web site when or carry on the best occupation.

    0
  • Joaquin Courtwright

    Sunday, July 17th, 2011 13:18

    36

    out there that foodstuff has essentially the most impact on slimming. this kind of

    0
  • Edd Turtle

    Monday, June 27th, 2011 12:40

    35

    A Good Framework for CSS3 Buttons for those of you who are tired of implementing niggily CSS3 solid buttons

    0
  • Mukund

    Sunday, June 19th, 2011 14:48

    34

    Well, I would like to see more CSS tricks based on sprites because that saves a lot of time and runs actually the same way on all browsers! Few hacks mentioned above are valid only on few web browsers – not all! Whereas, when you build them with sprites, it will work on all platforms!

    0
    • Kris

      Friday, September 23rd, 2011 11:35

      38

      Time to face the music armed with this great inorfmtaion.

      0
  • anggamovic

    Friday, June 10th, 2011 09:28

    33

    nice share.. may be i late to learn css3 and html 5, but its ok.. i learn now and i implement to my webpage…

    inspirate with mac leopard so i create style use css3 with little html5…..
    some tutor i use from this site.. so thanks for sharing…
    its useful…

    nb: sory for my english…

    +3
  • lee

    Wednesday, March 2nd, 2011 03:42

    31

    16. The CSS3 border-radius property the link now goes to an email harvesting spam-like website

    -1
    • 1WD Editorial

      Wednesday, March 2nd, 2011 15:05

      32

      Thanks for reporting. Unlinked :).

      +1
  • Janek

    Saturday, October 23rd, 2010 21:04

    30

    Nice collection. Finally had a chance to use border-radius property on my site.

    +1
  • Chris Gilchrist

    Wednesday, October 13th, 2010 13:14

    29

    awesome list. thanks for sharing

    +3
  • Den

    Friday, August 13th, 2010 16:59

    28

    Wow those are the best css3 resource sites I would ever need

    -1
  • Bill

    Monday, April 5th, 2010 21:58

    27

    Really great tips for the CSS3. Knew a few of them but you made my life a bit easier. Just bookmarked the site to check back for updates and such.

    -1
  • Miso

    Monday, March 29th, 2010 08:53

    26

    It’s really useful for me, thank much!!!
    Bookmarked.

    +1
  • Omer Greenwald

    Sunday, February 28th, 2010 11:48

    25

    Totally useful collection of articles. No doubt you can some of these links are great way to learn the new features. thanks

    0
  • Caricature

    Tuesday, February 23rd, 2010 13:20

    24

    Thanks , I just know the CSS3. Previously , I thinks, it has only CSS2.

    0
  • STB

    Monday, February 22nd, 2010 17:25

    23

    Nice intro to CSS3. I am a huge fan of progressive enhancement. Everyone should use it.

    -1
  • CSSim Benim

    Sunday, February 14th, 2010 02:57

    22

    Really useful, ty

    -1
  • denbagus

    Friday, February 12th, 2010 08:56

    21

    nice collection…thank you bro !

    -1
  • blackgown

    Friday, January 29th, 2010 12:05

    20

    i love this one —>> Old School Clock with CSS3 and jQuery

    NICE!!

    -1
  • Max Vx

    Friday, January 29th, 2010 13:28

    19

    Thanks for this collection! Very useful list!

    0
  • Sushant

    Tuesday, January 5th, 2010 20:37

    18

    I really never heard anything about css3. I read it for the first time from this post.

    0
  • Ben

    Monday, December 21st, 2009 20:44

    17

    Wow! Very extensive list and tutorial on CSS3. I see that IE9 will support css3, but will previous versions of internet explorer support it?

    0
  • Deepu Balan

    Sunday, December 20th, 2009 19:59

    16

    Really useful list, thanks for this wonderful collection… Bookmarked for future reference. Thanks!

    -Deepu

    0
  • Jason Zuckerman

    Tuesday, December 15th, 2009 22:15

    15

    A lot of great tricks of the trade on which I am glad to educate myself.

    0
  • purab kharat

    Tuesday, December 15th, 2009 07:59

    13

    Really helpful and futuristic Information. Thanks for collecting this nice information.

    -1
  • Salman

    Monday, December 14th, 2009 11:10

    12

    Hi
    i was looking for this rounded corner with css. Very useful post.

    0
  • jayesh

    Monday, December 14th, 2009 15:28

    11

    I’ve been using some of the more popular CSS3 properties for some time — border-radius, box shadow.

    0
  • Rajib Roy

    Monday, December 14th, 2009 15:12

    10

    It is very good articles. Thanks for share.

    0
  • Chris

    Monday, December 14th, 2009 07:05

    9

    Great tips!

    Now I’ve modify the CSS of my block-quote to have rounded borders. It looks cool…!!

    Thanks for the information guys!

    0
  • Asad

    Sunday, December 13th, 2009 08:43

    8

    Thanks, really nice and very useful

    0
  • Josh

    Saturday, December 12th, 2009 22:51

    7

    I’ve been using some of the more popular CSS3 properties for some time — border-radius, box shadow. At this point I think the pseudo selectors are going to be huge.

    -1
  • Luis Lopez

    Saturday, December 12th, 2009 15:57

    6

    Excellent list, I love this collection because css3 is really unknown for me as I can see. I have to check them all, but I don’t know how much time it’ll take me.

    -1
  • saurabh shah

    Friday, December 11th, 2009 22:12

    5

    Cool ! round Dainis … Thanks for sharing …

    0
  • Benjamin Rama

    Friday, December 11th, 2009 20:10

    4

    thanks for these dainis very usefull i will read some of them soon when i have time

    0
  • Marco

    Friday, December 11th, 2009 18:59

    3

    Whoah – nice roundup with a great collection of several CSS3 articles. I’m currently writing a new CSS3 article, I hope you’ll like it too.

    Thanks for the inclusion!

    0
  • Jon Crim

    Friday, December 11th, 2009 22:28

    1

    I’ve run across a few of these recently, but this puts many that I’ve seen and a bunch of others all in one place! Thanks for taking the time to put it together.

    @marco I checked out your tabbed navigation using CSS3 post yesterday, nice work!

    0

Comments are closed.

54.83.224.35 - unknown - unknown - US