HTML and CSS Reference
In-Depth Information
The default value is
ltr
, meaning left-to-right. It can be changed to
rtl
to make text
content within a block element flow to the right. It indicates that the text is supposed to be
read from right-to-left, as in Hebrew or Arabic text, for example.
<p style="direction: rtl">
Aligned from right-to-left
</p>
This property does inherit, so it can be set once for the
<body>
element to apply to
the whole web page.
text-shadow
A shadow effect can be added to text with the
text-shadow
property.
text-shadow : inherit | none | <offset-x> <offset-y> [<blur-radius>]
[<color>]
The shadow is defined using two offset values, followed by two optional values for
the blur radius and color. The x and y offsets are specified as length values relative to the
text. Positive values move the shadow right and down; negative values move it left and up.
A blur effect can be added by setting a blur radius, which makes the shadow stretch
and fade at the edges. The final optional value for the property is the color of the shadow.
If no color value is specified, most browsers render the shadow in the same color as the
text. The following example style causes a slightly blurred gray shadow to appear at the
top right of
<h1>
elements:
h1 { text-shadow: 1px -1px 1px gray; }
text-shadow
is a CSS 3 property that is supported by most major browsers, including
Chrome 2+, Firefox 3.5+, IE10+, Safari 1.2+, and Opera 9.5+.
box-shadow
In addition to text, a shadow effect can be added to block elements with the
box-shadow
property.
box-shadow (block) : inherit | none | [inset] <offset-x> <offset-y>
[<blur-radius>] [<spread-radius> [<color>]]
