Mobile version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

A CSS3 Tip

July 27, 2010

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!


1
Andy Hume says:
July 27, 17h

Whereas what I’ve learnt from your post is that the text-shadow syntax allows the color value to come before or after the offset and blur values. I thought you’d made a mistake until I checked the docs.

Here’s to learning things that everyone else already knows. :)

2
July 27, 17h

Thanks for the tip! Might actually use text-shadow for something now ;)

3
Dave S. says:
July 27, 17h

@Andy Hume - makes more sense to me to have the colour value closest to the selector, keeps it consistent with the way I specify background-colour in shorthand. Though, I guess I specify border colour on the right instead, so I’m kind of all over the place anyway. Hmm.

4
nkm says:
July 28, 00h

I’ve been using this technique for a while now and works fine, indeed.

The only problem that I’ve found so far is that Chrome in Windows doesn’t render text properly when applying a translucent shadow on it. It works perfectly in Firefox, Safari and Opera, though.

Here is screenshot: http://cl.ly/4ca88650b173fc80d484

5
Jack says:
July 28, 04h

This hit me yesterday as well, because I was using grey shadows instead of using lower opacities on black or white backgrounds. This is fine until you start putting different colour or pattern/image backgrounds in, then the grey shows and looks ugly.

6
July 28, 10h

I’m using text-shadow, but not yet with rgba syntax. It’s amazing to see new CSS3 tips every day, with endless possibilities.

Thanks for the tip!

7
Ms. Jen says:
July 28, 20h

My eyes they are twitching from the paragraph. Just say no to text text shadows.

8
July 29, 12h

Just keep aware of performance. Heavy use of opacity kills on older or slower systems.
(Just look at the 24 Ways website.)

9
July 29, 12h

I’ve used the RGBA syntax on the box-shadow and it helps me a lot when I slice PSD to HTML. No more worrying :)

10
July 29, 13h

IIRC, HSLA works with all CSS colour declarations as well, including new ones in CSS3.

And did you see how I spelled colour?

11
July 31, 02h

@Michael - ugh, the 24 Ways website is a chug-fest on older machines.

Again, like Andy I have been using this for a while now but Dave I see your reasoning for using the colour values before the offset and blur values. I will be doing this too from now on :)

12
Dave S. says:
August 02, 15h

@Ms. Jen - Admittedly, my example above is a terrible use. But text shadows can be quite effective when used properly and sparingly.

13
Edson says:
August 03, 06h

Great! Well explained! I didn’t know that “all browsers that support the CSS text-shadow and box-shadow properties also support the new CSS3 RGBa syntax”. Just a few days ago I tried to blend a dark-grey box-shadow over a little colored gradient and the result was a mess… Tks again!

14
August 03, 07h

The text-shadow property is really useful for making large text look sharper. I’ve been using it on my headings.

15
August 04, 12h

Yes, I rarely use anything other than HSLA for declaring shadow colors.

BTW, Dave, technically you’re supposed to put the background color at the end of the background shorthand property. It works either way, but if you read the spec they have it at the end. Just learned this recently. Seems weird to me – I always put it at the start too.

16
John Alden says:
August 11, 06h

Ah thanks mate. This is much neater to use than checking the color of the background and using the text-shadow with taking that into account. A black shadow with 0.2 - 0.3 opacity should do just fine :)