Start Using CSS3 Today: Techniques and Tutorials

Advertisement

We have been publishing articles about CSS3 for a while now, and we keep receiving angry e-mails from some developers who complain that it doesn’t make sense to use CSS3 today. Yes, Internet Explorer doesn’t support most CSS3 properties. And yes, CSS3 vendor prefixes are bad for maintainability (and this is why we recommend extracting vendor prefixes in a separate CSS3 file).

But it’s OK to accept that Web is a dynamic medium, and it’s OK to create rich, interactive, beautiful designs for those who are already using a modern browser or will be using one soon. It just doesn’t make sense to keep looking back, beiDang afraid of looking forward and therefore avoid experimenting and learning about new CSS3 properties today. And this is why we keep publishing articles about CSS3.

In this post we present an extensive round-up of CSS3 techniques, tools and resources that will help you learn how to use CSS3 in your designs right away. We have grouped most useful articles by the corresponding properties, described what browsers support what properties, presented alternative JavaScript-based approaches and workarounds for Internet Explorer and added a couple of links to useful CSS3 generators and tools in the end of the post.

You may be interested in the following related articles:

  • 50 Brilliant CSS3/JavaScript Coding Techniques1
    In this post we present 50 useful and powerful CSS3/jQuery-techniques that can strongly improve user experience, improve designer’s workflow and replace dirty old workarounds that we used in Internet Explorer 6 and Co.
  • Take Your Design To The Next Level With CSS32
    This article covers the essential of what you need to know about CSS3 with examples and useful links.
  • CSS3 Solutions for Internet Explorer3
    This articles shows a number of options that developers can consider for those circumstances where support for a CSS3 feature is required for all versions of Internet Explorer (IE6, IE7, & IE8 — all of which are still currently in significant use).

What’s Possible With CSS3?

Let’s start with a review of some truly remarkable design techniques and experiments that show what can be done with a bit of coding, patience and creativity by using simple CSS3 properties.

Pure CSS3 Page Flip Effect4
By using CSS3 gradients, transitions, 2d transforms and clipping, Roman Cortes achieved this pure CSS3 page flipping effect (no JavaScript is used). However, it works in Webkit browsers only (Safari and Chrome).

 Pure CSS3 Page Flip Effect5

Create a Vibrant Digital Poster Design with CSS36
CSS has come a long way in recent years, and with new browser support for a hand full of CSS3 properties we can begin to replicate design styles directly in the browser that beforehand were recently only possible in our design applications. Follow this walkthrough of the making of Circlicious, a vibrant and abstract digital poster design made purely of HTML and CSS.

How To Create Depth And Nice 3D Ribbons Only Using CSS37

CSS3 Leopard-style Stacks8
Pure CSS3 (and experimental CSS). No JavaScript. An experiment by Gordon Brander.

CSS3 Leopard-style Stacks9

Wicked CSS3 3D Bar Chart10
An attempt to create a 3D bar chart using CSS3. This example only works in the latest versions of Firefox, Chrome, Safari and Opera.

Wicked CSS3 3d bar chart11

Selectable Headlines with Color Transition (CSS3)12
A CSS3 color transition applied to a selectable text with CSS3. Works only in Safari and Google Chrome.

Wicked CSS3 Color Transition13

Our Solar System in CSS3 14
This is an attempt to recreate our solar system using CSS3 features such as border-radius, trans forms and animations. The result is surprising and quite interesting.

Our Solar System in CSS3  15

Fun With CSS Gradients16
This similar looking display to that of the iPhone album display uses a radial gradient (opposed to a linear) as the background for the track names. The overall effect is a dim light. The odd numbered tracks also use a gradient to take advantage of -webkit-gradient’s support of alpha values.

Screenshot17

CSS3 Bookshelf18
A very interesting idea that doesn’t look very nice because of rotation rendering, but is worth experimenting nevertheless.

CSS3 Bookshelf19

Pure CSS Twitter Fail Whale20
Curves are done using various uneven border-radius properties, stranger angles (such as the strings) are masked using containers with overflow: hidden; set on them.

Pure CSS Twitter Fail Whale21

CSS World Clocks22
Another interesting experiment that uses CSS3 and a bit of PHP to create an interactive clock.

 CSS World Clocks23

3D Text Tower24
What happens if you lay a couple of text shadows over and over again? Interesting hover-effect.

3D Text Tower25

Creating a Realistic Looking Button with CSS326
“I had previously created the Cadmus “post” button in Photoshop and it was essentially three images for the different states. I wanted to use this style for all our buttons, but doing it with single images is not a good idea. So I set about creating the same style of the buttons with CSS3.”

Creating a Realistic Looking Button with CSS327

CSS3 Spotlight28
Turn on the light! Works with Webkit and Firefox.

CSS3 Spotlight29

Pure CSS3 Animated AT-AT Walker from Star Wars 30
In this article you;kk walk-through the process of creating a CSS3 animation of an AT-AT Walker from The Empire Strikes Back. The author starts off by reviewing some CSS3 properties that made this animation possible. Then, he follows up with a list of the sections required to construct the AT-AT and the CSS3 code to move each section.

Pure CSS3 Animated AT-AT Walker from Star Wars  31

Pure CSS Icons32
An experiment by Zander Martineau. with a large scoop of border-radius, Zander created various ‘common’ icons that could be used in your web apps.

 Pure CSS Icons33

Create a Content Slider Using Pure CSS34
The idea was to create a working example without the aid of JavaScript, using layers in CSS and using CSS3 transitions to give the slider the necessary animation.

Create a JQuery Content Slider Using Pure CSS35

Sexy Tooltips with Just CSS36
While many innovative solutions exist using CSS and JavaScript (with and without JavaScript frameworks like jQuery), it’s sometimes useful to look towards new technologies to examine the impact they may have on our current techniques. This tutorial looks at how using the evolving CSS standard can enhance some lovely cross-browser tooltips.

Sexy Tooltips with Just CSS37

Creating a Polaroid photo viewer with CSS3 and jQuery38
This example is making use of CSS3 and jQuery, just to show the effect when combining two powerful techniques. The CSS3 is injected by jQuery, keeping the CSS file clean.

Creating a Polaroid photo viewer with CSS3 and jQuery39

Animated Photoshop selection using CSS340
When part of an image is selected in Photoshop, the area is highlighted by an animated dashed line. Matthew James Taylor figured out a way to get exactly the same effect using CSS3.

Animated Photoshop selection using CSS341

Sexy Image Hover Effects using CSS3 42
This post shows how to create a sexy CSS effect on image hover.

Sexy Image Hover Effects using CSS3 43

CSS3 Dropdown Menu44
A multi-level dropdown menu that was created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compatible browsers such as IE7+, but the rounded corners and shadow will not be rendered.

CSS3 Dropdown Menu45

Middle Box Links 46
What we have here is some boxes of content. The goal is that when you mouse over them, they darken and a link appears in the exact center of them.

Middle Box Links 47

Contextual Slideout Tips With jQuery and CSS348
By now, you’ve probably heard about Adobe’s new CS5 software pack. Also, you’ve probably seen their product pages, where they present the new features of the suite. Apart from the great design, they’ve also implemented an interesting solution for showcasing the new features their products are capable of – using contextual slideout tips.

Contextual Slideout Tips With jQuery and CSS349

Beautiful UI styling with CSS3 text-shadow, box-shadow, and border-radius 50
This article takes things further, showing how to use the properties to create beautiful UI elements without the use of any images, JavaScript or Flash. This last line highlights the real beauty of CSS3 — many of its features are designed to save you time otherwise spent creating and updating graphics in Photoshop. It makes techniques such as drop shadows and animated UI elements accessible to web developers and designers without scripting smarts or mad Photoshop skills.

Beautiful UI styling with CSS3 text-shadow, box-shadow, and border-radius 51

Learning CSS3 Properties

This section provides you with a general overview of the introductory articles about CSS3. This is a nice starting point to learn what CSS3 is, which properties it has and how designers apply them to web designs.

The Basics of CSS352
Here is a post on the basics of the new properties: text-shadow, box-shadow, and border-radius. These CSS3 properties are commonly used to enhance layout and good to know.

  The Basics of CSS353

Introduction to CSS354
A great series of articles by David Appleyard which covers most new features of CSS3 including borders, text effects, user interface features, multiple columns and backgrounds. The series also contains many examples and code snippets. Very useful.

  The Basics of CSS355

CSS3 Examples and Best Practices56
The CSS3 trend is getting more and more popular. In fact CSS3 new features open a lot of new possibilities. Check out my previous post on “CSS3 Animation Demos” to see the things that you can do with it. However, don’t get too excited so soon because it is not fully supported by all browsers yet. But this doesn’t mean you shouldn’t use it at all. So, when should you use CSS3 new features? Well, continue on this post to see some excellent examples.

  CSS3 Examples and Best Practices57

CSS of the Future: How CSS3 can Optimize Design 58
The design blogosphere has been buzzing about the improvements level 3 of Cascading Style Sheets will bring. Although still a ways off from official recommendation status by the W3C, some browsers are already supporting pending features. I want to highlight a few of the CSS3 features I’m excited about that will not only add flexibility to the design process, but that will aid with search and conversion optimization as well.

CSS of the Future: How CSS3 can Optimize Design 59

Practical Uses of CSS360
A user is not going to pull up your site in two different browsers to compare the experience, so they won’t even know what they are missing. Just because something is not fully supported, that does not mean that we can’t use it to an extent. In this article I’ll show you some practical uses for CSS3.

Practical Uses of CSS361

You Can Use CSS3 Right Now 62
CSS3 makes a designer’s work easier because they’re able to spend less time hacking their CSS and HTML code to work in IE and more time crafting their design. It is the future of web design and can be used today. This article will hopefully show you to care a little less about making everything pixel perfect in IE. It will inspire you to spend more time making your designs exquisite in the rest of the browsers while serving up a working and perfectly accessible website for IE.

CSS3 + Progressive Enhancement = Smart Design 63
Progressive enhancement is a good thing, and CSS3 is even better. Combined, they enable designers to create lighter, cleaner websites faster and easier than ever before.

CSS3 + Progressive Enhancement = Smart Design 64

CSS3 Selectors

The advanced CSS selectors in CSS3 make it much easier for developers to apply style to specific design elements without using unnecessary CSS classes or <div>-containers. Unfortunately, Internet Explorer will support most of CSS3 selectors only in IE 9 (detailed support table65), so we would need to use JavaScript-solutions for older versions. Supported by Firefox 3.5+, Safari 3.2+ and many selectors are supported by Chrome and Opera, too (use the link above).

Taming Advanced CSS Selectors66
The best way to avoid these plagues spreading in your markup and keep it clean and semantic, is by using more complex CSS selectors, ones that can target specific elements without the need of a class or an id, and by doing that keep our code and our stylesheets flexible.

The Skinny on CSS Attribute Selectors67
Every single CSS element has three attributes: ID, class, and rel. To select the element in CSS, you could use and ID selector (#first-title) or a class selector (.magical). But did you know you can select it based on that rel attribute as well? That is what is known as an attribute selector.

Screenshot68

Meet the Pseudo Class Selectors69
Pseudo class selectors are immensely useful in a variety of situations. Some of them are CSS3, some CSS2… it depends on each particular one. Outside of IE, they have great browser support. In IE land, even IE8, support is pretty barren. However, the IE9 preview has full support of them.

A Look at Some of the New Selectors Introduced in CSS370
A very practical article, introducing concrete examples and code snippets for using CSS3 in your design (e.g. alternate row styling, specific row styling, first and last element styling as well as styling enabled and disabled input fields).

CSS3 Selectors Browser Support71
The following is a range of CSS tests of the most common browsers’ support for selectors and pseudo selectors. The tests includes basic stuff from the good old days of CSS1 and funky stuff from the future (CSS3).

Screenshot72

JavaScript Solutions

IE-CSS3.js: CSS3 pseudo-class selector emulation for IE73
This library allows Internet Explorer to identify CSS3 pseudo-class selectors and render any style rules defined with them.

Screenshot74

Sizzle – JavaScript Selector Library75
A pure JavaScript CSS selector engine which supports all CSS3 selectors, including advanced ones such as escaped selector support (#id:value), :contains(text), has selector (:has(div)), position selectors (:first, :last, :even, :odd, :gt, :lt, :eq), form selectors and header selectors. The tools also provides meaningful error messages for syntax problems.

Sly — The JavaScript Selector Engine76
A quick, cross-browser JavaScript class for querying DOM documents using CSS3 selectors. It allows for customizable pseudo-classes, attribute operators and combinators and contains extra optimizations for frequently used selectors and latest browser features.

Screenshot77

Offspring.js78
Offspring is a JavaScript library that applies CSS classes corresponding to some advanced CSS selectors, opening the door for more precise selectors in previously-incapable browsers. A lightweight library which in full mode supports only first-child, last-child, only-child, nth-child-odd, nth-child-even, and nth-child-##.

YUI Selector Utility79
The YUI CSS3 Selector Utility, providing a compact shorthand for collecting, filtering, and testing HTMLElements.

Getting Buggy CSS Selectors to Work Cross-Browser via jQuery80
A simple table that describes a number of CSS selectors that are not cross-browser compatible, along with the jQuery syntax for each.

CSS3 Borders and Backgrounds

CSS3′s border-radius is most certainly a godsend for developers. Implementing rounded corners with 4 images of fixed size, using them with CSS background image property and adding a couple of unnecessary div‘s just to make it all work sounds like a nightmare, and indeed it was a nightmare. CSS3 makes it possible to use a standard CSS property to achieve the same effect. Besides, we can use some nifty advanced background features to add border-image or multiple backgrounds to our designs. Advanced border and background features do not work in IE, so we will need workarounds again.

An Ode To Border-radius81
Border-radius: web designer’s sweetheart and (sadly) the one that IE8 forgot, destroying many a web designer’s dreams. This post explains how it works, what are some of the cross-browser alternatives, and showcases some websites that took a step ahead and implemented it.

CSS3 Border Radius82

CSS3 borders, backgrounds and box-shadows83
This general article showcases some examples made using the new properties in the W3C’s CSS3 Backgrounds and Borders specification. It explains the properties background-clip, background-origin, border-radius, Multiple background images, background-attachment, box-shadow and border-image.

CSS3 Background-Clip and @Font-Face 84

CSS3 border-image85
CSS3 draft introduces one that could be terribly powerful: border-image. This article explains what it can do today, how you can use it and how to make it work in Internet Explorer 7+ (JavaScript library).

Multiple Backgrounds and CSS Gradients86
Among CSS designers, there are those who are venturing ahead with CSS3 and are likely to run into a world of interesting quirks across the various platforms. Multiple backgrounds by itself is simple enough, as are CSS gradients, but combining the two is where things get interesting.

CSS3 Background-Clip and @Font-Face 87

CSS Three — Connecting The Dots88
This article describes how you can use background-clip property together with other CSS3 properties to create an experimental design.

CSS3 Background-Clip and @Font-Face 89
An experiment with background-clip: text and @font-face via Typekit. When I finished Volume 2 in my Quoting Lebowski series the first thing that came to mind was that I bet I could CSS this.

CSS3 Background-Clip and @Font-Face 90

Backgrounds In CSS: Everything You Need To Know91
This article shows some common tricks that can be done with the background as well as what’s in store for backgrounds in CSS 3 (including four new background properties).

JavaScript Solutions

Cross-Browser Multi-background images, including IE92
One of the biggest problems with using the CSS3 Multi-backgrounds is that it is not usable in Internet Explorer, however by using the: ‘AlphaImageLoader IEFilter’, it is possible to place two background images in an element.

Multiple backgrounds with canvas drawing93
All modern browsers are compatible with the canvas-tag, beside of Internet Explorer, but Google created a superb piece of javascript that ported the canvas to IE. This little piece of JavaScript draws multiple backgrounds in a canvas element behind HTML elements.

Canvas94

cssSandpaper – a CSS3 JavaScript Library95
The cssSandpaper JavaScript library looks at the stylesheets in an HTML document and, where possible, smooths out the browser differences between CSS3 properties like transform, opacity, box-shadow and others. This script is not only useful for developers who want to support CSS3 in IE.

Canvas96

Emulating CSS3 border-radius and box-shadow in IE7/897
A thread on StackOverflow that explains how to emulate border-radius and box-shadow on IE7/8.

CSS3 Solutions for Internet Explorer 98
Smashing Magazine’s article explaining how to make border-radius, box-shadow, multiple backgrounds, gradients and CSS Transformations work in Internet Explorer.

CSS3 Media Queries

Web design community has been experimenting with adaptive layouts for a while99 now, and with CSS media queries we now finally have a very simple and powerful tool to implement adaptive layouts without the use of JavaScript. Support: Firefox 3.5+, Safari 4.0+, Chrome 3.0+, Opera 9.6+, Internet Explorer 9.0. Again: we will need a JavaScript-solution for Internet Explorer.

CSS3 Media Queries100
A detailed slideshow presentation by Russ Weakley.

CSS3 Media Queries101

How to use CSS3 Orientation Media Queries 102
For a long time we have been able to specify styles for different media types using CSS, print and screen being the most recognizable. With CSS3 these media types have been extended to allow additional expressions, aka media queries, which gives us greater control on when specific styles should be applied. In this article I will focus on the orientation media query and have a fun demonstration showing how to use it.

Detecting device size and orientation in CSS103
Gone are the days when we could safely assume that most our site visitors would have at least a 1024px-wide screen resolution. With smartphones and tablet computers on the rise, you visitors could also be browsing the web with screen widths ranging from 320px upwards. Does your site look good on a 768px-wide canvas? That’s how people will see it using a portrait-oriented iPad.

Detecting device size and orientation in CSS104

How to use CSS3 Orientation Media Queries105
For a long time we have been able to specify styles for different media types using CSS, print and screen being the most recognizable. With CSS3 these media types have been extended to allow additional expressions, aka media queries, which gives us greater control on when specific styles should be applied.

Different Stylesheets for Differently Sized Browser Windows106
This article explains how to implement resolution-dependent layouts using CSS3 media queries and JavaScript for Internet Explorer. Single website, different CSS files for rearranging a website to take advantage of the size available.

Different Stylesheets for Differently Sized Browser Windows107

JavaScript Solutions

Media Query JavaScript library108
Media queries and device capabilities are currently not exposed to JavaScript directly. You can use this library to detect the capabilities of the browser and adapt your web page or widget accordingly.

CSS 3 Media Queries for all Browsers (jQuery Plugin)109
The script adds basic Media-Query-Support (min-width and max-width in px units ) to the browsers. It helps you to create a dynamic resolution dependent layout with Web standards in mind.

css3-mediaqueries.js: make CSS3 Media Queries work in all browsers (JavaScript library)110
A JavaScript library to make IE 5+, Firefox 1+ and Safari 2 transparently parse, test and apply CSS3 Media Queries. Firefox 3.5+, Opera 7+ and Safari 3+ already offer native support.

CSS3 Multi-Column Layout

CSS3 Multi-Column layout module proposes a new technique for web layouts. As an alternative to relative/absolute positioning and floats, you can also use multi-column properties for cross-browser multi-column layouts. Obviously, this feature is great for magazine layouts and designers using grids or horizontal layouts. Support: Firefox 3.0+, Safari 3.2+, Chrome 3.0+. Neither Opera nor Internet Explorer support these features, and it’s not clear if Opera will include multi-column layout support in the upcoming version. Again, a workaround is necessary here.

Remembering: The CSS3 Multi-Column Layout Module111
Multi-column layout module allows you to layout the content of an element in multiple columns, like flowing text on a newspaper-type layout. Some of these Modules are at a more advanced stage of development and closer to being final than others. You can take a look at the Current Work table here112.

CSS3 Screenshot113

Using CSS3 media queries to achieve multiple columns on browser resize114
This article explains how to combine CSS3 media queries and Multi-column layout module in CSS3 to create an adaptive CSS layout.

Multi-column layout Module115
The ever more delayed CSS 3 specification has a Multi-column layout module. Unsurprisingly, this module specifies ways and means of creating multi-column texts. This article contains a few tests of the column declarations.

CSS3 Screenshot116

CSS3 Multi-Column Thriller117
A detailed article about the CSS3 Multi-column Layout module, its features and possibilities. By Andy Clarke.

CSS3 Screenshot118

JavaScript-Solutions

Columnizer jQuery Plugin119
The primary problem with static column layouts, is that they break down when viewed on a variety of widths. There’s no good way to have multiple dynamic columns for your content. What’s needed is to adapt to the user’s screen width, and allow content to easily be resized and refit to as many columns as needed. What’s needed is the JQuery Columnizer Plugin. And, obviously, it works in Internet Explorer, too.

CSS3 – Multi Column Layout JS Library120
A javascript implementation of the CSS3 multi-column module.

CSS3 Screenshot121

Multi Column List with jQuery122
“Instead of relying on consistent line heights, and applying different margin settings to list elements, I decided to decompose the large source list into several smaller lists (one for each column) and then use a CSS float parameter to make them all appear side-by-side.”

CSS3 Color: Opacity, RGBa, HSLa

With CSS3, web designs will be gaining more depth in the future. We can easily define the alpha transparency level of design elements in CSS, without extra images and extra markup. Support: Firefox 3.0+, Safari 3.2+, Chrome 3.0+, Opera 10.1+. Until yet, Internet Explorer does not support RGBa and HSLa, and Internet Explorer 9.0 will be supporting RGBa.

Working With RGBa Colour123
CSS3 introduces a couple of new ways to specify colours, and one of those is RGBa. The A stands for Alpha, which refers to the level of opacity of the colour, or to put it another way, the amount of transparency. This means that we can set not only the red, green and blue values, but also control how much of what’s behind the colour shows through. Like with layers in Photoshop.

Working with RGBa124

Yay for HSLa125
An introduction to HSLa (Hue Saturation Lightness(and alpha) and it’s a way of declaring color in CSS. Basically, every browser that supports RGBa, supports HSLa too.

Yay for HSLa126

RGBa CSS Generator for Internet Explorer127
If you’ve been keeping up with how recent browsers have been implementing parts of the CSS3 spec, you may already be using RGBa to define semi-transparent background colors. You’d also know that this works in recent versions of Firefox and Safari, but not in any version of Internet Explorer. This generator should solve your headache when you want to apply RGBa to your next project.

Screenshot128

CSS3 Opacity129
This article explains how you can apply opacity to change the transparency of an element and offers a cross-browser solution for that.

RGBa vs Opacity: The Difference Explained130
When we apply an opacity value to an element, the opacity value is inherited by all its child elements. RGBa sets the opacity of the color value of that particular element and the transparency is not inherited by its child elements. In other words, RGBA sets the opacity value only for a single declaration.

Is CSS3 RGBa ready to rock?131
A detailed article explaining why we can start using RGBa in our designs today.

HSL, RGB and Alpha Transparency132
This article explains how the HSL (Hue, Saturation, Lightness) and RGB (Red, Green, Blue) color models work (and the alpha transparency options in both color models).

HSLa and RGBa Explorer133
This little tool helps you to pick RGBa and HSLa color values for your designs. By Chris Coyier.

Screenshot134

Colors In CSS3 (Slideshow)135
A presentation by Lea Verou.

Screenshot136

RGBa Browser Support137
The article describes how browsers handle RGBa and what options developers have to guarantee the cross-browser RGBa support.

CSS3 Gradients

Many regular tasks that we are performing using Photoshop today, will be easy to implement with simple CSS3 styles. One of such task is adding gradients to our design elements. The advantage is clear: we are creating scalable vector graphics in the browser and we save HTTP requests. CSS3 gradients fall into the camp where you can specify fallbacks (i.e. images), so that browsers that don’t support them just use the image instead. Good news: using different syntax for different rendering engines138, we can use gradients in all browsers.

Playing with CSS3 gradients139
CSS3 gradients and masks are so powerful together that the average web application would never need an image for layout anymore. And it’s not about making simple buttons. Mixing multiple gradients, masks, box-shadow and text-shadow you can achieve extremely complex results.

CSS3 Gradients 140

Speed Up with CSS3 Gradients141
WebKit browsers paved the way with CSS based gradients. Now Firefox 3.6 is out and is supporting them as well, which makes using them for progressive enhancement all the more appealing. More good news, CSS3 gradients fall into the camp where you can specify fallbacks (i.e. images) so that browsers that don’t support them just use the image instead. But what if you need to use an image anyway, why bother with declaring the gradient with CSS? That is kind of how I felt for a long time, but there is one important aspect that makes it worth it: browsers that support them don’t load the image fallback. One less HTTP Request = all the faster your site will load.

Speed Up with CSS3 Gradients142

Cross-Browser CSS Gradient143
This post will show you how to code for the CSS gradient to be supported by the major browsers: IE, Firefox 3.6+, Safari, and Chrome.

CSS: Radial gradients syntax144
In this article you’ll explore the various properties of radial gradient backgrounds as implemented by the WebKit and Gecko rendering engines. Gradients can used as backgrounds, pseudo-images and image masks among other things.

CSS3 Gradient Buttons145
Today I’m going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript). The buttons are scalable based on the font-size. The button size can be easily adjusted by changing the padding and font-size values. The best part about this method is it can be applied to any HTML element such as div, span, p, a, button, input, etc.

  CSS3 Gradient Buttons146

CSS3 Gradient Generator215147
This tools generates CSS3 snippet for Webkit and Mozilla that can be used everywhere, be it a background-image, mask, border, or list item bullet. Another CSS3 linear gradient generator148 and yet another one149.

  CSS3 Gradient Buttons150

CSS Gradients For All Web Browsers, Without Using Images151
Robert Nyman explains how to code cross-browser CSS gradients that work even in Internet Explorer.

Quick Tip: Understanding CSS3 Gradients152
We can now create powerful gradients with minimal effort. In this video quick tip, we’ll examine some of the differences in syntax when working with the -moz and -webkit vendor prefixes.

(Kind of) Cross-Browser CSS Gradients via Canvas153
CSS Gradients via Canvas provides a subset of WebKit’s CSS Gradients proposal for browsers that implement the HTML5 canvas element. Unlike WebKit, this implementation does not currently allow gradients to be used for border images, list bullets, or generated content. Rudimentary gradients may be achieved in IE by means of its non-standard gradient filter154.

CSS3 Typography (incl. CSS 2.1 @font-face)

Technically, @font-face attribute is not a CSS3 features, as it was proposed already in CSS 2.1. However, it is now being heavily used and provides designers with more freedom in their choice of typography in web design. @font-face is supported by all major browsers (Firefox 3.5+, Safari 3.2+, Chrome 4.0+, Opera 10.1+, Internet Explorer 6.0+). However, Trident (Internet Explorer) only supports EOT fonts. Opera does not support the font when ‘format(“opentype”)’ is used, although it does otherwise appear to support OTF fonts. For Internet Explorer, we need to use EOT-Kits such as FontSquirrel’s one155 to make IE play nicely. Another option is to use commercial and/or open source font embedding services such as TypeKit156 or Google Fonts API157.

The Future Of CSS Typography158
In this article, we’ll look at some useful techniques and clever effects that use the power of style sheets and some features of the upcoming CSS Text Level 3 specification, which should give Web designers finer control over text.

Beautiful UI styling with CSS3 text-shadow, box-shadow, and border-radius 159

Text-Shadow Exposed160
An older, yet still useful article that provides a detailed
introduction to the CSS property text-shadow. Browser support table is provided as well. Text-shadow is support in Firefox 3.5+, Safari 4.0+, Chrome 3.0+, Opera 9.6+, and not supported by the whole Internet Explorer family.

The Essential Guide to @font-face161
This guide will teach you how to implement @font-face with cross-browser compatibility and will also look at a number of the supporting services that have arisen, making it even easier to use custom fonts in your web designs.

Screenshot162

@font-face generator163
An advanced generator of ready-to-use @font-face kits for various font formats, CSS styling and options. Also, check FontSquirrel164 for dozens of useful, freely available @font-face font kits.

Screenshot165

The New Lens Flare 166
“By abusing the text-shadow property, you can turn any ho-hum bit of text into a magnificent, radiant beacon of allure and awe. But getting your bling-bling on has never been for the cheapskates. Expect to pay a boatload in refresh rates, as your browser buckles under the weight of rendering that glorious halo.”

The New Lens Flare 167

JavaScript Solutions

Text-Shadow In IE With JQuery168
One handy little thing of Internet Explorer is that it also gives you access to CSS declarations it does not understand, so we can simply request the text-shadow value of a given element and process that. Works in Internet Explorer 5.5+.

CSS-3 Text-Shadow169
CSS3 Text Shadow is not supported by Internet Explorer, but it is however possible to create an equivialant effect with the IE proprietary CSS Filter Blur170 and served with the jQuery plugin jquery.textshadow.js171.

jQuery Plugin To Create CSS3 Text-Shadows In Internet Explorer172
Another approach that uses IE’s shadow filter instead of blur filter. IE6, IE7 and IE8 do not support the CSS3 text-shadow property, and one form of shadowing they support is the proprietary shadow filter173.

CSS3 Flexible Box Model, Box Sizing and Box Shadow

Another nice feature is the flexible box model which makes it much easier to create fluid layouts which adapt themselves to the size of the browser window or elastic layouts which adapt themselves to the font size. Also, you can specify a border/padding value in relation to a fluid length element with the new ‘box-sizing’ property (supported by IE8+ and all major browsers). Finally, you can also define box shadow to add more depth to your design elements (unavailable in IE 9, available in all major browsers).

CSS3 box-sizing attribute174
CSS3 is going to include a new attribute called box-sizing so we can choose whether the width set on an element will include borders and padding or whether borders and paddings will be added to the width. Further details175.

Screenshot176

The CSS 3 Flexible Box Model177
CSS 3 introduces a brand new box model in addition of the traditional box model from CSS 1 and 2. The flexible box model determines the way boxes are distributed inside other boxes and the way they share the available space. Take a look at the support table and tutorial178, too.

Resizing, Box Sizing, Outline179
CSS3 brings some great new properties relating to resizing elements, cursors, outlining, box layout and more. This article focuses on three of the most significant user interface enhancements.

Box Shadow Online Generator180
CSS Shadows take three length values, and a color. The length values are a horizontal offset, a vertical offset and a blur. offsets may be negative or positive.

Fun With Box Shadows181
This articles illustrates dozens of nice examples of how box-shadow can be used to achieve various visual effects.

Screenshot182

Cross-browser CSS3 box-shadow183
There is a simple way for creating cross-browser box-shadow in all modern and popular browsers including Internet Explorer (Opera only since 10.50 pre-alpha version). The solution uses VML and behaviour.

Screenshot184

CSS3 box-shadow for IE 6-8185
This article presents a very dirty way of making CSS3 Box Shadow work in Internet Explorer. The idea is to use Microsoft Shadow Filters186 and zoom-property. In German, but the code should be self-explanatory.

CSS3 Transitions, Transforms, Animations

CSS designers with sympathy for eye candy will find many intriguing features in CSS3 Transitions, Transforms and Animations. These are most useful when used in a subtle way, for visual feedback and smoothing user interaction. Until yet, transitions and animations are supported only in Webkit-browsers, transformations are supported only in Safari 5.0+. Unfortunately, there are no real alternatives or workarounds. So using these features makes sense only with progressive enhancement in mind.

Going Nuts with CSS Transitions187
This post shows you how CSS 3 transforms and WebKit transitions can add zing to the way you present images on your site.

Using CSS3 Transitions, Transforms and Animation188

CSS3 Transitions – Are We There Yet? 189
The whole topic has been split in two parts. The first part is offering a general overview in current status of CSS3 Transitions. Second part is called “CSS3 Transitions — Problems and Solutions”, which will explain in details how CSS3 Transitions behave in different browsers.

CSS3 Transitions - Are We There Yet? 190

Sexy Interactions with CSS Transitions 191
While Webkit-based browsers have had CSS Transitions since Safari 3.1.2, other browsers are only just now coming out with nightly builds supporting this exciting new part of the CSS3 specification. With all browsers except for IE being slated to have Transitions support in the coming months, more and more web designers are turning to this powerful technique as a means to enhance their website’s user experience.

Sexy Interactions with CSS Transitions 192

Using CSS3 Transitions, Transforms and Animation193
Currently transitions and 2D transforms are available in all current browsers (at least in a dev build) apart from Internet Explorer. 3D transforms and animations are only in Safari. Most examples degrade nicely, so if you are using a legacy browser you can still use a site using these, you just won’t get animation.

Using CSS3 Transitions, Transforms and Animation194

CSS Transitions 101 195
Despite people’s expectation of change and movement on the screen, CSS and HTML have few controls that allow you to design interactivity, and those that exist are binary. What we need is a quick and easy way to add simple transitions to the page and in this article you’ll find useful information about CSS transitions and how to use them.

CSS Transitions 101 196

CSS Fundamentals: CSS 3 Transitions197
This article explains the basics of using CSS3 transitions and animations to add an extra layer of polish.

CSS3 loading spinners without images198
While playing around with css-transform to make various shapes, I saw a way to create animated image-less loading spinners such as used in a lot of web-apps and of course on the iPhone.

CSS3 loading spinners without images199

3D animation using pure CSS3200
The perspective property in Safari CSS Visual Guide is what we need to create the 3D effect. Using transform and transition, we can create 3D animation using pure CSS3.

3d animation using pure CSS3201

First Ever 3D CSS WordPress Theme202
CSS3 offers great opportunities for 3D transforms, perspective, and animation. Currently Safari is the only browser that fully supports it, but Firefox and Chrome will add support soon. With that we can take regular objects (WordPress posts in this case) and animate them.

First Ever 3D CSS WordPress Theme203

CSS3 Generators

Useful References

  • CSS3 Click Chart218
    A detailed overview of CSS3 features, with descriptions, syntax, examples and browser support details for each CSS3 property.
  • SelectORacle219
    This tools explains CSS2 and CSS3 selectors in plain English (or Spanish). Once you submitted a CSS code, it provides the description of what the style will apply to.
  • Printable CSS 3 Cheat Sheet (PDF)220
    This cheat sheet provides a complete listing of all the properties, selectors types and allowed values in the current CSS 3 specification from the W3C.
  • CSS 2.1 and CSS 3 Help Cheat Sheets (PDF)221
    These cheat sheets contain most important properties, explanations and keywords for each CSS 2.1 and CSS 3 property.

Last Click

Modernizr222
A small and simple JavaScript library that allows you to use if-statements to check if a certain feature is available in the browser and gives you a fine level of control over older browsers that may not yet support these new technologies.

Modernizr223

Will You Use CSS3 In Your Next Designs?

Footnotes

  1. 1 http://www.smashingmagazine.com/2010/02/01/50-brilliant-css3-javascript-coding-techniques/
  2. 2 http://www.smashingmagazine.com/2009/06/15/take-your-design-to-the-next-level-with-css3/
  3. 3 http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
  4. 4 http://www.romancortes.com/blog/pure-css3-page-flip-effect/
  5. 5 http://www.romancortes.com/blog/pure-css3-page-flip-effect/
  6. 6 http://line25.com/tutorials/create-a-vibrant-digital-poster-design-with-css3
  7. 7 http://line25.com/tutorials/create-a-vibrant-digital-poster-design-with-css3
  8. 8 http://gordonbrander.com/lab/css3-stacks/
  9. 9 http://gordonbrander.com/lab/css3-stacks/
  10. 10 http://www.marcofolio.net/css/wicked_css3_3d_bar_chart.html
  11. 11 http://www.marcofolio.net/css/wicked_css3_3d_bar_chart.html
  12. 12 http://trentwalton.com/2010/03/24/css3-background-clip-text/
  13. 13 http://trentwalton.com/2010/03/24/css3-background-clip-text/
  14. 14 http://neography.com/journal/our-solar-system-in-css3/
  15. 15 http://neography.com/journal/our-solar-system-in-css3/
  16. 16 http://www.martinilab.com/blog/104/fun-with-webkit-css-gradients/
  17. 17 http://www.martinilab.com/blog/104/fun-with-webkit-css-gradients/
  18. 18 http://www.steveworkman.com/web-design/css3-web-design/2010/css3-bookshelf/
  19. 19 http://www.steveworkman.com/web-design/css3-web-design/2010/css3-bookshelf/
  20. 20 http://www.subcide.com/articles/pure-css-twitter-fail-whale/
  21. 21 http://www.subcide.com/articles/pure-css-twitter-fail-whale/
  22. 22 http://lensco.be/2010/04/04/css-world-clocks/
  23. 23 http://lensco.be/2010/04/04/css-world-clocks/
  24. 24 http://css-tricks.com/3d-text-tower/
  25. 25 http://css-tricks.com/3d-text-tower/
  26. 26 http://blog.anomalyinnovations.com/2010/03/creating-a-realistic-looking-button-with-css3/
  27. 27 http://blog.anomalyinnovations.com/2010/03/creating-a-realistic-looking-button-with-css3/
  28. 28 http://svay.com/experiences/css3-spotlight/
  29. 29 http://svay.com/experiences/css3-spotlight/
  30. 30 http://blog.optimum7.com/anthony/website-design/pure-css3-animated-at-at-walker-from-star-wars-2.html
  31. 31 http://blog.optimum7.com/anthony/website-design/pure-css3-animated-at-at-walker-from-star-wars-2.html
  32. 32 http://rathersplendid.net/cssicons/
  33. 33 http://rathersplendid.net/home/pure-css-icons
  34. 34 http://www.nealgrosskopf.com/tech/thread.php?pid=45
  35. 35 http://www.nealgrosskopf.com/tech/thread.php?pid=45
  36. 36 http://sixrevisions.com/css/css-only-tooltips/
  37. 37 http://sixrevisions.com/css/css-only-tooltips/
  38. 38 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html
  39. 39 http://www.marcofolio.net/webdesign/creating_a_polaroid_photo_viewer_with_css3_and_jquery.html
  40. 40 http://matthewjamestaylor.com/blog/animated-photoshop-selection-on-a-web-page#
  41. 41 http://matthewjamestaylor.com/blog/animated-photoshop-selection-on-a-web-page#
  42. 42 http://www.nikesh.me/blog/2010/05/sexy-image-hover-effects-using-css3/
  43. 43 http://www.nikesh.me/blog/2010/05/sexy-image-hover-effects-using-css3/
  44. 44 http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/
  45. 45 http://www.webdesignerwall.com/tutorials/css3-dropdown-menu/
  46. 46 http://css-tricks.com/middle-box-links/
  47. 47 http://css-tricks.com/middle-box-links/
  48. 48 http://tutorialzine.com/2010/04/slideout-context-tips-jquery-css3/
  49. 49 http://tutorialzine.com/2010/04/slideout-context-tips-jquery-css3/
  50. 50 http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/
  51. 51 http://dev.opera.com/articles/view/beautiful-ui-styling-with-css3-text-shadow-box-shadow-and-border-radius/
  52. 52 http://www.webdesignerwall.com/tutorials/the-basics-of-css3/
  53. 53 http://www.webdesignerwall.com/tutorials/the-basics-of-css3/
  54. 54 http://designshack.co.uk/tutorials/introduction-to-css3-part-1-what-is-it
  55. 55 http://designshack.co.uk/tutorials/introduction-to-css3-part-1-what-is-it
  56. 56 http://www.webdesignerwall.com/trends/css3-examples-and-best-practices/
  57. 57 http://www.webdesignerwall.com/trends/css3-examples-and-best-practices/
  58. 58 http://www.seo.com/blog/css-future-css3-optimize-design/
  59. 59 http://www.seo.com/blog/css-future-css3-optimize-design/
  60. 60 http://www.viget.com/inspire/practical-uses-of-css3/
  61. 61 http://www.viget.com/inspire/practical-uses-of-css3/
  62. 62 http://designinformer.com/use-css3-now/
  63. 63 http://perishablepress.com/press/2010/01/11/css3-progressive-enhancement-smart-design/
  64. 64 http://perishablepress.com/press/2010/01/11/css3-progressive-enhancement-smart-design/
  65. 65 http://www.quirksmode.org/css/contents.html
  66. 66 http://www.smashingmagazine.com/2009/08/17/taming-advanced-css-selectors/
  67. 67 http://css-tricks.com/attribute-selectors/
  68. 68 http://css-tricks.com/attribute-selectors/
  69. 69 http://css-tricks.com/pseudo-class-selectors/
  70. 70 http://inspectelement.com/tutorials/a-look-at-some-of-the-new-selectors-introduced-in-css3/
  71. 71 http://kimblim.dk/css-tests/selectors/
  72. 72 http://kimblim.dk/css-tests/selectors/
  73. 73 http://www.keithclark.co.uk/labs/ie-css3/
  74. 74 http://www.keithclark.co.uk/labs/ie-css3/
  75. 75 http://sizzlejs.com/
  76. 76 http://digitarald.de/journal/89737433/rolling-out-sly-the-javascript-selector-engine/
  77. 77 http://digitarald.de/journal/89737433/rolling-out-sly-the-javascript-selector-engine/
  78. 78 http://www.alistapart.com/articles/keepelementskidsinlinewithoffspring/
  79. 79 http://developer.yahoo.com/yui/selector/
  80. 80 http://www.impressivewebs.com/buggy-css-selectors-cross-browser-jquery/
  81. 81 http://webdesignernotebook.com/css/an-ode-to-border-radius/
  82. 82 http://webdesignernotebook.com/css/an-ode-to-border-radius/
  83. 83 http://dev.opera.com/articles/view/css3-border-background-boxshadow/
  84. 84 http://dev.opera.com/articles/view/css3-border-background-boxshadow/
  85. 85 http://dev.opera.com/articles/view/css3-border-background-boxshadow/
  86. 86 http://snook.ca/archives/html_and_css/multiple-bg-css-gradients
  87. 87 http://snook.ca/archives/html_and_css/multiple-bg-css-gradients
  88. 88 http://www.smashingmagazine.com/2010/05/27/css-three-connecting-the-dots/
  89. 89 http://trentwalton.com/2010/04/06/css3-background-clip-font-face/
  90. 90 http://trentwalton.com/2010/04/06/css3-background-clip-font-face/
  91. 91 http://www.smashingmagazine.com/2009/09/02/backgrounds-in-css-everything-you-need-to-know/
  92. 92 http://www.hanspinckaers.com/multiple-backgrounds-with-canvas-drawing
  93. 93 http://www.hanspinckaers.com/multiple-backgrounds-with-canvas-drawing
  94. 94 http://www.hanspinckaers.com/multiple-backgrounds-with-canvas-drawing
  95. 95 http://cubiq.org/dropbox/cssgrad.html
  96. 96 http://cubiq.org/dropbox/cssgrad.html
  97. 97 http://stackoverflow.com/questions/2687804/emulating-css3-border-radius-and-box-shadow-in-ie7-8
  98. 98 http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
  99. 99 http://www.alistapart.com/articles/switchymclayout/
  100. 100 http://www.slideshare.net/maxdesign/css3-media-queries
  101. 101 http://www.slideshare.net/maxdesign/css3-media-queries
  102. 102 http://www.1stwebdesigner.com/tutorials/how-to-use-css3-orientation-media-queries/
  103. 103 http://mislav.uniqpath.com/2010/04/targeted-css/
  104. 104 http://mislav.uniqpath.com/2010/04/targeted-css/
  105. 105 http://addyosmani.com/links/2010/04/27/how-to-use-css3-orientation-media-queries/
  106. 106 http://css-tricks.com/resolution-specific-stylesheets/
  107. 107 http://css-tricks.com/resolution-specific-stylesheets/
  108. 108 http://dev.opera.com/articles/view/media-query-library/
  109. 109 http://www.protofunc.com/scripts/jquery/mediaqueries/
  110. 110 http://code.google.com/p/css3-mediaqueries-js/
  111. 111 http://webdesignernotebook.com/css/remembering-the-css3-multi-column-layout-module/
  112. 112 http://www.w3.org/Style/CSS/current-work.html
  113. 113 http://webdesignernotebook.com/css/remembering-the-css3-multi-column-layout-module/
  114. 114 http://mindgarden.de/combining-css3-media-queries-and-multi-columns
  115. 115 http://www.quirksmode.org/css/multicolumn.html
  116. 116 http://www.quirksmode.org/css/multicolumn.html
  117. 117 http://www.stuffandnonsense.co.uk/archives/css3_multi-column_thriller.html
  118. 118 http://www.stuffandnonsense.co.uk/archives/css3_multi-column_thriller.html
  119. 119 http://welcome.totheinter.net/columnizer-jquery-plugin/
  120. 120 http://www.csscripting.com/css-multi-column/
  121. 121 http://www.csscripting.com/css-multi-column/
  122. 122 http://codeasily.com/jquery/multi-column-list-with-jquery
  123. 123 http://24ways.org/2009/working-with-rgba-colour
  124. 124 http://24ways.org/2009/working-with-rgba-colour
  125. 125 http://css-tricks.com/yay-for-hsla/
  126. 126 http://css-tricks.com/yay-for-hsla/
  127. 127 http://kimili.com/journal/rgba-css-generator-for-internet-explorer
  128. 128 http://kimili.com/journal/rgba-css-generator-for-internet-explorer
  129. 129 http://css.flepstudio.org/en/css3/opacity-transparency.html
  130. 130 http://deepubalan.com/blog/2010/03/29/rgba-vs-opacity-the-difference-explained/
  131. 131 http://forabeautifulweb.com/blog/about/is_css3_rgba_ready_to_rock/
  132. 132 http://dev.opera.com/articles/view/color-in-opera-10-hsl-rgb-and-alpha-transparency/
  133. 133 http://css-tricks.com/examples/HSLaExplorer/
  134. 134 http://css-tricks.com/examples/HSLaExplorer/
  135. 135 http://www.slideshare.net/LeaVerou/colors-in-css3?src=embed
  136. 136 http://www.slideshare.net/LeaVerou/colors-in-css3?src=embed
  137. 137 http://css-tricks.com/rgba-browser-support/
  138. 138 http://css-tricks.com/css3-gradients/
  139. 139 http://cubiq.org/playing-with-css3-gradients
  140. 140 http://cubiq.org/playing-with-css3-gradients
  141. 141 http://css-tricks.com/css3-gradients/
  142. 142 http://css-tricks.com/css3-gradients/
  143. 143 http://www.webdesignerwall.com/tutorials/cross-browser-css-gradient/
  144. 144 http://www.the-art-of-web.com/css/radial-gradients/
  145. 145 http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/
  146. 146 http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/
  147. 147 http://gradients.glrzad.com/
  148. 148 http://tools.westciv.com/gradients/index.html
  149. 149 http://www.display-inline.fr/projects/css-gradient/#startType=hex&startValue=aaeeff&endType=hex&endValue=3399cc
  150. 150 http://gradients.glrzad.com/
  151. 151 http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/
  152. 152 http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-understanding-css3-gradients/
  153. 153 http://weston.ruter.net/projects/css-gradients-via-canvas/
  154. 154 http://msdn.microsoft.com/en-us/library/ms532997%28VS.85%29.aspx
  155. 155 http://www.fontsquirrel.com/fontface/generator
  156. 156 http://typekit.com/
  157. 157 http://code.google.com/apis/webfonts/
  158. 158 http://www.smashingmagazine.com/2010/03/01/css-and-the-future-of-text/
  159. 159 http://www.smashingmagazine.com/2010/03/01/css-and-the-future-of-text/
  160. 160 http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/
  161. 161 http://sixrevisions.com/css/font-face-guide/
  162. 162 http://sixrevisions.com/css/font-face-guide/
  163. 163 http://www.fontsquirrel.com/fontface/generator
  164. 164 http://www.fontsquirrel.com/fontface
  165. 165 http://www.fontsquirrel.com/fontface/generator
  166. 166 http://desandro.com/articles/the-new-lens-flare/
  167. 167 http://desandro.com/articles/the-new-lens-flare/
  168. 168 http://kilianvalkhof.com/2008/javascript/text-shadow-in-ie-with-jquery/
  169. 169 http://www.hintzmann.dk/testcenter/js/jquery/textshadow/
  170. 170 http://msdn.microsoft.com/en-us/library/ms532979(VS.85).aspx
  171. 171 http://www.hintzmann.dk/testcenter/js/jquery/textshadow/jquery.textshadow.js
  172. 172 http://www.nealgrosskopf.com/tech/thread.php?pid=61
  173. 173 http://msdn.microsoft.com/en-us/library/ms673539%28VS.85%29.aspx
  174. 174 http://helephant.com/2008/10/css3-box-sizing-attribute/
  175. 175 http://jhop.me/css/css3/the-css3-box-sizing-concept-a-solution-to-a-longstanding-problem
  176. 176 http://helephant.com/2008/10/css3-box-sizing-attribute/
  177. 177 http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/
  178. 178 http://webtint.net/tutorials/future-of-css-the-flexible-box-model/
  179. 179 http://designshack.co.uk/tutorials/introduction-to-css3-part-4-user-interface
  180. 180 http://www.westciv.com/tools/boxshadows/index.html
  181. 181 http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/
  182. 182 http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows/
  183. 183 http://dimox.net/cross-browser-css3-box-shadow/
  184. 184 http://dimox.net/cross-browser-css3-box-shadow/
  185. 185 http://dimox.net/cross-browser-css3-box-shadow/
  186. 186 http://msdn.microsoft.com/en-us/library/ms533086%28VS.85%29.aspx
  187. 187 http://24ways.org/2009/going-nuts-with-css-transitions
  188. 188 http://24ways.org/2009/going-nuts-with-css-transitions
  189. 189 http://samuli.hakoniemi.net/css3-transitions-are-we-there-yet/
  190. 190 http://samuli.hakoniemi.net/css3-transitions-are-we-there-yet/
  191. 191 http://carsonified.com/blog/design/sexy-interactions-with-css-transitions/
  192. 192 http://carsonified.com/blog/design/sexy-interactions-with-css-transitions/
  193. 193 http://css3.bradshawenterprises.com/
  194. 194 http://css3.bradshawenterprises.com/
  195. 195 http://www.webdesignerdepot.com/2010/01/css-transitions-101/
  196. 196 http://www.webdesignerdepot.com/2010/01/css-transitions-101/
  197. 197 http://net.tutsplus.com/tutorials/html-css-techniques/css-fundametals-css-3-transitions/
  198. 198 http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/
  199. 199 http://kilianvalkhof.com/2010/css-xhtml/css3-loading-spinners-without-images/
  200. 200 http://www.marcofolio.net/css/3d_animation_using_pure_css3.html
  201. 201 http://www.marcofolio.net/css/3d_animation_using_pure_css3.html
  202. 202 http://legendthemes.com/2010/05/14/3d-css-wordpress-theme/
  203. 203 http://legendthemes.com/2010/05/14/3d-css-wordpress-theme/
  204. 204 http://border-radius.com/
  205. 205 http://csscorners.com/
  206. 206 http://css3generator.com/
  207. 207 http://css3please.com/
  208. 208 http://westciv.com/tools/index.html
  209. 209 http://westciv.com/tools/gradients/
  210. 210 http://westciv.com/tools/radialgradients/
  211. 211 http://westciv.com/tools/shadows/
  212. 212 http://westciv.com/tools/boxshadows/
  213. 213 http://westciv.com/tools/transforms/
  214. 214 http://westciv.com/tools/textStroke/
  215. 215 http://gradients.glrzad.com/
  216. 216 http://border-image.com/#%7B%22src%22%3A%22http%3A%2F%2Fwww.w3.org%2FTR%2Fcss3-background%2Fborder.png%22%2C%22linkBorder%22%3Atrue%2C%22borderWidth%22%3A%5B0%2C0%2C0%2C0%5D%2C%22imageOffset%22%3A%5B34%2C27%2C27%2C27%5D%2C%22setRepat%22%3Afalse%2C%22repeat%22%3A%5B%22repeat%22%2C%22repeat%22%5D%2C%22scaleFactor%22%3A3%2C%22setRepeat%22%3Atrue%7D
  217. 217 http://www.fontsquirrel.com/fontface/generator
  218. 218 http://www.impressivewebs.com/css3-click-chart/
  219. 219 http://gallery.theopalgroup.com/selectoracle/
  220. 220 http://www.smashingmagazine.com/2009/07/13/css-3-cheat-sheet-pdf/
  221. 221 http://www.smashingmagazine.com/2010/05/13/css-2-1-and-css-3-help-cheat-sheets-pdf/
  222. 222 http://www.modernizr.com/
  223. 223 http://www.modernizr.com/
  224. 224 http://polldaddy.com/poll/3358100/
  225. 225 http://polldaddy.com/features-surveys/

↑ Back to topShare on Twitter

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. Vitaly is writer, speaker, author and editor-in-chief of Smashing Magazine. He runs responsive Web design workshops, online workshops and loves solving complex performance problems in large companies. Get in touch.

Advertising
  1. 1

    Holy damn; what an article! Great resource/roundup to have and look into later. Bookmarked!

    Also, thanks a lot for sharing a couple of my CSS3 articles – I’m glad you like them!

    0
  2. 2

    Well there goes my evening! ;)

    0
  3. 3

    nice round of links, thanks.
    It covers up a lot of issues and looking forward to use more of the css3 power in my next projects.

    0
  4. 4

    Vitaly, thanks so much for this article – it will replace many of my bookmarks as you have put them into one informative page for me/us.

    This page is now bookmarked and RT’s by myself!

    Keep up the good work!

    David

    0
  5. 5

    Christoph Zillgens

    June 17, 2010 4:59 am

    Would like to add my CSS3 bookshelf using 3D-Transform. This only works in Safari (not in Google Chrome) currently.

    0
  6. 6
  7. 7

    wow! this is a great article. Definitely it takes 20 hrs to prepare. For me it will take a year to read all these :)

    I am bookmarking this link :)

    0
  8. 8

    70% will use CSS3 in new web project? Even when 80% of CSS3 effect works only in web-kit based browsers? :-) Well, i don´t know. Only CSS3 technique wich i use is rounded corners. But it still don´t work in IE. I hope it will be soon when CSS3 will be fully integrated into all browsers – it will make webdesign much more easier and effective. (sorry for my bad english)

    0
  9. 9

    This is really great roundup of CSS3 resources. Bookmarked for future references.

    0
  10. 10

    ALWAYS REMEMBER that CSS3, along with HTML5 and other open web technologies, are meant to create interoperable code that works, with the same markup, exactly the same between browsers. It’s not meant to make web pages more interactive or flashy.

    0
  11. 11

    Massive post, love it! Now I know what I’ll be doing this weekend. :D

    0
  12. 12

    “It just doesn’t make sense to keep looking back, being afraid to looking forward”
    Indeed

    0
  13. 13

    you took the words right out of my mouth Marco :)

    0
  14. 14

    thank you so much for valuable article….

    Ravikumar V.

    0
  15. 15

    Woot…. This is massive….. from any perspective. My weekend is booked…. I admire your research on this, Vitaly.. Great job

    0
  16. 16

    AWESOME! I am bookmarking this one. A nice roundup of articles I already reference with new ones I need to check out. Having them all in the same place will be great! Nice work.

    0
  17. 17

    Impressive set of information ;-) Maybe this experiment fits your article as well:

    Internet Explorer Pure CSS Logo
    http://cordobo.com/1630-internet-explorer-pure-css-logo/

    0
  18. 18

    Great article!! The more developers use CSS3, the sooner browser developers will be forced to be compliant…

    0
  19. 19

    Such a very useful information .Thanks for sharing these one..

    0
  20. 20

    Brilliant article, thank you so much!

    Does anyone understands how the spotlight effect was done? I just don’t get it.

    0
  21. 21

    Soon the web will be flooded by these similar style/design/effects – its like the very first time when Flash was launched- everyone got some crappy splash screen designed- overused the Flash and killed the design. – although i do like CSS3, i am afraid soon we all be overwhelmed with its (mis)uses.

    0
  22. 22

    I really really love CSS3 but still over 50% of the people use IE8.
    It just doesn’t work [u]yet[/u].

    Someday all websites will have really cool css3 effects on em.

    0
  23. 23

    What’s stopping you from giving the users of Safari, Chrome & Firefox a few nice touches?

    Surely if you can make they’re experience better with a couple of lines of CSS you should jump at the chance?

    0
  24. 24

    WOW huge list… beautiful collection… really useful links indeed.
    Thanks for including my post ‘RGBa vs Opacity: The Difference Explained’.

    -deepu

    0
  25. 25

    Because it might look like utter crap on IE, which is most of the market share currently. Why on earth would you design a website that only 30% of the market can view correctly?

    Also you have to think about large corporations that force their users into certain IE versions (some are just now launching IE7 throughout their networks).

    0
  26. 26

    CSS3 is a reward for those who know and use an evolved browser engine, like WebKit. I honestly have no sympathy for curmudgeonly IE users or developers, and can only hope that ten years from now it is merely a faded memory.

    0
  27. 27

    Kartlos Tchavelachvili

    June 17, 2010 10:06 am

    wow, really huge, cool and best article ever, thanks!

    0
  28. 28

    Wow! It’s articles like this that made me buy the Smashing Book as soon as it was available, and that made me disable my adblocker on your domain. Thank you!

    0
  29. 29

    Progressive Enhancement.

    0
  30. 30

    Amazing collection, thanks a bunch for this article!

    0
  31. 31

    Twitter was only meant to update your friends about what you’re doing right now, not to share links, RT, or hashtag. The Internet was only meant to handle government communications.

    The point is that you shouldn’t put artificial restraints on technologies just because of web standards. Let it evolve, and let standards evolve with it.

    “It’s not meant to” never stopped great innovators from making machines that fly or sailing around a world that was thought to be flat.

    0
  32. 32

    CSS3 Rocks! I love it, and am not going to worry about Internet Exploder catching up.

    0
  33. 33

    What a fantastic toolbox this is! Waiting on Exploder is fruitless; all the other browsers support these modern techniques already, so why not use them?

    Thanks for all the great content on SmashingMag lately, you all have been really going the extra mile it seems!

    0
  34. 34

    ? according to w3c it’s ie that has 30% market share

    0
  35. 35

    oops, sorry for the double post, i thought this comment was deleted.

    0
  36. 36

    “who complain that it doesn’t make sense to use CSS3 today”
    …and you should listen :)

    0
  37. 37

    yes, true- but trust me, alternatives to these on IE simply look crap and half-baked.. i’m sure its a good thing to have only when IE supports it OR everyone moves to other better browsers.

    0
  38. 38

    can’t agree more !! deja vu !!!!!!!!!!!

    0
  39. 39

    always test your comments on IE

    0
  40. 40

    I’m afraid I’m going to learn a lot to code in CSS3. I completely understand CSS2, but CSS3 it’s a lot different and bigger. It will be like learning a whole new language.

    0
  41. 41

    What worries me about CSS3 is that browsers haven’t been able to interpret all the specs exactly the same. Like you already had differences in font rendering, now you have differences in rounded corner, exotic @font-faces and text-shadow rendering. CSS3 might start looking differently in a zillion browsers.

    Also in Firefox for example, text-shadow will increase/overflow the box size (I’m not sure that is up to spec, but Chrome does it differently). So let’s say you have 2 pixels of blurry shadow to the right of your fonts. If you text-align content to the right, it will place your text 2 pixels of the border, not against the border. If you absolutely position your text to the right, the parent div will increase with 2 pixels and create a scrollbar unless you overflow hidden it… If you hide the overflow of the parent div, you clip the text-shadow on the last character.

    To me text-shadow shouldn’t increase the box-width of any font. I find this a strange implementation, and expect only more bumps and differences in the future. Browsers took years to get upto reasonable CSS 2.1 spec. It will probably take decades before CSS 3 is uniformly there to translate a design.

    CSS animation is even more icky. Animation is not design/styling. It’s a function of the design.

    0
  42. 42

    Great article!! I came across this little gem a few weeks ago that should not go unnoticed. I know link dropping is a no no here, but this is a hugely inspiring example of the power of css3. You will need to view it in either safari or chrome:

    http://tylergaw.com/blog/post/502100947/you-did-what-with-what

    Tyler’s most recent blog post is also worth your time. Enjoy!

    0
  43. 43

    Schahryar Fekri

    June 17, 2010 3:44 pm

    Wonderful! .. didn’t know much about CSS3 capabilities.
    Seems it’s covering some action script features as well.
    Going to learn CSS3 …

    0
  44. 44

    Touché. Sadly there is no IE for Apple platforms.

    0
  45. 45

    Exellent article!

    0
  46. 46

    CSS3? HTML5? … as always things move on, just when you think you’ve mastered something. This medium changes at such a pace compared to most professions. Try not to get dizzy!

    0
  47. 47

    Pure ‘editor in chief’ style post

    0
  48. 48

    spactacular work. Thanks for the effort.

    0
  49. 49

    Gotta agree! I kept scrolling down and thought wow! – Truly awesome article. Far too much to read in one sitting so going to do it justice and come back later. Great work!

    0
  50. 50

    I have also created a css3 clock, using a bit different approach (http://alexw.me/2010/06/pure-css3-analog-clock-with-a-little-cheat/)
    works with firefox and opera with JS, and webkits, are only css

    0
  51. 51

    Wooooo … I need long weekend to finish read and try this. Excellent

    0
  52. 52

    Vladimir Carrer

    June 18, 2010 1:56 am

    Great CSS3 collection! I made CSS3 Action Framework http://code.google.com/p/css3-action-framework/ perhaps can be useful to someone.

    0
  53. 53

    Wow! Thank you very much for the article you’ve done a ‘smashing’ job once again. It’s good to see passionate designers and developers willing to take on the task of ‘progress’. Without it we wouldn’t have the rich, dynamic medium we have today!

    0
  54. 54

    Amazing article! Bookmarked!

    0
  55. 55

    No I think this is different.

    I would be more inclined to compare this to our once used HTML table designs.

    There was a day that CSS came about it was us developers that used this to evolve the web. This was a great step in the right direction.

    I think that us as developers need to use CSS3 to bring the standard to us. We make the web.

    0
  56. 56

    We have been publishing articles about CSS3 for a while now, and we keep receiving angry e-mails from some developers who complain that it doesn’t make sense to use CSS3 today.

    You get angry emails? Seriously? If you don’t want to use CSS3, then don’t; no-one’s forcing you to. If you have to write angry emails because someone else writes about a technique that you don’t want to use, then you should maybe consider taking anger management classes.

    0
  57. 57

    I think we need to encourage users to want to upgrade their browsers to the best ‘most’ supporting CSS3 browser at the time.

    We need to be careful where we implement this because it won’t work in typical e-commerce solutions.

    However, if we create our own projects with these ‘most’ supportive browsers in mind and then supply a compatibility list of icons on these sites. Users will be able to identify that they can choose what browser to use and more importantly that the experience will change dependent on which is used.

    The Website would look excellent in Safari and have loads of extra cool effects. However it would look completely different in IE6, IE7, IE8, Firefox, Opera and Google but we would let those browsers fall on their own two feet. No more hacks, no more png fixes. It’s about time we stopped supporting this browsers on a pixel by pixel basis and allow them to do what they are capable of on their own.

    This will encourage vendors to make their browsers more compliant – we as designers/developers would be shaping the future of the web.

    0
  58. 58

    All I can say is wow! Great Job!

    0
  59. 59

    Great article, very helpful and immensely informative!

    0
  60. 60

    Ok’….. but… IE === 70% Browsers =(… some years more than expected!

    0
  61. 61

    Ok… but browser specific -webkit -moz css doesn’t really count as CSS3… as Crapple showed us with their website. So a lot of these don’t really count.

    0
  62. 62

    You have no sympathy for MSIE users unless they are purchasing things from you. These people are valid customers – no matter what browser they are using. Cater to the widest-adopted standards first. Throw in the flashy stuff later if it makes sense.

    I will not be coding CSS3 into my designs until the dominant browser(s) that fully support it is over 50% of market share. Otherwise, it’s extra work for little return on the investment. My time as a web developer is worth money, folks.

    0
  63. 63

    This article is a beautiful CSS´s tobogan. Great!!
    Thank you for to share.

    0
  64. 64

    I second Jacob: it’s all about progressive enhancement.

    No need to fuss about IE – just make it work. Maybe fix it up a little if it will help you sleep at night.

    0
  65. 65

    This post is insane! It inspires me to throw down a few more mega-posts of my own ;)

    Vitaly rulez!!!

    0
  66. 66

    nurul amin russel

    June 19, 2010 8:45 pm

    very useful post – gr8 job

    0
  67. 67

    Stunning post. CSS3 Info Rich article. Many thanks

    0
  68. 68

    Great Post!

    0
  69. 69

    Great job! Thank you for all this useful information!

    0
  70. 70

    Hi, In one word , Grate ! Its Excellent to read you ! Thank you.

    0
  71. 71

    Well done! I just love it how you guys can’t stop publishing about CSS… Great job!

    0
  72. 72

    THX for the css3-action-framework link.

    0
  73. 73

    Advantages of using css3 is that it much easier to code, but you need to have solution for fallback.

    Also some conservative clients think that everything should be same in all browsers, no matter what.

    0
  74. 74

    I don’t understand how CSS3 is worthwhile in most cases. For example, the 3D bar chart mentioned above is totally non-functional in IE. With 60% of your users using IE, how is this acceptable? It’s the same with many of the above examples.

    I’d love to be using it, but it seems like it’s not worth it right now. If anyone has a practical answer to this I’d love to hear it.

    0
  75. 75

    A great collection :). Thanks a lot :)
    But it seems like most of the CSS3 effect works only with Safari & Chrome. Not IE or FF. Do you have any solution for that?

    Nirmal..

    0
  76. 76

    A phenomenally fantastic list here! Thank you for collating this!

    0
  77. 77

    Thank you for this amazing article.
    Is there any tutorial for the spotlight effect ?

    0
  78. 78

    Excellent Article!!!!
    Well worth a full read from start to finish!!!

    0
  79. 79

    WoW.
    Estos codigos son increibles.
    Saludos!

    0
  80. 80

    The problem is that clients don’t accept this sort of extreme progressive enhancement so it isn’t advisable for anyone that actually caters to the public and not to ones designer ego. Also the difference in implementation is still so UN-standard so no, CSS3 isn’t “the shit” .. really. http://byme.se/jquery/css3-fail.html

    0
  81. 81

    Great round-up, thanks!

    0
  82. 82

    Douglas Bonneville

    October 28, 2010 12:09 am

    By the time you need to remove vendor specific markup, you will have updated your current website with vendor specific markup 3 or 4 times. There is no point waiting to use CSS3 whatsoever, if you have the time and budget on a project to implement it.

    0
  83. 83

    Personnally I prefer do al this with CSS 2.1 because all these plugins are instable

    0
  84. 84

    there is now.

    0
  85. 85

    What great article!
    I will definitely use CSS3 in my next projects. Bookmarked.

    0

↑ Back to top