Start Using CSS3: RGBa and better shadows

If you're like most designers, you've probably spent at least some time looking over the new features of "HTML5" and considering if or when you should switch over to it. Inevitably you're going to also run into the topic of CSS3. The changes can seem intimidating at first, but there are a lots of great reasons to start using the new features. Even better, some of them are easier to implement than their antiquated counterparts.

One such new feature is RGBa. Instead of manually working through all of the possibilities of hex colors for box- or text- shadows, why not use CSS3's RGBa ability to set the alpha channel (transparency) while using only black? It's simple, and it's supported in the modern browsers (i.e. - Chrome, Safari, and Firefox). The basic code would look like this: 


color: rgba(0,0,0,0.2);

What this will give you is black (the 0, 0, 0) at an opacity of 20% (the 0.2). So in a real world scenario, it would look something like this:


#shadow {
color: #329ea8;
text-shadow: 1px 3px 3px rgba(0, 0, 0, 0.2);
}

Which would result in something like this:

 

 

You can start using this technique in your stylesheets today. The downside is that it doesn't work in IE8 and earlier, but then neither do box- or text- shadow, so that's why I only use the RGBa solution in those two scenarios. Beside that, box- and text- shadows are almost always purely used for visual enhancement, which means they are very rarely necessary. Therefore, leaving IE users out on this one is unlikely to hinder functionality.

3 comments (Add your own)

1. Matt Sanders wrote:
Note: A working fallback may look like this:

#shadow {
color:rgb(102,102,102); /* Fallback for Older Browsers */
color:rgba(0,0,0,0.75); /* Older browsers will ignore this while supported browsers will overwrite the previous property */
}

Wed, February 23, 2011 @ 11:11 AM

2. dmitri wrote:
Sure looks cool. But IE is going to resist. It would be fine with something like text shadows, but rounded corners will come out like squares.

Wed, February 23, 2011 @ 11:21 AM

3. Jake Whitton wrote:
I use this quite a bit. Glad to see you guys use it as well. The more love for newer browsers, the better!

Fri, February 25, 2011 @ 4:50 PM

Add a New Comment

Enter the code you see below:
code
 

Comment Guidelines: No HTML is allowed. Off-topic or inappropriate comments will be edited or deleted. Thanks.

Tags

Archive

Try it yourself. It's free.

Takes less than 60 secondsNo commitmentNo payment information required

Sign Up for Free