Shadows are a graphical improvements for design or the website’s usability. We may want to create a design with shadows under images or boxes, but shadows also can improve usability and accesibility for the text positioned over the images.

Text shadows

In this post we’ll try to present some css techniques for text shadows and in a future posts we’ll try to gather some CSS image/box shadows continued with Javascripts that can do this for us.

Creating Cross Browser Compatible CSS Text Shadows

This technique use different browsers behaviour (for example use filter for ie , or text-shadow for safari).

Shadow

This one makes use of “content” attribute in css. You will have to create an id for every item u want shadowed and set the content attribute the same with the text displayed.

CSS Drop Shadows

This one use same “content” attribute, but also it uses selectors so you can setup a class for this. Instead for every shadowed item, you’ll have to set “title”attribute. Is not working in IE 6.

Drop Shadow

” Use absolute positioning to make a duplicate block of text. Then offset the first text block and use a dark gray color for the text. ”

Let us know if we missed something.

No related posts.