CSS3 properties: shadows!

January 7th 2010

Here’s a new series of post in which I’ll introduce you to new CSS3 properties. You might already know about them but have you tried them? Or know how to use them? Stay tuned and be ready when we can widely use them or start right now as it degrade gracefully.

In this article, I’ll cover text-shadow and box-shadow. Both are very similar and quite easy to use. To be able to view the example, you need to use a CSS3 compatible browser.

Text-shadow

This property will put a shadow under your text… Used wisely it can give the subtle touch that makes a design stand out. The CSS declaration should be as follow:

h1 {
text-shadow: #999 1px 1px 0px;
}

The four value are:

  1. Color of the shadow. Accepeted values are hex, rgb, rgba. I’ll discuss RGBA in the next article.
  2. X-Coordinate of the shadow relative to the text. A positive value will push it down, a negative value will pull it up.
  3. Y-Coordinate of the shadow relative to the text. A positive value will push it right, a negative value will pull it left.
  4. Blur of the shadow. The higher the value, the more blury the shadow. Don’t make it too high as it can make the text difficult to read. 0px or 1px is usually perfect!

Check out an example here. It should work in Firefox, Opera, Safari, WebKit, Chrome, you get it!

Box-Shadow

This property is very similar to text-shadow. It takes the same values, the only difference is that for now, you need to define it with browser specific prefix. The CSS declaration should be as follow:

#content {
  box-shadow: #000 2px 2px 15px;
  -moz-box-shadow: #000 2px 2px 15px;
  -webkit-box-shadow: #000 2px 2px 15px;
}

You see “-moz” and “-webkit”, those are the browser specific prefixes I was talking about. According to Michael Ventnor, the prefixes are not needed with text-shadow because they were part of CSS2.0 and got dropped in CSS2.1. Box-shadow needs the prefixes because it is part of CSS3.

Once CSS3 support will be final in the browsers the prefixes should be dropped. That’s also why I include a “box-shadow” without any prefix, for future support, this way you ensure your style will still be visible properly once the browsers drop the prefix.

Check out an example here. It should work in Firefox, Safari, WebKit, Chrome, you get it!

Bottom line

You can start using those properties right now, but make sure your design doesn’t rely on them as the properties are not widely supported yet. A browser that doesn’t support them won’t display any shadow, so it degrades gracefully.

It can be nice to start using this right now as it can make your life significantly easier, not having to play with PNGs to have shadows is a big plus and you can save some kilobytes on page sizes.

Just be careful if you start using this on clients website, I personally wouldn’t recommend it as clients often expect websites to be the same across all browsers. If your clients are open enough to let you play with this, then you’re in luck!

7 Responses to “CSS3 properties: shadows!”


  1. Josh says:

    You should have mentioned that instead of defining a hex value for the color, you can use RGBa to define something that will work everywhere. Sure, some people thing that it’s better to use a shade of the background as a shadow instead of say, black at 50%, but it can sure come in handy when you’re doing a wordpress plugin or something similar where you can’t control the background color.

  2. Stephane says:

    @Josh: You’re totally right. I planned to talk about RGBA values in mynext article but now that you point this out, it makes perfect sense.

  3. BEBEN says:

    its a cool…
    like the blur technique 😀

  4. danny says:

    Muchas gracias !!!!!!

  5. כסא מנהלים says:

    היי הידעתם? ריהוט משרדי הינו כולל רהיטים למשרד וריהוט משרדי וריהוט משרד

  6. Every single day I will be learning somewhat more about NodeJS. It is definately the one programming language to get familiar with long term. Just finished the BackSpace.Academy AWS Certified Developers educational program. It’s opened up a totally new Realm of applications for me. Now I’ve got to find the time in order to get developing!

Leave a Reply