Ever since the announcement of in 2005, the development of the level 3 of Cascading Style Sheet or better known as CSS3 has been closely watched and monitored by many designers and developers. All of us excited to get our hands on the new features of CSS3 – the text shadows, borders with images, opacity, multiple backgrounds, etc, just to name a few.
As of today, not all selectors of CSS3 are fully supported yet. But that doesn’t mean we can’t have some fun testing new CSS3 stuff. This post is dedicated to all designers and developers who are already familiar with CSS 2.1 and want to get your hands dirty on CSS3.0.
It’s a compilation of useful CSS3 reads, sample codes, tips, tutorials, cheat-sheets and more. Feel free to use them in your projects, just make sure it falls gracefully on incompatible browsers.
Getting Started with CSS3
An (roadmap) official introduction to CSS and CSS3. This document gives you an overall idea on the development of CSS3.
Advantages of CSS3, with explanations and examples of CSS3 properties and selectors.
Folks at Six Revision interviewed Eric Meyer with valuable insights and answers on CSS3.
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.
CSS3: Background and Borders
Rounded borders (border-radius)
A guide to creating rounded border with CSS3’s
Rounded borders with image (border-images)
How to use images in borders with
Detail explanation with examples of new CSS3 properties like:
Create simple letterpress effect with CSS3.
Text effects include: vintage/retro, neon, inset, anaglyphic, fire and board game.
How to take basic markup and transform it into an attractive and beautiful typographical design through pure CSS3.
Uses an image sprite and a sprinkle of CSS to get things positioned right.
How to add an outline, or stroke, to your text using the CSS3
Interactive text masking effect using the
text-shadow CSS property.
Change text selection styling with CSS3.
Using CSS3 to create a set of columns on your website without having to assign individual layers and (or) paragraphs for each column.
How to use the evolving CSS standard can enhance some lovely cross-browser tooltips.
How to create a Apple.com alike multi-level dropdown menu using
Click on a tab, hide all the panels, show the one corresponding to tab just clicked on – all with CSS.
Create nice looking 3D ribbons with only CSS3.
CSS3: Drop shadow
Showcase several techniques and some of the possible appearances for dropping shadows without using images.
How to create intuitive and beautiful tabs in CSS3 with no image.
How to create beautiful cross-browser compliant CSS3 buttons that degrade gracefully.
Various forms of speech bubble effect created with CSS 2.1 and enhanced with CSS3.
Collection of buttons that show what is possible using CSS3 while also maintaining the simplest possible markup.
How to use CSS3 and MooTools to create dymanic, rotating elements.
Practical application of the CSS3 border-image property.
- CSS3 + Mootools. An example of experimentation in mootools. This adds CSS3 properties into core MooTools frame work.
- Exploding Logo with CSS3 and MooTools or jQuery. Take static image and make it an animated, exploding effect on mouse over.
- The Power of HTML 5 & CSS 3. HTML 5 and CSS 3 are quickly gaining popularity, Perishable Press is here to explain how and why.
- CSS3 Polaroid Photo Gallery. How to build a cool looking stack of Polaroid photos with pure CSS styling.
- HTML 5 and CSS 3: The Techniques You’ll Soon Be Using. A walkthrough on building a blog from ground up with HTML5 and CSS3.
Cheatsheets & References
CSS3 Cheat Sheet (PDF)
Printable cheatsheet with complete list of all properties, selector types and allows values in the current CSS3 specification from the W3C.
Complete list of the supported CSS selectors in Opera 0.5.
Comprehensive list of fonts currently licensed for
A guide and reference to CSS3 selectors and its patterns.
CSS3 rules you can copy and paste onto your own stylesheet.
Get CSS3 styles like box sizing, border radius, text shadow, and more within a click.
Complete list of selector tables of both CSS and CSS3 with declaration for browser-compatibility check.