Делаем эффект капающей крови к тексту с помощью CSS

Сделать эффект капающей крови нам поможет свойство text-shadow. Как мы помним, это свойство позволяет нам добавить к тексту тень (синтаксис свойства такой: сдвиг по оси X, сдвиг по оси Y, радиус размытия, цвет тени). Допускается указывать несколько параметров тени через запятую (именно благодаря перечислению параметров тени и достигается эффект капающей крови). В CSS3 будет работать такой порядок: первая тень будет размещаться на самом верху, последняя – в низу. Данный эффект не работает в браузере IE, Opera 9.2, FireFox 2.0, FireFox 3.0. Но вы можете наблюдать данные эффект в последних версиях браузеров FireFox, Opera, Chrome и Safari.

Как добавить тень блоку можно узнать в статье: создаем красивые тени с помощью свойства CSS3 box-shadow

CSS

.blood {
       color:silver;
       text-shadow:
       4px 4px 1px #300000,
       4px 6px 1px #400000,
       4px 8px 1px #500000,
       4px 10px 1px #600000,
       4px 12px 1px #700000,
       4px 14px 1px #800000,
       4px 16px 1px #900000,
       4px 18px 1px #A00000,
       4px 20px 1px #B00000,
       4px 22px 1px #C00000,
       4px 24px 1px #D00000,
       4px 26px 1px #E00000,
       4px 28px 1px #F00000,
       4px 30px 1px #FA0000,
       4px 32px 1px #FB0000,
       4px 34px 1px #FC0000,
       4px 36px 1px #FD0000,
       4px 38px 1px #FE0000,
       4px 40px 2px #FF0000;
}

HTML

 <h1 class="blood">Vampire!</h1>