50+ Stunning CSS3 Articles, Cheat Sheets and Tutorials
CSS3 is introducing loads of new and exciting functions and features like text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image. It is expected that CSS3, once it is fully developed and supported, will leads to greater flexibility and make it simpler to create complex and dynamic visual effects. Even though it is not currently all the leading browsers that support new CSS3 features some of them has been introduced in latest versions of browsers like Firefox, Safari and Chrome.
It is time to start investigating CSS3 and get familiar with it but be aware that CSS3 features are not yet accessed directly in most browsers and in some it is not even implemented at all, ex. Internet Explorer. Firefox use a prefixed with -moz-, resulting in fx. -moz-box-sizing. Safari 3 / WebKit uses -webkit-box-sizing and Opera just accepts plain box-sizing. Coding CSS3 is therefore currently a bit irritating as you have to write the same code multiple times with different prefixes. Anyway playing with and understanding the opportunities that new features in CSS3 will offer is is worth the effort. In this article tripwire magazine provides a large collection of CSS3 resources, Cheat Sheets and Tutorials to get web designers started.
CSS 3 Cheat Sheets and support matrices
There are not a lot of CSS 3 Cheat Sheets available by now but Smashing Magazine provide a great one for Free. This is a must have if you plan to start using some CSS 3!
W3C – Cascading Style Sheets, Current Work
If you want to follow the development of CSS3, this page is the place to start.
CSS3 Getting started Articles
Introduction to CSS3 – Part 1: What is it?
This article marks the first of several, providing an introduction to the new CSS3 standard which is set to take over from CSS2. It is starting from the very beginning – taking you from not having even heard of CSS3, to feeling ready to hit it running as various features start to become more widely adopted. Other articles is this series.
- Introduction to CSS3 – Part 2: Borders
- Introduction to CSS3 – Part 3: Text Effects
- Introduction to CSS3 – Part 4: User Interface
- Introduction to CSS3 – Part 5: Multiple Columns
- Introduction to CSS3 – Part 6: Backgrounds
Take Your Design To The Next Level With CSS3
In this article, we’ll look at the advantages of CSS3 and some examples of how Web designers are already using it. By the end, we’ll know a bit of what to expect from CSS3 and how we can use its new features in our projects.
Wikipedia on CSS 3 – as always wikipedia is a great source for getting information on a new subject.
An introduction to CSS3 – CSS3 is not new, nor is it just round the border-radius’s corner! It patiently sits, all ready to make its debut, sipping coffee and waiting for the browsers to provide the red carpet. You see, it is the browsers that need to catch up.
W3C’s CSS3 Roadmap – An introduction to CSS3 by the W3C, and where it’s headed.
CSS3 Tutorials
7 New Essential CSS 3 Techniques Revealed
This article presents 7 New CSS3 techniques that every web designer and developer should be aware of.
Push Your Web Design Into The Future With CSS3
A good intro to CSS3 by Smashing Magazine
CSS 3: Exciting Function and Features: 30 Useful Tutorials
This articlegives a good overview of the new possibilities in CSS 3 and show you how to use them yourself.
5 CSS3 Techniques For Major Browsers using the Power of jQuery
This is a Combi of really great CSS 3 and jQuery techniques that can be used to achieve the same results.
Here you will find showcases of various CSS3 features that browsers currently support.
70 Must-Have CSS3 and HTML5 Tutorials and Resources
Below are seventy resources, tutorials, and articles to get you started with CSS3 and HTML 5. Many of the techniques discussed are already supported to some extent in some some modern web browsers (Safari and Firefox have the most extensive support), so you can get started right away.
This site is dedicated to CSS3. CSS 3 reference guide, tutorial, and blog
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 – here are 20 excellent resources on the topic of CSS3.
- Liquid faux columns with background-size the CSS3 way – How background-size is going to make your life a lot easier.
- Css3 Attribute selectors – A technical tutorial on how to use the advanced attribute selectors in CSS3
- 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.
- 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
- Border-radius: create rounded corners with CSS – A demo of of how border-radius works
- Border-image: using images for your border – How to use border-image
- Box-shadow, one of CSS3’s best new features – A demo of how to use box-shadow
- RGBA colors – How to add transparency to your colors
- Making an image gallery with :target – How to use the new CSS3 selector Tooltips with CSS3 – How to make use of the :before (or :after) pseudo element and
- Using CSS 3 selectors to apply link icons – A quick tutorial on how to add handy icons to links.
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
And a few more…
- CSS3 Opacity – How to add opacity to your images and text
- CSS3 Text-Wrapping – How to properly use the text-wrap property in CSS3
- 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.
- Rounded Corner Boxes the CSS3 Way – A useful article on 24ways that explains how to build rounded corners with CSS3 pseudo”>:target pseudo-class
- CSS 3 selectors explained – A good intro by 456 Berea St.
- CSS text shadows and background sizing – A good tutorial from Dev.Opera that will show you how to use text-shadow and background-size.
- How to get @font-face to work in IE – A hack that allows you to use font embedding in Internet Explorer
- Web Fonts – A great article on font embedding from A List Apart
- Styling Forms with Attribute Selectors – A great tutorial from Dev.Opera
content property, combined with the :hover pseudo class to create nice tooltips. - Stay on :target with CSS3 – Our very own tutorial on using the :target pseudo selector
- 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.
CSS3 selectors. - 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
- The CSS3 border-radius property – 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.
- CSS3 box-shadow property – This tutorial will show you how to use the CSS3 box-shadow property to add shadows to a box. Box means each HTML element is included in by the CSS box model
Relation Resources
- 5 CSS3 Design Enhancements That You Can Use Today
- 250+ Resources to Help You Become a CSS Expert
- Backgrounds In CSS: Everything You Need To Know
- CSS 3 Cheat Sheet (PDF)
- CSS and Web Site Design Showcase Sites any Designer MUST Know
- CSS-Lifesavers For Efficient Web Design
- CSS Menus
- Designing CSS Buttons
- New CSS Techniques For Your Next Web Design