Тень текста 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 выглядят в браузере:

3D-эффект Марка Дотто

3D-эффект тени

Реалистичный эффект вырезанного текста Гордона Холла

Гордон использует некоторую продвинутую магию 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-файл и изменить примеры, которые были представлены в этой статье.