Как сделать тень текста в html

Тень текста CSS — примеры использования

У вас раньше появлялось неприятное чувство, когда ваши подписи плохо походили к цветам кнопок, панелей, или просто текст слабо контрастировал с фоном страницы?

С помощью CSS тени эту проблему легко решить, используя свойство text-shadow , чтобы улучшить читабельность и контрастность текста.

В приведенных примерах, мы используем тени текста в различных ситуациях, что даст вам необходимую базу, чтобы дальше вы смогли самостоятельно изучить данный вопрос.

Базовая настройка

Создайте новый HTML-файл и добавьте в него следующий код HTML и CSS :

CSS Buttons

В раздел HTML добавьте тег с классом text :

 Web Code Geeks

Для этого элемента мы будем добавлять тень текста CSS .

Я задал для этого элемента начальные свойства, чтобы он красиво выглядел на экране:

Теперь давайте зададим для текста атрибут text-shadow .

Но сначала разберемся, какие значения принимает этот атрибут:

text-shadow: 4px 4px 4px #ccc;

4px – смещение по оси X ( горизонтальное );
3px – смещение по оси Y ( вертикальное );
2px – значение размытия;
#ccc – цвет.

Это задается следующим образом:

text-shadow: horizontal-offset vertical-offset blur color;

где цвет может быть представлен шестнадцатеричным кодом #ccc или RGBA ( 0,0,0,0.3 );.

В CSS мы можем применить к нашему тексту внутреннюю тень CSS следующим образом:

 .text < font-size: 5em; /* делаем текст больше */ text-shadow: 4px 3px 2px #ccc; >

Представление в браузере этого текста с тенью будет выглядеть так:

Созданная тень

Вариации

Дальше мы будем по-разному изменять цвет фона элемента body . Делаем мы это потому, что для некоторых теней CSS нужен определенный фон, иначе они не будут заметны.

Чтобы текст смотрелся красивее, мы зададим его в верхнем регистре.

Эффект оттиска

Установите для цвета текста немного более темный оттенок, чем фон.

Затем примените небольшую белую тень текста с уменьшенной непрозрачностью:

body < background: #222; >.text < font-size: 5em; color: rgba(0,0,0,0.6); /* цвет текста */ text-shadow: 2px 2px 3px rgba(255,255,255,0.1); /* добавление тени */ >

Используя код RGBA , вы можете установить непрозрачность цвета. Обратите внимание на то, что цвет текста имеет непрозрачность 60% ( 0.6 ), а тени div CSS 10% ( 0.1 ).

Тень для текста: свойство CSS text-shadow

Еще один способ украсить веб-страницу – сделать текст с тенью в CSS. При грамотном применении данного стиля можно удачно выделить заголовок, абзац, часть текста. Вы можете настроить цвет тени, ее смещение и размытие.

Задать в CSS тень текста можно с помощью свойства text-shadow, которое поддерживается всеми браузерами, кроме Internet Explorer версии 9 и ранее. Также есть проблемы с Opera Mini – этот браузер лишь частично поддерживает свойство. Ниже показан пример записи стиля и значений свойства:

Как видно, мы указали целых четыре значения через пробел. Пройдемся по порядку:

Свойство CSS text-shadow – параметры

3px – первое значение отвечает за смещение тени по оси X (вправо, влево). Положительным значением тень сдвигается вправо, а отрицательным – влево.
5px – второе значение отвечает за смещение тени по оси Y (вниз, вверх). Положительным значением тень сдвигается вниз, а отрицательным – вверх.
6px – третье значение отвечает за радиус размытия тени. Этот параметр указывать необязательно. По умолчанию размытие равняется 0 пикселей, что делает тень четкой и неразмытой.
#6c9 – четвертое значение отвечает за цвет тени. Этот параметр указывать необязательно. По умолчанию цвет тени устанавливается такой же, как у текста, к которому применяется стиль.

Как выглядит тень в браузере (скриншот):

Тень для текста CSS – вид в браузере

Несколько теней CSS для текста

Также допускается использовать несколько групп значений для свойства text-shadow. Это означает, что вы можете установить несколько теней для одного текста. Для этого нужно записать группы значений через запятую.

Результат применения такого стиля виден на скриншоте:

Несколько теней текста CSS

С помощью свойства CSS text-shadow можно создавать действительно красивые вещи. Вы можете экспериментировать: устанавливать большое количество различных теней, задавать цвет не только в шестнадцатеричном виде, но и в формате RGBA, используя альфа-канал для настройки прозрачности. Вот что может получиться, если уделить этому свойству достаточное количество внимания:

Свойство CSS text-shadow

Свойство CSS text-shadow отвечает за задание тени у текста. Очень схож со свойство box-shadow.

Синтаксис CSS text-shadow

text-shadow: X Y R color;

X — сдвиг тени относительно текста по оси Х (чаще всего задается в пикселях px);
Y — сдвиг тени относительно текста по оси Y (чаще всего задается в пикселях px);
R — радиус тени (чаще всего задается в пикселях px);
color — цвет (можно задавать в любом формате, см. названия html цветов)

Синтаксис text-shadow допускает задание нескольких теней через запятую. Например

text-shadow: X1 Y1 R1 color1, X2 Y2 R2 color2, . ;

Приоритет тени (какая выше, какая ниже) зависит от конкретной версии CSS. В CSS3 первая тень в списке размещается на самом верху, последняя в списке — в самом низу. В CSS2 наоборот.

Примеры: как сделать тень у текста в html

Пример №1. Простая тень у текста в html

Ниже представлен самый простой пример с тенью у текста. Здесь мы применили оба смещения (X и Y), а также сделали радиус размытия.

html> head> style> .primer1< padding: 10px; color: #0000CD; font-size: 20px; text-shadow: 3px 1px 7px #191970; > /style> /head> body> div class css">primer1">Текст с тенью/div> /body> /html>