Текст и тень | htmlbook.ru
Одно время на текст с тенью была определённая мода и подобный эффект можно было встретить практически на любом сайте. В графическом редакторе тень добавляется просто, выглядит отлично, вот текст с тенью и пихали на веб-страницы независимо от стиля сайта и чувства меры дизайнера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство text-shadow, мода уже прошла и теперь текст с тенью встречается довольно редко. Впрочем у text-shadow есть ряд других неявных способов применения, о которых мало кто подозревает. С помощью этого свойства можно делать контурный текст, «выдавливать» его, создавать свечение, размытие и многое другое.
Использование text-shadow
В качестве значений пишется четыре параметра: цвет тени, смещение по горизонтали и вертикали и радиус размытия тени (рис. 1).
Рис. 1. Параметры text-shadow
Цвет допускается писать в начале или в конце всех параметров в любом подходящем формате CSS. Так что можно сделать и полупрозрачную тень через формат rgba. Положительные значения смещения «отбрасывают» тень вправо и вниз, а отрицательные, соответственно, влево и вверх. Чтобы тень была вокруг текста, достаточно задать нулевые значения смещения. Радиус размытия устанавливает, насколько тень будет резкой. Чем больше радиус размытия, тем мягче выглядит тень.
Большим плюсом text-shadow является возможность добавлять сразу несколько разных теней, перечисляя их параметры через запятую. Эта особенность, в основном, и позволяет делать разные эффекты.
К сожалению, IE до версии 10.0 не поддерживает text-shadow, так что в этом браузере мы никаких красивостей не увидим.
Контурный текст
Контурный текст характерен тем, что каждая буква обводится линией, цвет которой отличается от цвета текста (рис. 2). Лучше всего этот эффект смотрится с рубленым шрифтом большого размера, например, заголовков. Для основного текста применение контура лишь ухудшает читабельность.
Рис. 2. Контурный текст
Контур можно создать двумя методами. В первом методе устанавливаем нулевое смещение тени и небольшой радиус её размытия, буквально, 1-2 пиксела (пример 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.
Пример 1. Контурный текст
HTML5CSS3IE 9IE 10+CrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Текст</title> <style> .stroke { font: 2em Arial, sans-serif; text-shadow: red 0 0 2px; } </style> </head> <body> <p>Контурный текст</p> </body> </html>
Контур, сделанный этим методом, продемонстрирован на рис. 1. Контур получается слегка размытым, поэтому для тех, кто хочет получить чёткую линию, предназначен второй метод. Он заключается в использовании четырёх резких теней одного цвета, они смещаются в разные углы на один пиксел (пример 2).
Пример 2. Четыре тени для контура
HTML5CSS3IE 9IE 10+CrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Текст</title> <style> .stroke { font: 2em Arial, sans-serif; text-shadow: red 1px 1px 0, red -1px -1px 0, red -1px 1px 0, red 1px -1px 0; } </style> </head> <body> <p>Контурный текст</p> </body> </html>
Вид такого контура показан на рис. 3. Заметно, что контур получается более выразительным.
Рис. 3. Контур с помощью четырёх теней
Трёхмерный текст
Для добавления эффекта трёхмерного текста показанного на рис. 4 применяется одновременно несколько теней которые смещаются относительно друг друга на один пиксел по горизонтали и вертикали.
Рис. 4. Трёхмерный текст
Лично мне подобный текст напоминает надписи в стиле ретро и опять же лучше всего он подходит для заголовков, а не для основного текста веб-страницы.
Число теней зависит от того, насколько вы хотите «выдвинуть» текст вперёд. Большее количество повышает «глубину» букв, меньшее, наоборот, понижает трёхмерность. В примере 3 используется пять теней одного цвета.
Пример 3. Тень для добавления трёхмерности
HTML5CSS3IE 9IE 10+CrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Текст</title> <style> .stroke { font: bold 3em Arial, sans-serif; color: #0d3967; text-shadow: #cad5e2 1px 1px 0, #cad5e2 2px 2px 0, #cad5e2 3px 3px 0, #cad5e2 4px 4px 0, #cad5e2 5px 5px 0; } </style> </head> <body> <h2>Десятикамерный холодильник</h2> </body> </html>
Для всех теней ставим нулевой радиус размытия и одинаковый цвет. Различаются тени только значениями смещения.
Тиснение текста
Для создания эффекта тиснения текста или, по-другому, рельефа, цвет текста должен совпадать с цветом фона. Одна часть «выступающих» над поверхностью букв словно освещена, другая же часть находится в тени (рис. 5).
Рис. 5. Рельефный текст
Для добавления подобного эффекта нам понадобится две тени — белую тень мы смещаем влево вверх на один пиксел, а тёмно-серую вправо вниз (пример 4).
Пример 4. Рельефный текст
HTML5CSS3IE 9IE 10+CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текст</title>
<style>
body {
background: #f0f0f0; /* Цвет фона веб-страницы */
}
.stroke {
font: bold 3em Arial, sans-serif;
color: #f0f0f0; /* Цвет текста, совпадает с цветом фона */
text-shadow: #fff -1px -1px 0,
#333 1px 1px 0;
}
</style>
</head>
<body>
<h2>Рельефный текст</h2>
</body>
</html>Рельеф выигрышнее всего смотрится именно на сером фоне, поэтому эффект подойдёт не для каждой цветовой схемы сайта. Кстати, легко получить вдавленный, а не выдавленный текст, достаточно поменять местами цвета тени.
text-shadow: #333 -1px -1px 0,
#fff 1px 1px 0;Свечение
Свечение вокруг текста — это та же самая тень, только она яркая и контрастная. Таким образом, для создания эффекта свечения достаточно изменить цвет тени и поставить желаемый радиус размытия. Поскольку свечение вокруг текста должно быть равномерным, то смещение тени надо задать нулевым. На рис. 6 показан пример свечения разных цветов.
Рис. 6. Свечение текста
Пример 5. Свечение
HTML5CSS3IE 9IE 10+CrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Текст</title> <style> .light { text-shadow: #5dc8e5 0 0 10px; /* Свечение голубого цвета */ color: #0083bd; } .dark { text-shadow: red 0 0 10px; /* Свечение красного цвета */ } </style> </head> <body> <h2>Светлая сторона</h2> <h2>Тёмная сторона</h2> </body> </html>
Размытие
Тень сама по себе размывается, так что если оставить только тень, а сам текст скрыть, то мы получим размытые буквы (рис. 7), причём степень размытия легко регулировать через параметр text-shadow.
Рис. 7. Текст с размытием
Для сокрытия оригинального текста достаточно задать цвет как transparent (пример 6). Цвет тени после этого выступает цветом текста, а радиус размытия устанавливает степень нерезкости букв.
Пример 6. Размытие текста
HTML5CSS3IE 9IE 10+CrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Текст</title>
<style>
.blur {
text-shadow: #000 0 0 5px;
color: transparent; /* Прозрачный цвет текста */
}
</style>
</head>
<body>
<h2>Нерезкий текст</h2>
</body>
</html>Тень и псевдоклассы
Тень не обязательно добавлять непосредственно к тексту, свойство text-shadow прекрасно сочетается с псевдоклассами :hover и :first-letter. За счёт этого получаются интересные эффекты с текстом вроде контурной первой буквы абзаца или свечения ссылки при наведении на неё курсора мыши. В примере 7 показаны такие приёмы.
Пример 7. Использование псевдоклассов
HTML5CSS3IE 9IE 10+CrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Текст</title> <style> a:hover { /* Вид ссылки при наведении на неё курсора */ text-shadow: #5dc8e5 0 0 5px; color: #000; } p:first-letter { /* Первая буква абзаца */ font-size: 2em; text-shadow: red 1px 1px 0, red -1px -1px 0, red -1px 1px 0, red 1px -1px 0; } </style> </head> <body> <p>Нишевый проект тормозит <a href="1.html">традиционный канал</a>, не считаясь с затратами. Структура рынка, отбрасывая подробности, стабилизирует департамент маркетинга и продаж, используя опыт предыдущих кампаний. Построение бренда, безусловно, спонтанно отталкивает конвергентный PR, отвоевывая рыночный сегмент. Инвестиция синхронизирует ролевой социальный статус, повышая конкуренцию. Торговая марка естественно обуславливает план размещения, используя опыт предыдущих кампаний.</p> </body> </html>
Свойство text-shadow — тень текста
Свойство text-shadow задает тень тексту. В качестве значения свойство принимает 4 параметра, перечисляемые через пробел, либо ключевое слово
Синтаксис
селектор {
text-shadow: сдвиг_по_x сдвиг_по_y размытие цвет;
}
селектор {
text-shadow: none;
}
Параметры
| Параметр | Описание |
|---|---|
| сдвиг по x | Задает смещение тени по оси X. Положительное значение смещает вправо, отрицательное — влево. |
| сдвиг по y | Задает смещение тени по оси Y. Положительное значение смещает вниз, отрицательное — вверх. |
| размытие | Задает размытие тени. Чем больше значение — тем более размытой будет тень. Необязательный параметр. Если не задан — тень будет четкой. |
| цвет | Задает цвет тени в любых единицах для цвета. Необязательный параметр. Если не задан — цвет тени совпадает с цветом текста. |
Смещения по осям и размытие задаются в любых единицах для размеров, кроме процентов.
Пример
Давайте сдвинем тень вниз и влево и добавим небольшое размытие:
<div>
Lorem ipsum dolor sit amet.
</div> #elem {
text-shadow: 5px 5px 3px black;
}
:
Пример . Четкая тень
А теперь сделаем тень красного цвета, сдвинем ее вниз и влево, но уберем размытие — тень будет четкой:
<div>
Lorem ipsum dolor sit amet.
</div> #elem {
text-shadow: 10px 10px red;
}
:
Пример . Равномерная тень
Сейчас тень не сдвинута, но к ней добавлено размытие:
<div>
Lorem ipsum dolor sit amet.
</div> #elem {
text-shadow: 0px 0px 3px black;
}
:
Смотрите также
- свойство box-shadow,
которое задает тень контейнеру
Свойство text-shadow | CSS справочник
CSS свойстваОпределение и применение
CSS свойство text-shadow добавляет тень к тексту. Допускается добавление нескольких теней к элементу, для этого необходимо добавить дополнительное значение тени, либо теней, разделенных запятыми. Множественные тени наносятся по z-оси спереди назад (с первой заданной тенью сверху).
Поддержка браузерами
CSS синтаксис:
text-shadow:"h-shadow (горизонтальная тень) v-shadow (вертикальная тень) blur-radius (радиус размытия) color (цвет) | none | initial | inherit";
JavaScript синтаксис:
object.style.textShadow = "5px 5px 5px orange"
Значения свойства
| Значение | Описание |
|---|---|
| none | Тень у элемента отсутствует. Это значение по умолчанию. |
| h-shadow | Обязательное значение. Задаёт расположение горизонтальной тени. Допускается использование отрицательных значений. |
| v-shadow | Обязательное значение. Задаёт расположение вертикальной тени. Допускается использование отрицательных значений. |
| blur-radius | Необязательное значение. Задаёт радиус размытия. По умолчанию значение 0. |
| color | Необязательное значение. Задаёт цвет тени (Имя цвета | HEX | RGB(A) | HSL(A). Значением по умолчанию является черный цвет. |
| initial | Устанавливает свойство в значение по умолчанию. |
| inherit | Указывает, что значение наследуется от родительского элемента. |
Версия CSS
CSS3Наследуется
Да.Анимируемое
Да.Пример использования
Давайте рассмотрим пример добавления текстовой тени к абзацу (элемент <p>):
<!DOCTYPE html>
<html>
<head>
<title>Пример использования свойства text-shadow в CSS</title>
<style>
p {
color: #fff; /* устанавливаем цвет текста белый*/
text-shadow: 1px 1px 4px #000; /* размещаем текстовую тень*/
}
p::selection { /* описание псевдоэлемента, который позволяет стилизовать выделенный пользователем текст */
background-color: orange; /* устанавливаем цвет заднего фона */
text-shadow: 1px 1px 4px #fff; /* размещаем текстовую тень*/
color: #000; /* устанавливаем цвет текста черный */
}
p::-moz-selection { /* описание псевдоэлемента для браузера Firefox (дублируем стили) */
background-color: orange; /* устанавливаем цвет заднего фона */
text-shadow: -1px -1px 4px #fff; /* размещаем текстовую тень*/
color: #000; /* устанавливаем цвет текста черный */
}
</style>
</head>
<body>
<p>Текст с добавленной тенью.</p>
<p>Текст с добавленной тенью.</p>
</body>
</html>
В этом примере мы для всех азацев (элемент <p>) установили цвет текста белый, а для текстовой тени (свойство text-shadow) установили значения для расположения горизонтальной и вертикальной тени равными 1 пиксель, а радиус размытия установили равным 4 пикселям.
Кроме того, с использованием псевдоэлемента ::selection задали следующие стили для всех абзацев при выделении текста пользователем: цвет текста черный, цвет заднего фона оранжевый, значения для расположения горизонтальной и вертикальной тени установили равными -1 пиксель (тень сдвигается в противоположную сторону), а радиус размытия установили равным 4 пикселям.
Результат нашего примера:
Рис. 68 Пример использования свойства text-shadow (текстовая тень).Множественная текстовая тень
Допускается добавление нескольких текстовых теней к элементу, для этого необходимо добавить дополнительное значение тени, либо теней, разделяя их при этом запятыми. Множественные тени наносятся по z-оси спереди назад (с первой заданной тенью сверху).
Пример блока объявлений для множественной тени:
.multipleShadow {
text-shadow: -2px 3px 1px #777, 1px 2px 3px red; /* добавляем множественную тень */
}
Давайте рассмотрим следующий пример:
<!DOCTYPE html>
<html>
<head>
<title>Пример создания множественной текстовой тени</title>
<style>
.test {
text-align: center; /* устанавливаем горизонтальное выравнивание текста по центру */
line-height: 150px; /* задтекст с тенью. Несколько теней текста — учебник CSS
Еще один способ украсить веб-страницу – сделать текст с тенью в CSS. При грамотном применении данного стиля можно удачно выделить заголовок, абзац, часть текста. Вы можете настроить цвет тени, ее смещение и размытие.
Задать в CSS тень текста можно с помощью свойства text-shadow, которое поддерживается всеми браузерами, кроме Internet Explorer версии 9 и ранее. Также есть проблемы с Opera Mini – этот браузер лишь частично поддерживает свойство. Ниже показан пример записи стиля и значений свойства:
h2 {
text-shadow: 3px 5px 6px #6C9;
}
Как видно, мы указали целых четыре значения через пробел. Пройдемся по порядку:
3px– первое значение отвечает за смещение тени по оси X (вправо, влево). Положительным значением тень сдвигается вправо, а отрицательным – влево.5px– второе значение отвечает за смещение тени по оси Y (вниз, вверх). Положительным значением тень сдвигается вниз, а отрицательным – вверх.6px– третье значение отвечает за радиус размытия тени. Этот параметр указывать необязательно. По умолчанию размытие равняется 0 пикселей, что делает тень четкой и неразмытой.#6c9– четвертое значение отвечает за цвет тени. Этот параметр указывать необязательно. По умолчанию цвет тени устанавливается такой же, как у текста, к которому применяется стиль.
Как выглядит тень в браузере (скриншот):
Несколько теней CSS для текста
Также допускается использовать несколько групп значений для свойства text-shadow. Это означает, что вы можете установить несколько теней для одного текста. Для этого нужно записать группы значений через запятую.
Пример:
h2 {
text-shadow: 3px 5px 6px #6C9, -6px -7px 6px #D9FFA7;
}
Результат применения такого стиля виден на скриншоте:
Скриншот: несколько теней для текста CSSС помощью свойства CSS text-shadow можно создавать действительно красивые вещи. Вы можете экспериментировать: устанавливать большое количество различных теней, задавать цвет не только в шестнадцатеричном виде, но и в формате RGBA, используя альфа-канал для настройки прозрачности. Вот что может получиться, если уделить этому свойству достаточное количество внимания:
Скриншот: объемная тень текста в CSSДалее в учебнике: как задать интервалы в CSS между символами, словами и строками.
text-shadow — тень текста | CSS справочник
Поддержка браузерами
| 12.0+ | 10.0+ | 3.5+ | 4.0+ | 9.6+ | 4.0+ |
Описание
CSS свойство text-shadow позволяет добавить одну или более тень для текста. Тень текста не влияет на его размер и расположение.
Для каждой тени можно задать от 2 до 4 параметров. Если добавляется несколько теней, то список параметров для каждой тени указывается через запятую.
Первые два параметра являются обязательными, они определяют сдвиг тени относительно текста: первый параметр указывает смещение по горизонтали, второй по вертикали. Оба параметра могут принимать как положительные, так и отрицательные значения. Положительное значение первого параметра сдвигает тень вправо, отрицательное значение — влево. Положительное значение второго параметра сдвигает тень вниз, отрицательное — вверх.
Примечание: для добавления тени к блоку используйте CSS свойство box-shadow.
| Значение по умолчанию: | нет |
|---|---|
| Применяется: | ко всем элементам, а также к псевдо-элементам ::first-letter и ::first-line |
| Анимируется: | да |
| Наследуется: | да |
| Версия: | CSS3 |
| Синтаксис JavaScript: | object.style.textShadow=»2px 2px #ff0000″ |
Синтаксис
text-shadow: х_тень у_тень размытость цвет|none|inherit;
Значения свойства
| Значение | Описание |
|---|---|
| х_тень | Обязательный параметр. Положение горизонтальной тени. Допустимы отрицательные значения. |
| у_тень | Обязательный параметр. Положение вертикальной тени. Допустимы отрицательные значения. |
| размытость | Уровень размытости тени (указывается в единицах измерения, поддерживающихся CSS). Необязательный параметр. |
| цвет | Цвет тени. Необязательный параметр. |
Пример
#myh2 {
text-shadow: 2px 2px red;
}
text-shadow — Веб-технологии для разработчиков
CSS-свойство text-shadow добавляет тени к тексту. Свойство задаётся разделённым запятыми списком теней, которые будут применены к тексту и к любым его свойствам decorations. Любая тень описывается комбинацией смещений по осям X и Y относительно элемента, радиусом размытия и цветом.
Исходный код этого интерактивного примера размещён в репозитории на GitHub. Если Вы желаете внести вклад в проект интерактивных примеров, пожалуйста создайте клон https://github.com/mdn/interactive-examples и пришлите нам запрос на извлечение (pull request).
Syntax
/* смещение-x | смещение-y | радиус-размытия | цвет */ text-shadow: 1px 1px 2px black; /* цвет | смещение-x | смещение-y | радиус-размытия */ text-shadow: #fc0 1px 0 10px; /* смещение-x | смещение-y | цвет */ text-shadow: 5px 5px #558abb; /* цвет | смещение-x | смещение-y */ text-shadow: white 2px 5px; /* смещение-x | смещение-y /* Используем значения по умолчанию для цвета и радиуса-размытия */ text-shadow: 5px 10px; /* Значения принятые глобально */ text-shadow: inherit; text-shadow: initial; text-shadow: unset;
Это свойство определено как разделённый запятыми список теней.
Каждая тень определена как два или три значения <длина>, за которыми следует необязательное значение <цвет>. Первые два значения <длина> определяют параметры <смещение-x> и <смещение-y>. Третье необязательное значение <длина> задаёт <радиус-размытия>. Значение <цвет> определяет цвет тени.
Если определены больше чем одна тень, тени накладываются друг на друга в порядке обратном порядку их определения, что значит, первая тень окажется поверх последующих.
Это свойство можно применить к псевдо-элементам ::first-line и ::first-letter.
Значения
<цвет>- Необязательный. Цвет тени. Параметр может быть определён как до, так и после значений смещений. Если значение не задано, то его цвет будет определяться браузером пользователя, поэтому, для сохранения согласованности в отображении в браузерах, рекомендуется опредлить значение цвета явно.
<смещение-x> <смещение-y>- Обязательные. Эти величины
<длина>задают расстояние тени от текста.<смещение-x>определяет горизонтальное расстояние; отрицательное значение размещает тень левее от текста.<смещение-y>определяет вертикальное растояние; отрицательное значение размещает тень выше текста. Если оба значения заданы в0, тень будет располагаться прямо за текстом, она может быть видна из-за эффекта<радиус-размытия>. <радиус-размытия>- Необязательный. Это величина
<длина>. Чем больше значение, тем сильнее задаётся размытие; тень становится шире и светлее. Значение по умолчанию0, в случае когда параметр не определён.
Формальный синтаксис
none | <shadow-t>#где
<shadow-t> = [ <length>{2,3} && <color>? ]где
<color> = <rgb()> | <rgba()> | <hsl()> | <hsla()> | <hex-color> | <named-color> | currentcolor | <deprecated-system-color>где
<rgb()> = rgb( <percentage>{3} [ / <alpha-value> ]? ) | rgb( <number>{3} [ / <alpha-value> ]? ) | rgb( <percentage>#{3} , <alpha-value>? ) | rgb( <number>#{3} , <alpha-value>? )
<rgba()> = rgba( <percentage>{3} [ / <alpha-value> ]? ) | rgba( <number>{3} [ / <alpha-value> ]? ) | rgba( <percentage>#{3} , <alpha-value>? ) | rgba( <number>#{3} , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )где
<alpha-value> = <number> | <percentage>
<hue> = <number> | <angle>
Примеры
Простая тень
.red-text-shadow {
text-shadow: red 0 -2px;
}<p>Sed ut perspiciatis unde omnis iste
natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore.</p>Множественные тени
.white-text-with-blue-shadow {
text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
color: white;
font: 1.5em Georgia, serif;
}<p>Sed ut perspiciatis unde omnis iste
natus error sit voluptatem accusantium doloremque laudantium,
totam rem aperiam, eaque ipsa quae ab illo inventore.</p>Спецификации
Совместимость с браузерами
Таблица совместимости на этой странице была сформирована из структурированных данных. Если Вы хотите внести вклад в эти данные, сверьтесь с https://github.com/mdn/browser-compat-data и отправьте нам запрос на извлечение (pull request). Update compatibility data on GitHub| Компьютеры | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome для Android | Firefox для Android | Opera для Android | Safari on iOS | Samsung Internet | |
text-shadow | Chrome Полная поддержка 2 | Edge Полная поддержка 12 | Firefox Полная поддержка 3.5
| IE Полная поддержка 10 | Opera Полная поддержка 9.5
| Safari Полная поддержка 1.1
| WebView Android Полная поддержка 37 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4
| Opera Android Полная поддержка 14 | Safari iOS Полная поддержка 1
| Samsung Internet Android Полная поддержка 1.0 |
Легенда
- Полная поддержка
- Полная поддержка
- Смотрите замечания реализации.
- Смотрите замечания реализации.
Примечание Quantum CSS
- В движке Gecko есть программная ошибка в результате которой метод перехода (
transition) не будет производить переход от элемента со свойствомtext-shadowс заданным цветом к элементу со свойствомtext-shadowбез заданного цвета (баг 726550). Данная ошибка была исправлена в параллельной ветке движка CSS для Firefox (так же известном как Quantum CSS или Stylo, выпуск которого запланирован уже в версии Firefox 57).
Также смотрите
Свойство text-shadow / Хабр
Совсем недавно увидел пост про свойство z-index. Раз пошла такая пьянка, то вставлю и свои пять копеек и расскажу о свойстве text-shadow. Так получилось, что в последнее время мне стали регулярно попадаться сайты, использующие это свойство. Сразу скажу, что под IE любой версии (и IE8 тоже!) читать статью не имеет смысла, так как ослик, к большому сожалению, так и не научился поддерживать свойство, которое было описано еще в 1998 году.Примечание: Так как Хабр не позволяет в статьях использовать собственные стили, то живые примеры можно смотреть на моей странице.
Итак, в CSS имеется свойство text-shadow для добавления тени на каждую букву текста. На данный момент из современных браузер только IE не поддерживает этот стиль. Само свойство было представлено еще в CSS2, но практически не поддерживалось браузерами. Постепенно ситуация стала менятья к лучшему. На данный момент таблица поддержки браузерами выглядит следующим образом
| Safari 3.1 (Mac/Win) | да, но без множественных теней |
| Safari 4 (Mac/Win) | да, полная поддержка |
| Opera 9.5 (Mac/Win/Lin) | да, полная поддержка |
| Firefox 2/3 (Mac/Win/Lin) | нет |
| Firefox 3.1/3.5 (Mac/Win/Lin) | да, полная поддержка |
| Google Chrome 1 (Win) | нет |
| Google Chrome 2 (Win) | да, полная поддержка |
| IE 7/8 (Win) | нет |
| Konqueror (Lin/Mac/Win) | да, полная поддержка |
| Safari on iPhone | да, но без множественных теней |
| Nokia Symbian-Smartphones (Series 60) | да |
| Opera Mini 4.1 | да, но без размытия |
Как видите, последние версии современных браузеров поддерживают text-shadow. Даже мобильные версии браузеров уже понимают это свойство, хотя и с некоторыми ограничениями.
Свойство text-shadow хорошо тем, что позволяет создавать интересные эффекты с текстом без необходимости пользоваться изображениями. А значит текст доступен поисковикам, легок для страницы и т.д.
Самый простой пример использования данного стиля выглядит следующим образом.
h3.shadow
{
text-shadow: 2px 2px 1px red;
}
В этом примере мы добавляем к заголовку 2 уровня красную тень, которая отбрасывается немного вправо и вниз относительно самого текста. В примере использовались параметры для отступов и цвета тени. Существует также возможность сделать тень размытой. Для этого добавляется еще один необязательный параметр после отступов (обратите внимание, что цвет тени должен указываться либо последним, либо первым). Можно использовать отрицательные значения, чтобы изменить направление тени (влево и вверх). Кстати, браузеры на движке WebKit поддерживают цвет в формате rgba, что позволяет использовать полупрозрачность.
h3.blurshadow
{
text-shadow: 0.1em 0.1em 0.2em red;
}
Заголовок с размытой тенью
На основе этого свойства можно добиться интересных эффектов на странице сайта. Например, использование тени позволяет сделать текст более читаемым, если контраст между символами и фоном небольшой. Сравните два варианта белого текста на бледно-голубом фоне.
lightback {background-color: #F0F8FF}
.whitetext {color: white}
.whitetext-shadow {color: white; text-shadow: black 0.1em 0.1em 0.2em}
Если вы посмотрите на пример, то увидите, что первую строчку практически невозможно разглядеть, а текст с тенью на второй строчке хорошо читается.
Многослойные тени
У свойства text-shadow есть одна интересная особенность — вы можете создавать более чем одну тень. На первый взгляд это кажется необычным, но пользователи, работающие с графикой, знакомы с техникой создания объемных букв (вдавленных или выпуклых) при помощи нескольких теней.
Создадим на сером фоне два варинта объемного текста.
.ThreeD
{
background: #CCC;
}
.a
{
color: #D1D1D1;
text-shadow: -1px -1px white, 1px 1px #333;
font-size: 24pt;
}
.b
{
color: #D1D1D1;
text-shadow: 1px 1px white, -1px -1px #333;
font-size: 24pt;
}
Выпуклый текст
Вдавленный текст
Впрочем, нужно быть осторожным в использовании этих эффектов, так как не все браузеры поддерживают несколько теней. Например, Opera поддерживает до шести теней, а Firefox только одну (только первую, а остальные игнорирует).
Контуры
Используя несколько теней, можно добиться и другого эффекта — создание контуров для букв.
p.contur
{
background: #CCF;
padding: 1em;
}
.conturtext
{
font-size: 24pt;
color: #BBE;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
Неоновое свечение
Если создать тень без смещения и размыть ее, то получим эффект неонового свечения.
.neon
{
text-shadow: 0 0 0.2em #87F, 0 0 0.2em #87F, 0 0 0.2em #87F
}
Использование сценариев JavaScript
Также вы можете использовать свойство text-shadow в сценариях JavaScript. Я не уверен, что на Хабре можно использовать сценарии, поэтому примеры можно посмотреть на моей странице.
Подводя итоги
Учитывая тот факт, что IE не поддерживает свойство text-shadow, многие посчитают его недостойным внимания. Но с другой стороны, пользователи IE не получат ошибку при отображении страницы. Они увидят обычный плоский текст, и когда им скажут, что под другим браузером страница выглядит покруче, то может это заставит их задуматься о смене браузера, а разработчиков M$ заставит призадуматься.
Дополнительная информация
В заключение приведу несколько ссылок для дополнительной информации.
Интересный пример, демонстрирующий свойство text-shadow при помощи сценария.
Stylish text with the CSS text-shadow property (несколько примеров, в т.ч. пример огненного текста).
CSS Text-Shadow in Safari, Opera, Firefox and more — несколько интересных примеров.
Text-Shadow Exposed: Make cool and clever text effects with css text-shadow — еще несколько примеров
Несколько примеров на русском
text-shadow — Веб-технологии для разработчиков
CSS-свойство text-shadow Цвет тени к тексту. Свойство задаётся разделённым запятыми списком теней, которые будут применены к тексту и к любым его свойствам украшения . Любая тень описывается комбинацией смещений по осям X и Y относительно элемента, радиусом размытия и цветом.
Исходный код этого интерактивного примера размещён в репозитории на GitHub. Если Вы желаете внести вклад в проект интерактивных примеров, пожалуйста, создайте клон https: // github.com / mdn / interactive-examples и пришлите нам запрос на извлечение (pull request).
Синтаксис
/ * смещение-x | смещение-y | радиус-размытия | цвет * / тень текста: 1px 1px 2px черный; / * цвет | смещение-x | смещение-y | радиус-размытия * / тень текста: # fc0 1px 0 10px; / * смещение-x | смещение-y | цвет * / тень текста: 5px 5px # 558abb; / * цвет | смещение-x | смещение-y * / тень текста: белый 2px 5px; / * смещение-x | смещение-y / * Используем значения по умолчанию для цвета и радиуса-размытия * / тень текста: 5px 10px; / * Значения принятые глобально * / текстовая тень: наследовать; текстовая тень: начальная; тень текста: отключено;
Это свойство определено как разделённый запятыми список теней.
Каждая тень определена как два или три значения <длина> , за это следует необязательное значение <цвет> . Первые два значения <длина> определяют параметры <смещение-x> и <смещение-y> . Третье необязательное значение <длина> задаёт <радиус-размытия> . Значение <цвет> определяет цвет тени.
«Пробная перспектива» в области видимости.
Это свойство можно применить к псевдо-элементм :: первая строка и :: первая буква .
Значения
-
<цвет> - Необязательный. Цвет тени. Параметр может быть определен как до, так и после значений смещений. Если это значение не задано, то его цвет будет определяться браузером пользователя, поэтому для согласованности в отображении в браузерах рекомендуется опредлить значение цвета явно.
-
<смещение-x> <смещение-y> - Обязательные.Эти величины
<длина>задают расстояние тени от текста.<смещение-x>определяет горизонтальное расстояние; отрицательное значение размещает тень левее отательное текст.<смещение-y>определить вертикальное растояние; отрицательное значение размещает тень выше текста. Если оба значения заданы в0, тень будет располагаться прямо за текстом, она может быть видна из-за эффекта<радиус размытия>. -
<радиус-размытия> - Необязательный.Это величина
<длина>. Чем больше значение, тем сильнее задаётся размытие; тень становится шире и светлее. Значение по умолчанию0, в случае когда параметр не установлен.
Формальный синтаксис
нет | <тень-t> #где
<тень-t> = [<длина> {2,3} && <цвет>? ]где
<цвет> =| | | | | <имя-цвета> | текущий цвет | <цвет устаревшей системы> где
= rgb (<процент> {3} [/ ]?) | rgb (<число> {3} [/ <альфа-значение>]?) | rgb (<процент> # {3}, <альфа-значение>?) | rgb (<число> # {3}, <альфа-значение>?)
= rgba (<процент> {3} [/ <альфа-значение>]?) | rgba (<число> {3} [/ <альфа-значение>]?) | rgba (<процент> # {3}, <альфа-значение>?) | rgba (<число> # {3}, ?)
= hsl ( [/ ]?) | hsl (<оттенок>, <процент>, <процент>, <альфа-значение>?)
= hsla (<оттенок> <процент> <процент> [/ <альфа-значение>]?) | hsla (<оттенок>, <процент>, <процент>, <альфа-значение>?) где
<альфа-значение> = <число> | <процент>
<оттенок> = <число> | <угол>
Примеры
Простая тень
.red-text-shadow {
text-shadow: красный 0 -2px;
} Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventory.
Множественные тени
.white-text-with-blue-shadow {
тень текста: 1px 1px 2px черный, 0 0 1em синий, 0 0 0.2em синий;
цвет белый;
шрифт: 1.5em Georgia, с засечками;
} Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, Totam rem aperiam, eaque ipsa quae ab illo inventory.
Спецификации
Совместимость с браузерами
Таблица совместимости на этой странице была сформирована из структурированных данных. Если Вы хотите внести вклад в эти данные, сверьтесь с https://github.com/mdn/browser-compat-data и отправьте нам запрос на извлечение (pull request). Обновите данные о совместимости на GitHub| Компьютеры | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | для Android 9013 Android 9013 Chrome для Android 907 Chrome для Android 907 Chrome для Android 907 Chrome для Android 901 для AndroidOpera для Android | Safari на iOS | Samsung Internet | ||||
text-shadow | Chrome Полная поддержка 2 | Кромка Полная поддержка 12 | Firefox Полная поддержка 3.5
| IE Полная поддержка 10 | Опера Полная поддержка 9,5
| Safari Полная поддержка 1,1
| WebView Android Полная поддержка 37 | Chrome Android Полная поддержка 18 | Firefox Android Полная поддержка 4
| Opera Android Полная поддержка 14 | Safari iOS Полная поддержка 1
| Samsung Internet Android Полная поддержка 1.0 |
Легенда
- Полная поддержка
- Полная поддержка
- Смотрите замечания реализации.
- Смотрите замечания реализации.
Примечание Quantum CSS
- В движке Gecko есть программная ошибка в результате метода перехода (
transition)text-shadowс заданным цветом к элементу со своимtext-shadowбез заданного цвета (баг 726550) . Данная ошибка исправлена в параллельной ветке движка CSS для Firefox (так же известном как Quantum CSS или Stylo, выпуск которого запланирован уже в версии Firefox 57).
Также смотрите
.Свойство text-shadow | Справочник CSS
CSS свойстваОпределение и применение
CSS свойство text-shadow внимание тень к тексту. Допускается добавление нескольких теней к элементу, для этого необходимо добавить дополнительные тени, либо теней, разделенными запятыми. Множественные тени наносятся по z-спереди назад (с первой заданной тенью сверху).
Поддержка браузерами
CSS синтаксис:
text-shadow: "h-shadow (горизонтальная тень) v-shadow (вертикальная тень) blur-radius (радиус размытия) color (цвет) | none | initial | inherit";
синтаксис JavaScript:
объект.style.textShadow = "5px 5px 5px оранжевый"
Значения свойства
| Значение | Описание |
|---|---|
| нет | Тень у элемента отсутствует. Это значение по умолчанию. |
| h-shadow | Обязательное значение. Задаёт расположение горизонтальной тени. Допускается использование отрицательных значений. |
| v-shadow | Обязательное значение. Задаёт расположение вертикальной тени. Допускается использование отрицательных значений. |
| blur-radius | Необязательное значение. Задаёт радиус размытия. По умолчанию значение 0 . |
| цвет | Необязательное значение. Задаёт цвет тени (Имя цвета | HEX | RGB (A) | HSL (A). Значением по умолчанию является черный цвет . |
| начальный | Устанавливается свойство в значение по умолчанию. |
| наследуется | Указывает, что наследуется от родительского элемента. |
Версия УСС
CSS3Наследуется
Да.Анимируемое
Да.Пример использования
Давайте рассмотрим пример добавления текстовой тени к абзацу (элемент
):
Пример использования свойств text-shadow в CSS <стиль> p { цвет: #fff; / * устанавливаем цвет текста белый * / тень текста: 1px 1px 4px # 000; / * размещаем текстовую тень * / } p :: selection {/ * описание псевдоэлемента, который позволяет стилизовать выделенный текст * / цвет фона: оранжевый; / * устанавливаем цвет заднего фона * / тень текста: 1px 1px 4px #fff; / * размещаем текстовую тень * / цвет: # 000; / * устанавливаем цвет текста черный * / } p :: - moz-selection {/ * описание псевдоэлемента для Firefox (дублируем стили) * / цвет фона: оранжевый; / * устанавливаем цвет заднего фона * / тень текста: -1px -1px 4px #fff; / * размещаем текстовую тень * / цвет: # 000; / * устанавливаем цвет текста черный * / }Текст с добавленной тенью.
Текст с добавленной тенью.
В этом примере мы для всех азацев (элемент
) установили цвет текста белый, а для текстовой тени (текст-тень) установили значения для расположения горизонтальной и вертикальной тени равными 1 пиксель , размытия установили равным 4 пикселям .
Кроме того, с использованием псевдоэлемента :: выбор задали следующие стили для всех абзацев при выделении текста: цвет текста черный, цвет заднего фона оранжевый, значения для расположения горизонтальной и вертикальной тени установили равными -1 пиксель (тень сдвигается в противоположную сторону ), а радиус размытия установили равным 4 пикселя .
Результат нашего примера:
Рис. 68 Пример использования свойств text-shadow (текстовая тень).Множественная текстовая тень
Допускается добавление нескольких текстовых теней к у, для этого необходимо добавить дополнительное значение тени, либо теней, разделяя их при этом запятыми. Множественные тени наносятся по оси z спереди назад (с первой заданной тенью сверху).
Пример блока объявлений для множественной тени:
.multipleShadow {
text-shadow: -2px 3px 1px # 777, 1px 2px 3px красный; / * добавляем множественную тень * /
}
Давайте рассмотрим следующий пример:
.Пример создания множественной текстовой тени <стиль> .test { выравнивание текста: центр; / * устанавливаем горизонтальное выравнивание текста по центру * / высота строки: 150 пикселей; / * задаем
Свойство text-shadow / Хабр
Совсем недавно увидел пост про свойство z-index. Раз пошла такая пьянка, то вставлю и свои пять копеек и расскажу о своемстве text-shadow. Так получилось, что в последнее время мне стали регулярно попадаться сайты, использующие это свойство. Сразу скажу, что под IE любой версии (и IE8 тоже!) Читать статью не имеет смысла, так как ослик, к большому сожалению, так и не научился поддерживать свойство, которое было описано еще в 1998 году.Примечание: Так как Хабр не позволяет создать собственные стили, то живые примеры можно смотреть на моей странице.
Итак, в CSS имеется свойство text-shadow для добавления тени на каждую букву текста. На данный момент из современного браузера только IE не поддерживает этот стиль. Само свойство было представлено еще в CSS2, но практически не поддерживалось браузерами. Постепенно ситуация стала менятья к лучшему. На данный момент таблица поддерживает браузерами следующим образом
| Safari 3.1 (Mac / Win) | да, но без множественных теней |
| Safari 4 (Mac / Win) | да, полная поддержка |
| Опера 9.5 (Mac / Win / Lin) | да, полная поддержка |
| Firefox 2/3 (Mac / Win / Lin) | нет |
| Firefox 3.1 / 3.5 (Mac / Win / Lin) | да, полная поддержка |
| Google Chrome 1 (Win) | нет |
| Google Chrome 2 (Win) | да, полная поддержка |
| IE 7/8 (Win) | нет |
| Konqueror (Lin / Mac / Win) | да, полная поддержка |
| Safari на iPhone | да, но без множественных теней |
| Nokia Symbian-смартфоны (Series 60) | да |
| Opera Mini 4.1 | да, но без размытия |
Как видите, последние версии современных браузеров браузер text-shadow . Даже мобильные версии браузеров уже понимают это свойство, хотя и с некоторыми ограничениями.
Свойство text-shadow хорошо тем, что позволяет создавать интересные эффекты с текстом без необходимости пользоваться изображениями. А значит текст доступен поисковикам, легок для страницы и т.д.
Самый простой пример использования данного стиля выглядит следующим образом.
h3.shadow
{
тень текста: 2px 2px 1px красный;
}
В этом примере мы добавляем к заголовку 2 уровня красную тень, которая отбрасывается немного вправо и вниз самого текста. В примере использовались параметры для отступов и цвета тени. Существует также возможность сделать размытую. Для этого добавляется еще один необязательный параметр после отступов (обратите внимание, что цвет должен указываться либо последним, либо первым). Можно использовать отрицательные значения, чтобы изменить направление тени (влево и вверх).Кстати, браузеры на движке WebKit поддерживает цвет в формате rgba, что позволяет использовать полупрозрачность.
h3.blurshadow
{
тень текста: 0,1 мкм 0,1 мкм 0,2 мкм красный;
}
Заголовок с размытой тенью
На основе этого свойства можно создать интересные эффекты на странице сайта. Например, использование тени позволяет сделать текст более читаемым, если контраст между символами и фоном небольшой. Выберите два варианта белого текста на бледно-голубом фоне.
светлый {background-color: # F0F8FF}
.whitetext {color: white}
.whitetext-shadow {цвет: белый; text-shadow: черный 0.1em 0.1em 0.2em}
Если вы посмотрите на пример, то увидеть, что первую строчку невозможно разглядеть, а текст с тенью на второй строчке хорошо читается.
Многослойные тени
У свойств text-shadow есть одна интересная особенность — вы можете создать более чем одну тень. На первый взгляд это кажется необычным, но пользователи, работающие с графикой, знакомы с техникой создания объемных букв (вдавленных или выпуклых) при помощи нескольких теней.
Создадим на сером фоне два варинта объемного текста.
.ThreeD
{
фон: #CCC;
}
.a
{
цвет: # D1D1D1;
text-shadow: -1px -1px белый, 1px 1px # 333;
размер шрифта: 24pt;
}
.b
{
цвет: # D1D1D1;
text-shadow: 1px 1px белый, -1px -1px # 333;
размер шрифта: 24pt;
}
Выпуклый текст
Вдавленный текст
Впрочем, нужно быть осторожным в использовании этих эффектов, так как не все браузеры несколько теней. Например, Opera поддерживает до шести теней, а Firefox только одну (только первую, а остальные игнорирует).
Контуры
Используя несколько теней, можно добиться и другого эффекта — создание контуров для букв.
p.contur
{
фон: #CCF;
отступ: 1em;
}
.conturtext
{
размер шрифта: 24pt;
цвет: #BBE;
text-shadow: -1px 0 черный, 0 1px черный, 1px 0 черный, 0 -1px черный;
}
Неоновое свечение
Если создать тень без объекта и размыть ее, то получим эффект неонового свечения.
.neon
{
тень текста: 0 0 0.2em # 87F, 0 0 0,2em # 87F, 0 0 0,2em # 87F
}
Использование сценариев JavaScript
Также вы можете использовать свойство text-shadow в сценариях JavaScript. Я не уверен, что на Хабре можно использовать сценарии, поэтому можно посмотреть на моей странице.
Подводя итоги
Учитывая тот факт, что IE не поддерживает свойство text-shadow , многие посчитают его недостойным вниманием. Но с другой стороны, пользователи IE не получат ошибку при отображении страницы.Они увидят обычный плоский текст, и когда они заставят их задуматься о смене, а разработчики M $ заставит призадуматься.
Дополнительная информация
В заключение приведу несколько ссылок для дополнительной информации.
Интересный пример, демонстрирующий свойство text-shadow при помощи сценария.
Стильный текст со свойством CSS text-shadow (несколько примеров, в т.ч. пример огненного текста).
CSS Text-Shadow в Safari, Opera, Firefox и др. — несколько интересных примеров.
Text-Shadow Exposed: Создавайте крутые и умные текстовые эффекты с помощью css text-shadow — еще несколько примеров
Несколько примеров на русском.
Текст и тень | htmlbook.ru
Одно время на текст, вызванный тенью, индуцированной способностью и подобным, можно было встретить практически на любом сайте. В графическом редакторе добавляется просто, отлично, вот текст с тенью и пихали на веб-странице независимо от стиля сайта и чувства мерыера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство text-shadow, мода уже прошла и теперь с тенью встречается довольно редко. Впрочем у text-shadow есть ряд других неявных способов применения, которых мало кто подозревает.С помощью этого можно делать контурный текст, «выдавливать» его, создавать свечение, размытие и многое другое.
Использование text-shadow
В качестве значений пишется четыре параметра: цвет тени, смещение по горизонтали и вертикали и радиус размытия тени (рис. 1).
Рис. 1. Параметры text-shadow
Цвета писать в начале или в конце всех параметров в любом подходящем формате CSS. Так что можно сделать и полупрозрачную тень через формат rgba.Положительные значения с ущерба «отбрасывают» тень вправо и вниз, а отрицательные, соответственно, влево и вверх. Чтобы тень была вокруг текста, достаточно задать нулевые значения с ущерба. Радиус размытия устанавливает, насколько будет резкой. Чем больше размытия, тем мягче выглядит тень.
Большим плюсом text-shadow позволяет добавить сразу несколько разных теней, перечисляя их параметры через запятую. Эта особенность, в основном, и позволяет делать разные эффекты.
К сожалению, IE до версии 10.0 не поддерживает text-shadow, так что в этом браузере никаких красивостей не увидим.
Контурный текст
Контурный текст характерен, что каждая буква обводится линией, цвет которой отличается от цвета текста (рис. 2). Лучше всего этот эффект смотрится с рубленым шрифтом большого размера, например, заголовков. Для основного текста применение контура лишь ухудшает читабельность.
Рис. 2. Контурный текст
Контур можно создать двумя методами.В первом методе устанавливаем нулевое смещение тени и небольшой радиус её размытия, непосредственно, 1-2 пиксела (пример 1). Повышение значения размытия превращает контур в свечение вокруг текста, а это уже другой эффект.
Пример 1. Контурный текст
HTML5CSS3IE 9IE 10 + CrOpSaFx
Текст
<стиль>
.инсульт {
шрифт: 2em Arial, без засечек;
text-shadow: красный 0 0 2px;
}
Контурный текст
Контур, сделанный этим методом, использован на рис.1. Контур слегка размытым, специально для тех, кто хочет получить чёткую линию, предназначенную второй метод. Он заключается в использовании четырёх резких теней одного цвета, они смещаются в разные углы на один пиксел (пример 2).
Пример 2. Четыре тени для контура
HTML5CSS3IE 9IE 10 + CrOpSaFx
Текст
<стиль>
.инсульт {
шрифт: 2em Arial, без засечек;
text-shadow: красный 1px 1px 0, красный -1px -1px 0,
красный -1px 1px 0, красный 1px -1px 0;
}
Контурный текст
Вид такой контура показан на рис.3. Заметно, что контур получается более выразительным.
Рис. 3. Контур с помощью четырёх теней
Трёхмерный текст
Для добавления эффекта трёхмерного текста показанного на рис. 4 имеют одновременно несколько теней, которые смещены относительно друг друга на один пиксел по горизонтали и вертикали.
Рис. 4. Трёхмерный текст
Лично мне подобный текст напоминает надписи в стиле ретро и опять же лучше всего он подходит для заголовков, а не для основного текста веб-страницы.
Число теней зависит от того, насколько вы хотите «выдвинуть» текст вперёд. Большее количество повышает «глубину» букв, меньшее, наоборот, понижает трёхмерность. В программе 3 используется пять теней одного цвета.
Пример 3. Тень для добавления трёхмерности
HTML5CSS3IE 9IE 10 + CrOpSaFx
Текст
<стиль>
.инсульт {
шрифт: жирный 3em Arial, без засечек;
цвет: # 0d3967;
текст-тень: # cad5e2 1px 1px 0, # cad5e2 2px 2px 0,
# cad5e2 3px 3px 0, # cad5e2 4px 4px 0,
# cad5e2 5px 5px 0;
}
Десятикамерный холодильник
Для всех теней ставим нулевой радиус размытия и одинаковый цвет.Различаются тени только значениями с ущерба.
Тиснение текста
Для создания эффекта тиснения текста или, по-другому, рельефа, цвет текста должен совпадать с цветом фона. Одна часть «выступающих» над поверхностью букв освещена, другая часть находится в тени (рис. 5).
Рис. 5. Рельефный текст
Для добавления подобного эффекта нам понадобится тени — белую тень мы смещаем влево вверх на один пиксел, а тёмно-серую вправо вниз (пример 4).
Пример 4. Рельефный текст
HTML5CSS3IE 9IE 10 + CrOpSaFx
Текст
<стиль>
body {
фон: # f0f0f0; / * Цвет фона веб-страницы * /
}
.инсульт {
шрифт: жирный 3em Arial, без засечек;
цвет: # f0f0f0; / * Цвет текста, совпадает с цветом фона * /
тень текста: #fff -1px -1px 0,
# 333 1px 1px 0;
}
Рельефный текст
Рельеф выигрышнее всего смотрится именно на сером фоне, поэтому эффект подойдёт не для каждой цветовой схемы сайта.Кстати, легко получить вдавленный, а не выдавленный текст, достаточно поменять местами цвета тени.
тень текста: # 333 -1px -1px 0,
#fff 1px 1px 0; Свечение
Свечение вокруг текста — это та же самая тень, только она яркая и контрастная. Таким образом, для создания эффекта свечения изменить цвет тени и поставить желаемый радиус размытия. Временное свечение вокруг текста должно быть равномерным, то смещение тени надо задать нулевым.На рис. 6 показан пример свечения разных цветов.
Рис. 6. Свечение текста
Пример 5. Свечение
HTML5CSS3IE 9IE 10 + CrOpSaFx
Текст
<стиль>
.свет {
тень текста: # 5dc8e5 0 0 10px; / * Свечение голубого цвета * /
цвет: # 0083bd;
}
.темно {
тень текста: красный 0 0 10 пикселей; / * Свечение красного цвета * /
}
Светлая сторона
Тёмная сторона
Размытие
Тень сама по себе размывается, так что если оставить только тень, а сам текст скрыть, то мы получим размытые буквы (рис.7), причём степень размытия легко регулировать через параметр text-shadow.
Рис. 7. Текст с размытием
Для сокрытия оригинального текста достаточно задать цвет как прозрачный (пример 6). Цвет размывает эту размытость букв.
Пример 6. Размытие текста
HTML5CSS3IE 9IE 10 + CrOpSaFx
Текст
<стиль>
.blur {
тень текста: # 000 0 0 5px;
цвет: прозрачный; / * Прозрачный цвет текста * /
}
Нерезкий текст
Тень и псевдоклассы
Тень не обязательно добавляется непосредственно к тексту, свойство text-shadow прекрасно сочетается с псевдоклассами: hover и: first-letter. За счёт этого получаются интересные эффекты с текстом вроде контурной первой буквы абзаца или свечения ссылки при наведении на ней курсора мыши.В примере 7 показаны такие приёмы.
Пример 7. Использование псевдоклассов
.HTML5CSS3IE 9IE 10 + CrOpSaFx
Текст
<стиль>
a: hover {/ * Вид ссылки при наведении на ее курсора * /
тень текста: # 5dc8e5 0 0 5px;
цвет: # 000;
}
p: первая буква {/ * Первая буква абзаца * /
размер шрифта: 2em;
text-shadow: красный 1px 1px 0, красный -1px -1px 0,
красный -1px 1px 0, красный 1px -1px 0;
}
Нишевый проект тормозит традиционный канал , не считаясь с
затратами. Структура рынка, отбрасывая подробности, стабилизирует
департамент маркетинга и продаж, используя опыт предыдущих кампаний.
Построение бренда, безусловно, спонтанно отталкивает конвергентный
PR, отвоевывая рыночный сегмент. Инвестиция синхронизирует ролевой
социальный статус, повышая конкуренция. Торговая марка естественно
обуславливает план размещения, используя опыт предыдущих кампаний.
.