Sara Cope关于text-shadow的介绍

作者：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);
         }