Skip to: Navigation | Content | Sidebar | Footer

Full Archives

A CSS3 Tip

July 27

I'm probably way behind the curve on this one, but I recently realized the following:

All browsers that support the CSS text-shadow and box-shadow properties also support the new CSS3 RGBa syntax. Which means you can safely combine them today.

That's handy, because it means no worrying about matching a precise hex colour shadow to a specific hex colour background. Instead just let the browser blend. An example:

p {
  text-shadow: rgba(0, 0, 0, 0.2) 0 1px 0;

That will produce a paragraph with a 20% opacity black drop shadow that will blend into any background colour below it. A paragraph like this one.

Previously I might have created the drop shadow in Photoshop, then used the eye dropper tool to pull out the composited shadow hex value after the transparency was applied to the background colour. No more!

Permalink › | 16 comments