33 Must Read CSS3 Tips, Tricks, Tutorial Sites and Articles
Dainis Graveris
Since 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.
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.
3. Super Awesome Buttons with CSS3 and RGBA
Learn how to create super cool, scalable buttons with CSS3.
4. A Look at Some of the New Selectors Introduced in CSS3
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)
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.
7. Get Started with CSS 3
Beautiful CSS3 tutorial article explaining several new CSS3 features and giving solutions how to create them actually.
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.
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.
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.
12. Six Questions: Eric Meyer on CSS3
Great interview with Eric Meyer about CSS3.
13. The fundamental problems with CSS3
This article brings up several problems and issues with CSS3, interesting reading.
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.
15. Old School Clock with CSS3 and jQuery
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.
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
18. How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3
19. Rounded Corner Boxes the CSS3 Way
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.
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.
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.
23. CSS 3 selectors explained – Overview of CSS 3 selector syntax
24. 3 Easy and Fast CSS Techniques for Faux Image Cropping
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.
26. CSS3 property tests
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
28. Overview of CSS3 Structural pseudo-classes
29. 5 CSS3 Techniques For Major Browsers using the Power of jQuery
30. jSlickmenu: A jQuery plugin for slick CSS3 menus
31. Multiple Backgrounds (CSS3)
32. CSS: border-radius and -moz-border-radius
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.
For Further Reading:
Did you enjoy this article and found it useful?
Get even more from us:
Edd Turtle
Posted 329 days ago 53A Good Framework for CSS3 Buttons @ http://css3framework.co.uk for those of you who are tired of implementing niggily CSS3 solid buttons
Mukund
Posted 337 days ago 52Well, 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!
Kris
Posted 241 days ago 56Time to face the music armed with this great inorfmtaion.
anggamovic
Posted 346 days ago 51nice share.. may be i late to learn css3 and html 5, but its ok.. i learn now and i implement to my webpage…
see how great my page in http://anggamovic.co.tv
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…
Webstandard-Blog
Posted 347 days ago 50I really like it to reduce the HTML-Code by using CSS3. One of my latest experiments is a CSS3 Animation based on the nostalgic “PC Game PONG”.
Free Textures
Posted 364 days ago 49Very nice collection, here is another one: http://www.freewebelements.com/css3-web-button-tutorial/
lee
Posted 446 days ago 4716. The CSS3 border-radius property the link now goes to an email harvesting spam-like website
1WD Editorial
Posted 446 days ago 48Thanks for reporting. Unlinked :).
Janek
Posted 576 days ago 46Nice collection. Finally had a chance to use border-radius property on my site.
Chris Gilchrist
Posted 586 days ago 45awesome list. thanks for sharing
12Bet
Posted 639 days ago 44Really great tips for the CSS3. Thank a lot!
Den
Posted 647 days ago 43Wow those are the best css3 resource sites I would ever need
Bill
Posted 777 days ago 42Really 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.
Miso
Posted 784 days ago 41It’s really useful for me, thank much!!!
Bookmarked.
.-= Miso´s last blog ..Miso, what? =.= =-.
Omer Greenwald
Posted 813 days ago 40Totally useful collection of articles. No doubt you can some of these links are great way to learn the new features. thanks
.-= Omer Greenwald´s last blog ..4 Most Annoying Mistakes to Avoid When Building a Client’s WebSite =-.
Caricature
Posted 818 days ago 39Thanks , I just know the CSS3. Previously , I thinks, it has only CSS2.
STB
Posted 819 days ago 38Nice intro to CSS3. I am a huge fan of progressive enhancement. Everyone should use it.
CSSim Benim
Posted 827 days ago 37Really useful, ty
denbagus
Posted 829 days ago 36nice collection…thank you bro !
Max Vx
Posted 843 days ago 35Thanks for this collection! Very useful list!
blackgown
Posted 843 days ago 34i love this one —>> Old School Clock with CSS3 and jQuery
NICE!!
.-= blackgown´s last blog ..Let us kill plagiators!! =-.
Sushant @ techooze
Posted 867 days ago 33I really never heard anything about css3. I read it for the first time from this post.
.-= Sushant @ techooze´s last blog ..40+ Beautiful New Year 2010 Wallpapers =-.
Lasslo Veda
Posted 869 days ago 32Thanks for the great resources. :D
.-= Lasslo Veda´s last blog ..Iphone Credit Card Reader =-.
autai ptfe
Posted 872 days ago 31Great Poster !!
ayman@design
Posted 879 days ago 30CSS3 should be used by web designers Great article for getting you started with CSS3
.-= ayman@design´s last blog ..61 Resources for Designers, Startups and Entrepreneurs =-.
Designer Resources
Posted 879 days ago 29Thanks for the great resources.
Karibel
Posted 881 days ago 28Wow thank you really useful list :-)