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:
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