Тень текста CSS - примеры использования
У вас раньше появлялось неприятное чувство, когда ваши подписи плохо походили к цветам кнопок, панелей, или просто текст слабо контрастировал с фоном страницы?
С помощью CSS тени эту проблему легко решить, используя свойство text-shadow, чтобы улучшить читабельность и контрастность текста.
В приведенных примерах, мы используем тени текста в различных ситуациях, что даст вам необходимую базу, чтобы дальше вы смогли самостоятельно изучить данный вопрос.
Базовая настройка
Создайте новый HTML-файл и добавьте в него следующий код HTML и CSS:
<!DOCTYPE html>
<html>
<head>
<title>CSS Buttons</title>
</head>
<body>
<!-- Раздел стилей -->
<style>
</style>
<!-- Раздел HTML -->
</body>
</html>В раздел HTML добавьте тег <h1> с классом text:
<!-- Раздел HTML -->
<h1 class="text">Web Code Geeks</h1>Для этого элемента мы будем добавлять тень текста CSS.
Я задал для этого элемента начальные свойства, чтобы он красиво выглядел на экране:
<!-- Раздел стилей -->
<style>
body{
font-family: "Arial", "sans-serif"; /* пользовательский шрифт */
}
h1 { /* выравнивание текста */
margin-left: 7em;
margin-top: 5em;
}
</style>Теперь давайте зададим для текста атрибут 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).
Эффект ретро-тени
Для ретро-тени не всегда нужно применять размытие.
Возьмем, к примеру, эту ретро-тень:
body {
background: #fff3cd; /* изменяем цвет фона */
}
.text {
font-size: 5em;
color: white; /* изменяем цвет текста на белый */
text-shadow: 6px 6px 0px rgba(0,0,0,0.2); /* добавление ретро-тени */
}
Эффект двойной тени
Интересно, что вы можете добавлять более одной CSS тени шрифта. Это можно сделать следующим образом: text-shadow: shadow1, shadow2, shadow3;
Давайте добавим две тени, одна - с цветом фона, а вторая немного темнее:
.text {
font-size: 5em;
text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15); /* дает две тени */
}Фон у нас белый, так что другой цвет для него нам не нужен. В браузере эффект будет выглядеть так:
Эффект удаленной тени
Этот эффект основывается на функции определения нескольких красивых теней CSS. Ниже вы можете увидеть эффект с четырьмя тенями, отбрасываемыми вниз с различной степенью интенсивности:
body {
background: #fff3cd; /* изменяем цвет фона */
}
.text {
font-size: 5em;
color: white;
text-shadow: 0px 3px 0px #b2a98f,
0px 14px 10px rgba(0,0,0,0.15),
0px 24px 2px rgba(0,0,0,0.1),
0px 34px 30px rgba(0,0,0,0.1);
}
3D-эффект Марка Дотто
Следующий эффект был опубликован на MarkDotto.com, в нем используется 12 отдельных теней, чтобы создать реалистичный 3D-эффект:
body {
background: #3495c0; /* изменяем цвет фона */
}
.text {
font-size: 5em;
color: white;
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}Теперь посмотрите, как эти внутренние тени текста CSS выглядят в браузере:
Реалистичный эффект вырезанного текста Гордона Холла
Гордон использует некоторую продвинутую магию CSS, чтобы задать не только внешнюю тень, но и реалистичную внутреннюю тень:
body {
background: #cbcbcb; /* изменяем цвет фона */
}
.text {
font-size: 5em;
color: transparent;
background-color: #666666;
-webkit-background-clip: text;
-moz-background-clip: text;
background-clip: text;
text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;
}И это создает эффект вырезанного текста.
Эффект свечения текста
body {
background: #992d23; /* изменяем цвет фона */
}
.text {
font-size: 5em;
color: white;
text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
}Эта тень создает эффект свечения текста:
Эффект выпуклого текста
body {
background: #629552; /* изменяем цвет фона */
}
.text {
font-size: 5em;
color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
0px -5px 35px rgba(255,255,255,0.3);
}
Заключение
Как видите, свойство text-shadow очень просто в использовании, и с его помощью вы можете создавать собственные креативные CSS тени. Вы также можете загрузить исходный HTML-файл и изменить примеры, которые были представлены в этой статье.