There seems to come a time in every young self-proclaimed designer’s career where they decide “everything” needs a shadow. They’re wrong. However, you can add a little bit of a shadow or glow with CSS3 on some elements, and it really does set the text off from the background just a touch. And we’re talking all about subtlety here, so when I say “just a touch” it would probably serve you well to stick to that.

You can use the css3 text-shadow property to achieve this. Here is the syntax:

text-shadow: [color] [x-offset]px [y-offset]px [blur]px;

It’s really that simple. So for example, if you wanted to give something an actual drop shadow, you can use something like this:

text-shadow: #666 2px 2px 2px;

And your result would look like this.

or maybe just a slight red glow, instead:

text-shadow: #F00 0px 0px 2px;

And your result would look like this.



Powered by Facebook Comments