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.

Tags

Archive

Try it today. It’s Free.

Takes less than 60 secondsNo commitmentNo payment information required

Get Started