CSS тень текста

Как сделать текст с тенью

CSS тень текста или как сделать текст с тенью

CSS атрибуты и значения, определяющие тень для текста

На момент написания урока, эффект «Тень для текста», т. е. свойства атрибута text-shadow поддерживают браузеры: Firefox, Opera, Chrome — не поддерживают: Internet Explorer, N. Navigator. Причина этого в том, что спецификация CSS 3 еще не получила статус официальной рекомендации.

Пример текста с тенью:

CSS тень текста на примере заголовка

Код примера:

<head>
<title>CSS текст с тенью на примере заголовка</title>
</head>
<body>
<h1 style="text-shadow:#6699ff 1px 1px 1px">CSS тень текста на примере заголовка</h1>
</body>

Рассмотрим строчку кода text-shadow:#ff9933 1px 1px 1px. Значение #ff9933 определяет цвет тени, участок кода 1px 1px 1px определяет соответственно: смещение тени вправо, смещение тени вниз и размытие тени.

Сместим тень текста по горизонтали и по вертикали на отрицательную величину:

Как сделать текст с тенью при помощи CSS?

Код примера:

<head>
<title>CSS тень текста на примере заголовка</title>
</head>
<body>
<h1 style="text-shadow:#cccccc -15px -20px 2px">Как сделать текст с тенью при помощи CSS?
</h1>
</body>

Теперь вы знаете, как сделать эффект «Текст с тенью» при помощи CSS. Еще: Тень блока в CSS.

Дата публикации: Апрель 2010 | Обновление: Август 2014

CSS видимость элементов   CSS тень для текста   CSS скругление углов

    Сохранить в сервисы и закладки