Sara Cope关于text-shadow的介绍

作者：Sara Cope

1         p {
2             text-shadow: 1px 1px 1px #000;
3         }

你可以通过逗号“,”应用多个文本阴影。

1         p {
2             text-shadow: 1px 1px 1px #000,
3                 3px 3px 5px blue;
4         }

前两个值指定了阴影偏移的长度。第一个值指定了阴影的水平距离，第二个值指定了阴影的垂直距离。第三个值指定了模糊半径（blur radius），最后一个值描述阴影的颜色：
1.value=X坐标
2.value=Y坐标
3.value=模糊半径
4.value=阴影颜色

前两个值使用正数，阴影会在文本右下侧，第一个值指定水平向右距离，第二个值指定垂直向下距离。

第三个值模糊半径是一个可选值，它可以指定，但不是必须的。它是文本被拉伸的像素的数量，而拉伸会造成一个模糊效果。如果你不使用第三个值，则视为指定模糊半径为0。
另外，记住你可以使用RGBa或HSLa值作为颜色，例如40%透明度的白色。

1         p {
2             text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4);
3         }

通过对text-shadow的设计，字体可以表现出类PPT中艺术字的效果。

1 .monkey-example {
2   text-align: center;
3   font: bold 80px Sans-Serif;
4   padding: 40px 0;
5 }

monkey-example为所有下面案例的公有class。

Slippery Slime

 

CSS样式：

1         .simple {
2             background: #91877b;
3             text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
4         }

Slippery Slime

CSS样式：

 1         .otto {
 2             background: #0e8dbc;
 3             color: white;
 4             text-shadow: 0 1px 0 #ccc,
 5                 0 2px 0 #c9c9c9,
 6                 0 3px 0 #bbb,
 7                 0 4px 0 #b9b9b9,
 8                 0 5px 0 #aaa,
 9                 0 6px 1px rgba(0, 0, 0, .1),
10                 0 0 5px rgba(0, 0, 0, .1),
11                 0 1px 3px rgba(0, 0, 0, .3),
12                 0 3px 5px rgba(0, 0, 0, .2),
13                 0 5px 10px rgba(0, 0, 0, .25),
14                 0 10px 10px rgba(0, 0, 0, .2),
15                 0 20px 20px rgba(0, 0, 0, .15);
16         }

Mummy Mommy

CSS样式：

1         .relief {
2             background-color: #3a50d9;
3             color: #e0eff2;
4             font: italic bold 100px Georgia, Serif;
5             text-shadow: -4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27;
6         }

Graveyard Smash

CSS样式：

 1         .close {
 2             background-color: #fff;
 3             color: #202c2d;
 4             text-shadow:
 5                 0 1px #808d93,
 6                 -1px 0 #cdd2d5,
 7                 -1px 2px #808d93,
 8                 -2px 1px #cdd2d5,
 9                 -2px 3px #808d93,
10                 -3px 2px #cdd2d5,
11                 -3px 4px #808d93,
12                 -4px 3px #cdd2d5,
13                 -4px 5px #808d93,
14                 -5px 4px #cdd2d5,
15                 -5px 6px #808d93,
16                 -6px 5px #cdd2d5,
17                 -6px 7px #808d93,
18                 -7px 6px #cdd2d5,
19                 -7px 8px #808d93,
20                 -8px 7px #cdd2d5;
21         }

Skeleton Crew

CSS样式：

 1         .printers {
 2             background-color: #edde9c;
 3             color: #bc2e1e;
 4             text-shadow:
 5                 0 1px 0px #378ab4,
 6                 1px 0 0px #5dabcd,
 7                 1px 2px 1px #378ab4,
 8                 2px 1px 1px #5dabcd,
 9                 2px 3px 2px #378ab4,
10                 3px 2px 2px #5dabcd,
11                 3px 4px 2px #378ab4,
12                 4px 3px 3px #5dabcd,
13                 4px 5px 3px #378ab4,
14                 5px 4px 2px #5dabcd,
15                 5px 6px 2px #378ab4,
16                 6px 5px 2px #5dabcd,
17                 6px 7px 1px #378ab4,
18                 7px 6px 1px #5dabcd,
19                 7px 8px 0px #378ab4,
20                 8px 7px 0px #5dabcd;
21         }

Smooth Zombie

CSS样式：

 1         .glow {
 2             color: #444;
 3             text-shadow:
 4                 1px 0px 1px #ccc, 0px 1px 1px #eee,
 5                 2px 1px 1px #ccc, 1px 2px 1px #eee,
 6                 3px 2px 1px #ccc, 2px 3px 1px #eee,
 7                 4px 3px 1px #ccc, 3px 4px 1px #eee,
 8                 5px 4px 1px #ccc, 4px 5px 1px #eee,
 9                 6px 5px 1px #ccc, 5px 6px 1px #eee,
10                 7px 6px 1px #ccc;
11         }

Vampire Diaries

CSS样式：

 1         .vamp {
 2             color: #92a5de;
 3             background: red;
 4             text-shadow: 0px 0px 0 rgb(137, 156, 213),
 5                 1px 1px 0 rgb(129, 148, 205),
 6                 2px 2px 0 rgb(120, 139, 196),
 7                 3px 3px 0 rgb(111, 130, 187),
 8                 4px 4px 0 rgb(103, 122, 179),
 9                 5px 5px 0 rgb(94, 113, 170),
10                 6px 6px 0 rgb(85, 104, 161),
11                 7px 7px 0 rgb(76, 95, 152),
12                 8px 8px 0 rgb(68, 87, 144),
13                 9px 9px 0 rgb(59, 78, 135),
14                 10px 10px 0 rgb(50, 69, 126),
15                 11px 11px 0 rgb(42, 61, 118),
16                 12px 12px 0 rgb(33, 52, 109),
17                 13px 13px 0 rgb(24, 43, 100),
18                 14px 14px 0 rgb(15, 34, 91),
19                 15px 15px 0 rgb(7, 26, 83),
20                 16px 16px 0 rgb(-2, 17, 74),
21                 17px 17px 0 rgb(-11, 8, 65),
22                 18px 18px 0 rgb(-19, 0, 57),
23                 19px 19px 0 rgb(-28, -9, 48),
24                 20px 20px 0 rgb(-37, -18, 39),
25                 21px 21px 20px rgba(0, 0, 0, 1),
26                 21px 21px 1px rgba(0, 0, 0, 0.5),
27                 0px 0px 20px rgba(0, 0, 0, .2);
28         }