文字阴影-CSS Text-Shadow

  1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2<html xmlns="http://www.w3.org/1999/xhtml">
  3<head>
  4<title>文字阴影-CSS Text-Shadow in Safari, Opera, Firefox and other Web Browsers</title>
  5<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
  6<meta name="description" content="涂聚文,捷为工作室,经营信息流,物流,人力资源流,资本流的系统解决方案的开发与设计和服务,geoVI studio.Geovin　Du. Systems Solution to Fund flow,and Information flow,and Material flow,and Control flow,and Human Resource.Applied software development,design and service。.">
  7<meta name="Robots" content="all index follow ">
  8<meta name="Author" content="涂聚文" />
  9<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
 10<link rel="icon" href="favicon.ico" type="image/ico" />
 11<link rel="Bookmark" href="favicon.ico"> 
 12<style type="text/css">
 13/*    *  要素本身
 14    * 围绕要素的空格填充（padding）
 15    * 围绕空格填充的边框（border）
 16    * 围绕边框的边距（空白－margin）
 17*/
 18body{
 19    font-family:Georgia,serif;
 20    margin:1em auto;
 21    max-width:60em;
 22    padding:0 1em;
 23}
 24h1,h2{
 25    text-shadow: 2px 3px 4px #CCC;
 26}
 27.example{
 28    border: 1px dotted #666;
 29    margin: 0.5em 2em 1em;
 30    padding: 0.3em;
 31}
 32code{
 33    color:#666;
 34}
 35div code{
 36    display:block;
 37    margin:0 0 0.4em 0;
 38}
 39.example p{
 40    font-size: 150%;
 41    font-weight: bold;
 42    margin: 0;
 43    padding: 10px 15px;
 44}
 45address{
 46    font-style:normal;
 47    text-align:right;
 48}
 49</style>
 50<script type="text/javascript">
 51
 52var handle = false;
 53var textBrightness = 50;
 54var fireCount = 6;
 55var fireDelta = new Array();
 56var step = 0;
 57var angle = 0;
 58var radius = 6;
 59
 60function animate()
 61{
 62    fireDelta[fireCount - step] = Math.random() * 2 - 1;
 63    var e = document.getElementById("fire");
 64    var s = "";
 65    for (var i = fireCount; i--; )
 66    {
 67        if (s) s += ", ";
 68        s += Math.round(fireDelta[(i + fireCount - step) % fireCount] * i) + "px " + (-2 * i -1) + "px " + (2 + i) + "px ";
 69        s += "rgb(255, " + (255 - i * Math.floor(255 / (fireCount - 1))) + ", 0)";
 70    }
 71    e.style.textShadow = s;
 72    /* We need to change something, else the shadow will not be re-rendered. */
 73    e.style.color = "rgb(" +
 74        (textBrightness + step % 2) + ", " +
 75        textBrightness + ", " +
 76        textBrightness + ")";
 77    step = (step + 1) % fireCount;
 78
 79    /* RGB */
 80    angle -= 0.4;
 81    if (angle <= 0) angle = Math.PI * 2;
 82    var e = document.getElementById("rgb");
 83    var s =
 84        Math.round(Math.sin(angle) * radius) + "px " +
 85        Math.round(Math.cos(angle) * radius) + "px 4px #0F0, " +
 86        Math.round(Math.sin(angle + Math.PI * 4 / 3) * radius) + "px " +
 87        Math.round(Math.cos(angle + Math.PI * 4 / 3) * radius) + "px 4px #F00, " +
 88        Math.round(Math.sin(angle + Math.PI * 2 / 3) * radius) + "px " +
 89        Math.round(Math.cos(angle + Math.PI * 2 / 3) * radius) + "px 4px #33F";
 90    e.style.textShadow = s;
 91    /* We need to change something, else the shadow will not be re-rendered. */
 92    e.style.color = "rgb(" + (255 - step % 2) + ", 255, 255)";
 93}
 94
 95function toggleAnimation()
 96{
 97    for (var i = 0; i < fireCount; i++)
 98        fireDelta[i] = Math.random() * 2 - 1;
 99    if (handle)
100    {
101        window.clearInterval(handle);
102        handle = false;
103    }
104    else
105        handle = window.setInterval(function() { animate(); }, 100);
106    return false;
107}
108
109</script>
110</head>
111<body onload="toggleAnimation()">
112
113<h1>CSS Text-Shadow in Safari, Opera, Firefox and more</h1>
114
115<p>The CSS&thinsp;2 property <code>text-shadow</code> is supported in
116Safari since version 3 (also available for Windows), Opera since 9.5, Firefox since 3.1, Konqueror and iCab.
117Future versions of Google Chrome should also support <code>text-shadow</code> because Chrome is based on WebKit,
118the rendering engine behind Safari. Internet Explorer 8 does not support such text shadows
119(except for some DirectX image transform filters).</p>
120
121<h2>Animated multiple Shadows (requires JavaScript)</h2>
122
123<p><a href="#" onclick="return toggleAnimation()">Start/stop animations</a>.
124Safari supports one shadow only. Only the first shadow is displayed.</p>
125
126<div class="example">
127<code>element.style.textShadow = "&hellip;";</code>
128<p id="rgb" style="background: #000; color: #FFF;">
129Text shadows were defined in 1997 and became applicable in 2009
130</p>
131</div>
132
133<div class="example">
134<code>element.style.textShadow = "&hellip;";</code>
135<p id="fire" style="background: #000; color: #666;">
136Text shadows were defined in 1997 and became applicable in 2009
137</p>
138</div>
139
140<h2>Multiple Shadows (max. 6)</h2>
141
142<p>Opera supports at most six shadows.
143Safari supports one shadow only. Only the first shadow is displayed.</p>
144
145<div class="example">
146<code>text-shadow: -1px -1px #666, 1px 1px #FFF;</code>
147
148<p style="background: #CCC; color: #CCC; text-shadow: -1px -1px #666, 1px 1px #FFF;">
149Text shadows were defined in 1997 and became applicable in 2009
150</p>
151</div>
152
153<div class="example">
154<code>text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF;</code>
155<p style="background: #999; color: #999; text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF;">
156Text shadows were defined in 1997 and became applicable in 2009
157</p>
158</div>
159
160<div class="example">
161<code>text-shadow: 0 -1px #000, 1px 0 #000, 0 1px #000, -1px 0 #000;</code>
162<p style="background: #DDD; color: #EEE; text-shadow: 0 -1px #000, 1px 0 #000, 0 1px #000, -1px 0 #000;">
163
164Text shadows were defined in 1997 and became applicable in 2009
165</p>
166</div>
167
168<div class="example">
169<code>text-shadow: 1px 0 #F33, -1px 0 #33F;</code>
170<p style="background: #FFF; color: #000; text-shadow: 1px 0 #F33, -1px 0 #33F;">
171Text shadows were defined in 1997 and became applicable in 2009
172</p>
173</div>
174
175<div class="example">
176<code>text-shadow: 2px 0 4px #600, -2px 0 4px #006;</code>
177<p style="background: #FFF; color: #000; text-shadow: 2px 0 4px #600, -2px 0 4px #006;">
178Text shadows were defined in 1997 and became applicable in 2009
179
180</p>
181</div>
182
183<div class="example">
184<code>text-shadow: 3px -5px 4px #0F0, -3px -5px 4px #F00, 0 6px 4px #33F;</code>
185<p style="background: #000; color: #FFF; text-shadow: 3px -5px 4px #0F0, -3px -5px 4px #F00, 0 6px 4px #33F;">
186Text shadows were defined in 1997 and became applicable in 2009
187</p>
188</div>
189
190<div class="example">
191<code>text-shadow: 0 0 24px #C00, 0 0 4px #C00, 1px 1px 2px #333;</code>
192<p style="background: #FFF; color: #FFF; text-shadow: 0 0 24px #C00, 0 0 4px #C00, 1px 1px 2px #333;">
193Text shadows were defined in 1997 and became applicable in 2009
194</p>
195
196</div>
197
198<h2>Classical Shadows</h2>
199
200<div class="example">
201<code>text-shadow: 1px 1px 2px #999;</code>
202<p style="background: #FFF; color: #000; text-shadow: 1px 1px 2px #999;">
203Text shadows were defined in 1997 and became applicable in 2009
204</p>
205</div>
206
207<div class="example">
208<code>text-shadow: 2px 2px 3px #999;</code>
209<p style="background: #FFF; color: #069; text-shadow: 2px 2px 3px #999;">
210
211Text shadows were defined in 1997 and became applicable in 2009
212</p>
213</div>
214
215<div class="example">
216<code>text-shadow: 0 0 8px #000;</code>
217<p style="background: #369; color: #FC0; text-shadow: 0 0 8px #000;">
218Text shadows were defined in 1997 and became applicable in 2009
219</p>
220</div>
221
222<h2>Glowing Borders</h2>
223
224<div class="example">
225<code>text-shadow: 0 0 11px #0F0;</code>
226
227<p style="background: #000; color: #0F0; text-shadow: 0 0 11px #0F0;">
228Text shadows were defined in 1997 and became applicable in 2009
229</p>
230</div>
231
232<div class="example">
233<code>text-shadow: 0 0 5px #FF0;</code>
234<p style="background: #000; color: #FFF; text-shadow: 0 0 5px #FF0;">
235Text shadows were defined in 1997 and became applicable in 2009
236</p>
237</div>
238
239<div class="example">
240<code>text-shadow: 0 0 3px #F90;</code>
241<p style="background: #FFF; color: #000; text-shadow: 0 0 3px #F90;">
242
243Text shadows were defined in 1997 and became applicable in 2009
244</p>
245</div>
246
247<h2>Unusual Effects</h2>
248
249<div class="example">
250<code>text-shadow: 0 7px 11px #390;</code>
251<p style="background: #FFF; color: #000; text-shadow: 0 7px 11px #390;">
252Text shadows were defined in 1997 and became applicable in 2009
253</p>
254</div>
255
256<div class="example">
257<code>text-shadow: 0px -15px 0 #F00;</code>
258
259<p style="background: #FFF; color: #000; text-shadow: 0px -15px 0 #F00;">
260Text shadows were defined in 1997 and became applicable in 2009
261</p>
262</div>
263
264<div class="example">
265<code>text-shadow: 0 0 11px #FF6;</code>
266<p style="background: #000; color: #000; text-shadow: 0 0 11px #FF6;">
267Text shadows were defined in 1997 and became applicable in 2009
268</p>
269</div>
270
271<div class="example">
272<code>text-shadow: 0 0 8px #000;</code>
273<p style="background: #FFF; color: #CCC; text-shadow: 0 0 8px #000;">
274
275Text shadows were defined in 1997 and became applicable in 2009
276</p>
277</div>
278
279<address>&copy; <a href="http://dupcit.com/">Geovin Du</a>,
280created in <a href="http://dupcit.com/1188980640">September 2009</a><br>
281</address>
282
283</body>
284</html>
posted @ 2009-08-28 15:04  ®Geovin Du Dream Park™  阅读(1510)  评论(0)  编辑  收藏  举报