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 | Обновление: Ноябрь 2018

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