Skip to content

Commit 7e98d29

Browse files
howcomhowcom
committed
[css2] major upgrade of 'text-shadow' property
--HG-- extra : convert_revision : svn%3A73dc7c4b-06e6-40f3-b4f7-9ed1dbc14bfc/trunk%40498
1 parent 771ea33 commit 7e98d29

1 file changed

Lines changed: 76 additions & 12 deletions

File tree

‎css2/text.src‎

Lines changed: 76 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
22
<html lang="en">
3-
<!-- $Id: text.src,v 1.21 1997-12-09 00:08:16 ijacobs Exp $ -->
3+
<!-- $Id: text.src,v 1.22 1997-12-10 14:34:14 howcome Exp $ -->
44
<HEAD>
55
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
66
<TITLE>Text</TITLE>
@@ -109,24 +109,88 @@ class="propinst-text-shadow">'text-shadow'</span> property</H3>
109109

110110
<!-- #include src=properties/text-shadow.srb -->
111111

112-
<P>CSS2 allows authors to create text shadow effects with this
113-
property.
112+
<P>The 'text-shadow' property accepts a comma-separated list of shadow
113+
effects to be applied to the text of the element. The shadow effects
114+
are applied in the order specified and may thus overlay each other,
115+
but they will never overlay the text itself. Shadow effects do not
116+
alter the size of the element, but may extend beyond its boundaries.
117+
The <A href="flowobj.html#stack-level">Z-order</a> of the shadow
118+
effects is the same as for the element itself.
119+
120+
<P>Each shadow effect must specify a shadow offset and may optionally
121+
specify a blur radius and a shadow color.
122+
123+
<P>A shadow offset is specified with two length values which indicate
124+
the the distance from the text. The first length value specifies the
125+
horizontal distance to the right of the text. A negative horizontal
126+
length value places the shadow to the left of the text. The second
127+
length value specifies the vertical distance below the text. A
128+
negative vertical length value places the shadow above the text.
129+
130+
<P>A blur radius may optionally be specified after the shadow offset.
131+
The blur radius is a length value which indicate the boundaries of the
132+
blur effect. The exact algorithm for computing the blur effect is not
133+
specified.
134+
135+
<P>A color value may optionally be specified before or after the
136+
length values of the shadow effect. The color value will be used as
137+
the basis for the shadow effect. If no color is specified, the value
138+
of the 'color' property will be used instead.
139+
140+
<div class="example">
141+
142+
<P>The example below will set a text shadow to the right and below the
143+
element's text. Since no color has been specified, the shadow will
144+
have the same color as the element itself, and since no blur radius is
145+
specified, the text shadow will not be blurred:
114146

115-
<div class="example"><P>
116-
So, for example, the following rule:
147+
<PRE>
148+
H1 { text-shadow: 0.2em 0.2em }
149+
</PRE>
150+
151+
<P>The example below will place a shadow to the right and below
152+
the element's text. The shadow will have a 5px blur radius and will be
153+
red.
117154

118155
<PRE>
119-
P { text-shadow: black }
156+
H2 { text-shadow: 3px 3px 5px red }
120157
</PRE>
121158

122-
<P>creates a black text shadow down and to the right of the text.
123-
</div>
159+
<P>In the example below, a list of shadow effects are specified. The
160+
first shadow will be to the right and below the element's text, and it
161+
will be red with no blurring. The second shadow will overlay the first
162+
shadow effect, and it will be yellow, blurred and placed to the left
163+
and below the text. The third shadow effect will be placed to the
164+
right and above the text. Since no shadow color is specified for the
165+
third shadow effect, the color of the element itself will be used:
166+
167+
<PRE>
168+
H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }
169+
</PRE>
170+
171+
</DIV>
172+
173+
<P>The 'text-shadow' property does not exist in CSS1, and some shadow
174+
effects may render text invisible in UAs which only supports CSS1.
175+
176+
<div class="example">
177+
178+
<P>Condsider this example:
179+
180+
<PRE>
181+
SPAN.glow {
182+
background: lime;
183+
color: lime;
184+
text-shadow: red 0px 0px 5px;
185+
}
186+
</PRE>
187+
188+
<P>Here, the 'background' and 'color' properties have the same value
189+
and the 'text-shadow' property is used to create a "solar eclipse"
190+
effect.
124191

125-
<P>Text shadows increase the size of an element's box.
192+
</DIV>
126193

127-
<P><em>[Editor's note: The remaining sections of the text shadow
128-
proposal were not clear enough to be translated. More explanation
129-
is required.]</em>
130194

131195
<H2><a name="spacing-props">Letter and word spacing</a>: the <span
132196
class="propinst-letter-spacing">'letter-spacing'</span> and <span

0 commit comments

Comments
 (0)