CSS3 Text Shadow

The text-shadow property is used as follows:
text-shadow:2px 2px 2px #000;

CSS Shadows take three length values, and a color. The length values are a horizontal offset, a vertical offset and a blur. Offsets may be negative or positive.

text-shadow

The text-shadow is supported by: Webkit (from Safari 3+, Chrome), Opera 9.5, Firefox 3.1(pre-Alpha), Konqueror.

See also:
CSS3 Rounded Corners, CSS3 Shadow, CSS3 Animation, CSS3 Text Shadow, CSS3 Gradient, CSS3 Transition

Download

Download
for Windows

Download
for Mac

CSS3 Text Shadow Effect

Text shadow is a cool feature that has been long expected of CSS3. There is no longer any need to create Photoshop images and upload them to the server specifically to achieve a simple effect like shadow behind text. It can be used to draw attention to the text, show off CSS3 text shadow feature or, in case of a navigation menu, simply for the purpose of style and good looks.

It is not really a new feature, since it was available in CSS2 as well, but the latest version has improved upon several key elements of the effect, allowing for more customization by web designers. It has also gained wider appreciation as speed and memory of an average computer improves, giving browsers a reason to get better at rendering CSS on the screen.

Curiously enough, Internet Explorer 9 still has not text shadow effect in their browser, planning it instead for IE10. Then again, it might not come as much of a surprise as Microsoft is always late to include all the latest features in their software. In fact, Internet Explorer has been relentless in avoiding support of text shadows, while browsers like Firefox, Opera and Safari have had it for years!

Either way, this is no reason to decide not to implement CSS3 text shadow effect for your navigation menu. Just keep in mind that Internet users with a version of IE below 10 will not be able to appreciate the amazing work you have done on your site. At least not the shadows.

The CSS3 text shadow feature creates Photoshop-quality shadows with style, but it is also very versatile. Creative website developers can exploit it to create even more cool effects that are sure to leave visitors wondering. For example, it is possible to create multiple layers of shadows and edit their colors in a way that would resemble flames. The result looks as if the letters were on fire!

This can prove to be a challenge for a website owner to actually pull off in CSS3, as can the simpler text shadow effects. Even if you master some of the features you need and will learn to implement them for your navigation bar, it can all be done much quicker using CSS3 Menu, the free software for building your own customized navigation menus with the least effort and time possible.

Despite what some people may think about seeing the implementation of text shadow, CSS3 effects are not just a fancy way of drawing attention to your site. Within the right templates and styles, nothing fits quite as nicely as letters that seem to cast shadows on the computer screen.

You may want to hold back this effect when it does not look good on your navigation menu, but when it does, it’s good to have CSS3 text shadow at your disposal. Just open CSS3 Menu, quickly build the navigation bar you like and switch between different types and colors of shadows to find the one that works best for your site.