|
|
|
|
The text-shadow property allows you to define a drop-shadow of a given colour for text. You must specify an offset and you can also enter a blur radius (which means you can get fuzzy shadows or glow effects) and a colour. Not currently working in any of the browsers. To specify a shadow offset, you enter two values that indicate the distance from the text. The first length value specifies the horizontal distance to the right of the text. The second length value specifies the vertical distance below the text. For example: h1 { text-shadow: 0.2em 0.2em; }
This example sets a text shadow to the right and below the <h1> tag. The shadow is the same colour as the <h1> tag and is not blurred. You can also use negative values to put the shadow to the left or above the text. h1 { text-shadow: -0.2em -0.2em; }
If you want to blur the shadow, you enter a blur radius after the shadow offset. The blur radius is a value that indicates the boundaries of the blur effect. The exact algorithm for computing the blur effect is not specified. You can also specify the colour. For example: h2 { text-shadow: 3px 3px 5px red; }
This example puts a shadow to the right and below the <h2> tag. The shadow has a 5 pixel blur radius and is red. Text shadows may be used with the first-letter and first-line pseudo-elements. You can define more than one shadow at a time. The browser applies the shadow in the order in which you enter them and may overlay them. This example has three different shadows: h2 { text-shadow: 3px 3px red, -3px 3px 2px yellow, 3px -3px;}
The first shadow is to the right and below the tag’s text and will be red with no blurring. The second shadow overlays the first shadow effect and it will be yellow, blurred, and placed to the left and below the text. The third shadow effect will be placed to the right and above the text. |
More information text-shadow |
