Working with Typography - Learn to Code HTML and CSS: Develop and Style Websites - page 112

Box Shadow
The text-shadow property places a shadow specifically on the text of an ele-
ment. If we'd like to place a shadow on the element as a whole, we can use the
box-shadow property. The box-shadow property works just like the text-
shadow property, accepting values for horizontal and vertical offsets, a blur, and
a color.
The box-shadow property also accepts an optional fourth length value, before
the color value, for the spread of a shadow. As a positive length value, the spread
will expand the shadow larger than the size of the element it's applied to, and as a
negative length value the spread will shrink the shadow to be smaller than the size
of the element it's applied to.
Lastly, the box-shadow property may include an optional inset value at the
beginning of the value to place the shadow inside an element as opposed to out-
side the element.
Text Transform
Similar to the font-variant property, there is the text-transform property. While
the font-variant property looks for an alternate variant of a typeface, the text-
transform property will change the text inline without the need for an alternate typeface.
The text-transform property accepts five values: none , capitalize , upper-
case , lowercase , and inherit .
The capitalize value will capitalize the first letter of each word, the uppercase
value will capitalize every letter, and the lowercase value will make every letter lower-
case. Using none will return any of these inherited values back to the original text style.
The following CSS sets all <p> element text to appear in all uppercase letters:
Click here to view code image
1. p {
2. text-transform: uppercase;
3. }