A CSS3 Tip
July 27, 2010I’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!
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. :)
Thanks for the tip! Might actually use text-shadow for something now ;)
@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.
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
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.
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!
My eyes they are twitching from the paragraph. Just say no to text text shadows.
Just keep aware of performance. Heavy use of opacity kills on older or slower systems.
(Just look at the 24 Ways website.)
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 :)
IIRC, HSLA works with all CSS colour declarations as well, including new ones in CSS3.
And did you see how I spelled colour?
@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 :)
@Ms. Jen - Admittedly, my example above is a terrible use. But text shadows can be quite effective when used properly and sparingly.
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!
The text-shadow property is really useful for making large text look sharper. I’ve been using it on my headings.
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.
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 :)