Главная » Полезные статьи » HTML-верстка » Делаем тень к тексту на CSS
Распечатать статью

Делаем тень к тексту на CSS

Конечно, в Photoshop’е можно наводить красоту, но что делать если нужно сохранить именно текст, а не вставлять его красивой картинкой?

Например, заголовок для пущей индексации захотелось сделать текстом в тегах <h1> </h1>. Но при этом сохранить красивость. Вот так:

тень к тексту на css

* — здесь применён ещё градиент к тексту, используя опять таки CSS. О том как это реализовать — читайте в статье — Делаем градиент к тексту, используя CSS

Итак, делаем текст с тенью, используя CSS:

Уровень 3 CSS обладает свойством ‘text-shadow’ для добавления тени на каждую букву любого текста.

1. Простейшая форма:
h3 {text-shadow: 0.1em 0.1em #333}
2. Смазанные тени текста:
h3.b {text-shadow: 0.1em 0.1em 0.2em black}
3. Читаемый белый текст:
h3.a {color: white; text-shadow: black 0.1em 0.1em 0.2em}
4. Многослойные тени:
h3 {text-shadow: 0.2em 0.5em 0.1em #600,
-0.3em 0.1em 0.1em #060,
0.4em -0.3em 0.1em #006}
5. Рисование букв и контуров:
h3 {text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black}
6. Неоновое свечение:
h3.a {text-shadow: 0 0 0.2em #8F7}
h3.b {text-shadow: 0 0 0.2em #F87, 0 0 0.2em #F87}
h3.c {text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F}

Источник:  loco.ru

Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи