Enhancing a Web Site with Advanced CSS - HTML, CSS, and Dynamic HTML - page 552

The blur parameter defines the amount of space the shadow text is stretched, creating
a blurred effect. The larger the blur value, the less distinct are the borders of the shadow
image. The default blur value is 0 pixels for a text shadow that has very hard and dis-
tinct edges. The text-shadow style

text-shadow: red 10px 5px 15px;
creates a red text shadow that is 10 pixels to the right and 5 pixels down from the text
with a blur size of 15 pixels.
You can apply multiple shadows to the same text by specifying different shadow styles
separated by commas as follows

text-shadow: shadow , shadow , shadow , … ;
where shadow is a text shadow style. Multiple shadows are applied from first to last with
the first shadow listed displayed on top of the succeeding shadows. Thus the style

text-shadow: red 10px 5px 15px,
blue -5px -10px 5px;
applies two shadows: a red shadow with the parameter values described above, and a
blue shadow that is placed 5 pixels to the left and 10 pixels above the text with a 5-pixel
blur. The blue shadow is put down first, with the red shadow on top of it.
Figure 8-3 shows examples of applying the text-shadow style to achieve a variety of
different effects using single and multiple shadows.

figure 8-3 examples of text shadows

text-shadow: rgb(211,
211, 211) 4px 6px 5px;

color: rgb(150, 187, 60);
text-shadow: black
-4px -3px 5px;

color: white;text-shadow:
black 0px 0px 1px;

color: white;text-shadow:
rgb(90, 127, 0) 0px
0px 25px;

color: white;text-shadow:
black 0px 0px 3px,
green 4px 4px 4px,
blue 0px 0px 55px;

background-color: rgb(110,
137, 20);color: rgb(90, 127, 0);
text-shadow:
black 1px 1px 1px,
white 0px -2px 0px;

You can also explore the text-shadow style using the demo_text_shadows.htm ile in
the tutorial.08/demo folder.

To remove a text-shadow ,
set the value of the text-
shadow style to none .