Like a beautiful jewel, 3D transform can be dazzling, a true spectacle to behold. But before we start tacking 3D diamonds and rubies to our compositions like Liberace’s tailor, we owe it to our users to ask what can they benefit from this awesome feature.

animate.css is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

steps() is a relatively new addition to the CSS3 animations module. Instead of interpolating the values smoothly, it allows us to define the number of “frames” precisely. So I used it to create headers that have the well-known animated “typing effect”:

Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances.

Since the beginning of the 'webfont revolution' we've relied on somewhat hacky @font-face declarations to get webfonts loading cross-browser. Could there be a better way? One that's clear and compatible with future browsers?

The choice is not between using media queries and creating a dedicated mobile site; the choice is between using media queries and doing nothing at all.

A quick proof-of-concept using CSS3 animations. Only works in Webkit. Looks extra-smooth in Safari. I'll clean it up, make it work with everything, and release it a little later on.

I'd bet that you've done your fair share of styling elements to be arranged horizontally or vertically on a page. As of yet, though, CSS has lacked a suitable mechanism for this task. Enter the CSS3 Flexible Box Module, or Flexbox for short.

A bunch of neat little css3 demos.

Wonderful CSS3 demo including webkit-animation, the :target pseudo-class, and beautifully written style.

This is a collection of buttons that show what is possible using CSS3. They look best in WebKit browsers and appear quite plain in IE.

Inspired by a shot from Jonno Riekwel, I knocked up a quick Progress Bar in Photoshop on a friday afternoon before heading to the pub. Then a couple of people suggested implementing it with CSS.

Have you ever seen an element on a page with transparent borders? I think Facebook originally popularized it giving birth to lightbox plugins like Facebox. I don’t think Facebook sports the look anymore, but it’s still rather neat.

Let’s consider an example design. I’ve built a simple page for a hypothetical magazine; it’s a straightforward two-column layout built on a fluid grid, with not a few flexible images peppered throughout. As a long-time proponent of non-fixed layouts, I’ve long felt they were more “future proof” simply because they were layout agnostic. And to a certain extent, that’s true: flexible designs make no assumptions about a browser window’s width, and adapt beautifully to devices that have portrait and landscape modes.

It seems like virtually every day there’s a fantastic new example of something amazing you can do with CSS3. Whether it’s as complex as full-blown animations or as (relatively) simple as RGBa colors, drop shadows, or rounded corners, I marvel at how far we’ve come since the lowly days of CSS1 or (shudder) the @font element.

There was a goal: Create CSS buttons that are sexy looking, really flexible, but with the most minimalistic markup as possible.

A demo of CSS3, using Mobile Webkit to display the power of CSS transforms.

Great, in-depth article on how to properly use the @font-face rule of CSS3.

Amazing CSS3 animation that's completely highlightable. Via @moterfuton