Add a drop shadow to text.
Syntax
text-shadow: h-shadow v-shadow [blur] [spread*][color] ;
h-shadow - Shadow offset horizontal in px, pt or em.. Positive values move the shadow to the right on the page. Negative and zero values are allowed.
v-shadow - Shadow offset vertical in px, pt or em. Positive values move the shadow down the page. Negative and zero values are allowed.
blur - The blur in px, pt or em.
spread - IE only - Expand the shadow in all directions by the specified radius.
color - The color of the shadow.
inherit - inherit from the parent element.
To generate an embossed effect make the text itself the same color as the page background and then apply a small (1or 2px) text-shadow with a contrasting color.
To apply a thicker drop shadow, you can apply multiple text-shadows in a single rule, so to add 3 shadows increasingly to the lower left:
text-shadow:-1px 1px #333,-2px 2px #333,-3px 3px #333;
Examples:
h1 { text-shadow: 1px 2px #6666ff; }
.emw3class { text-shadow: 2px 2px 1px #9933dd; }
#emw3id { text-shadow: -5px 0 1em black; }
Try it:
A drop shadow can be a very appealing effect, but when applied to text at a small font size will become difficult to read. This is a feature that is worth testing carefully on a variety of devices (with and without clear-text enabled.) |
(CSS 2.0 and CSS 3) Browser Support: All major browsers.
“Some painters transform the sun into a yellow spot; others transform a yellow spot into the sun” ~ Pablo Picasso
Related:
font-weight - Normal, bold, bolder.
text-align - Horizontal alignment of text.
text-decoration - Add decoration to text.
text-indent - Indent the first line in a text-block.
text-overflow - What should happen when text overflows the containing element.
text-transform - Change the capitalization of text.
css3maker - interactive text-shadow CSS builder.