HTML and CSS Reference
In-Depth Information
Here, the CSS indents the text for all <p> elements inward by 20 pixels:
1. p {
2. text-indent: 20px;
3. }
Text Shadow
The text-shadow property allows us to add a shadow or multiple shadows to text. The
property generally takes four values, all listed one after the other from left to right. The first
three values are lengths, and the last value is a color.
Within the three length values, the first value determines the shadow's horizontal offset,
the second value determines the shadow's vertical offset, and the third value determines the
shadow's blur radius. The fourth, and last, value is the shadow's color, which can be any of
the color values used within the color property.
The text-shadow property here is casting a 30% opaque black shadow 3 pixels towards
the right, 6 pixels down, and blurred 2 pixels off all <p> element text:
Click here to view code image
1. p {
2. text-shadow: 3px 6px 2px rgba(0, 0, 0, .3);
3. }
Using negative length values for the horizontal and vertical offsets allows us to move shad-
ows toward the left and the top.
Multiple text shadows can also be chained together using comma-separated values, adding
more than one shadow to the text. Using numerous shadows allows us to place them above
and below the text, or in any variation we desire.
Search WWH ::

Custom Search