作者:Sara Cope
p {
text-shadow: 1px 1px 1px #000;
}
你可以通过逗号“,”应用多个文本阴影。
p {
text-shadow: 1px 1px 1px #000,
3px 3px 5px blue;
}
前两个值指定了阴影偏移的长度。第一个值指定了阴影的水平距离,第二个值指定了阴影的垂直距离。第三个值指定了模糊半径(blur radius),最后一个值描述阴影的颜色:
1.value=X坐标
2.value=Y坐标
3.value=模糊半径
4.value=阴影颜色
前两个值使用正数,阴影会在文本右下侧,第一个值指定水平向右距离,第二个值指定垂直向下距离。
第三个值模糊半径是一个可选值,它可以指定,但不是必须的。它是文本被拉伸的像素的数量,而拉伸会造成一个模糊效果。如果你不使用第三个值,则视为指定模糊半径为0。
另外,记住你可以使用RGBa或HSLa值作为颜色,例如40%透明度的白色。
p {
text-shadow: 0px 2px 2px rgba(255, 255, 255, 0.4);
}
通过对text-shadow的设计,字体可以表现出类PPT中艺术字的效果。
.monkey-example {
text-align: center;
font: bold 80px Sans-Serif;
padding: 40px 0;
}
monkey-example为所有下面案例的公有class。
Slippery Slime
CSS样式:
.simple {
background: #91877b;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
Slippery Slime
CSS样式:
.otto {
background: #0e8dbc;
color: white;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0, 0, 0, .1),
0 0 5px rgba(0, 0, 0, .1),
0 1px 3px rgba(0, 0, 0, .3),
0 3px 5px rgba(0, 0, 0, .2),
0 5px 10px rgba(0, 0, 0, .25),
0 10px 10px rgba(0, 0, 0, .2),
0 20px 20px rgba(0, 0, 0, .15);
}
Mummy Mommy
CSS样式:
.relief {
background-color: #3a50d9;
color: #e0eff2;
font: italic bold 100px Georgia, Serif;
text-shadow: -4px 3px 0 #3a50d9, -14px 7px 0 #0a0e27;
}
Graveyard Smash
CSS样式:
.close {
background-color: #fff;
color: #202c2d;
text-shadow:
0 1px #808d93,
-1px 0 #cdd2d5,
-1px 2px #808d93,
-2px 1px #cdd2d5,
-2px 3px #808d93,
-3px 2px #cdd2d5,
-3px 4px #808d93,
-4px 3px #cdd2d5,
-4px 5px #808d93,
-5px 4px #cdd2d5,
-5px 6px #808d93,
-6px 5px #cdd2d5,
-6px 7px #808d93,
-7px 6px #cdd2d5,
-7px 8px #808d93,
-8px 7px #cdd2d5;
}
Skeleton Crew
CSS样式:
.printers {
background-color: #edde9c;
color: #bc2e1e;
text-shadow:
0 1px 0px #378ab4,
1px 0 0px #5dabcd,
1px 2px 1px #378ab4,
2px 1px 1px #5dabcd,
2px 3px 2px #378ab4,
3px 2px 2px #5dabcd,
3px 4px 2px #378ab4,
4px 3px 3px #5dabcd,
4px 5px 3px #378ab4,
5px 4px 2px #5dabcd,
5px 6px 2px #378ab4,
6px 5px 2px #5dabcd,
6px 7px 1px #378ab4,
7px 6px 1px #5dabcd,
7px 8px 0px #378ab4,
8px 7px 0px #5dabcd;
}
Smooth Zombie
CSS样式:
.glow {
color: #444;
text-shadow:
1px 0px 1px #ccc, 0px 1px 1px #eee,
2px 1px 1px #ccc, 1px 2px 1px #eee,
3px 2px 1px #ccc, 2px 3px 1px #eee,
4px 3px 1px #ccc, 3px 4px 1px #eee,
5px 4px 1px #ccc, 4px 5px 1px #eee,
6px 5px 1px #ccc, 5px 6px 1px #eee,
7px 6px 1px #ccc;
}
Vampire Diaries
CSS样式:
.vamp {
color: #92a5de;
background: red;
text-shadow: 0px 0px 0 rgb(137, 156, 213),
1px 1px 0 rgb(129, 148, 205),
2px 2px 0 rgb(120, 139, 196),
3px 3px 0 rgb(111, 130, 187),
4px 4px 0 rgb(103, 122, 179),
5px 5px 0 rgb(94, 113, 170),
6px 6px 0 rgb(85, 104, 161),
7px 7px 0 rgb(76, 95, 152),
8px 8px 0 rgb(68, 87, 144),
9px 9px 0 rgb(59, 78, 135),
10px 10px 0 rgb(50, 69, 126),
11px 11px 0 rgb(42, 61, 118),
12px 12px 0 rgb(33, 52, 109),
13px 13px 0 rgb(24, 43, 100),
14px 14px 0 rgb(15, 34, 91),
15px 15px 0 rgb(7, 26, 83),
16px 16px 0 rgb(-2, 17, 74),
17px 17px 0 rgb(-11, 8, 65),
18px 18px 0 rgb(-19, 0, 57),
19px 19px 0 rgb(-28, -9, 48),
20px 20px 0 rgb(-37, -18, 39),
21px 21px 20px rgba(0, 0, 0, 1),
21px 21px 1px rgba(0, 0, 0, 0.5),
0px 0px 20px rgba(0, 0, 0, .2);
}