text-shadow
Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия. Свойство text-shadow может работать совместно с псевдоэлементами :first-letter и :first-line .
Синтаксис
none Отменяет добавление тени. цвет Цвет тени в любом доступном CSS формате. По умолчанию цвет тени совпадает с цветом текста. Необязательный параметр. сдвиг по x Смещение тени по горизонтали относительно текста. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр. сдвиг по y Смещение тени по вертикали относительно текста. Также допустимо использовать отрицательное значение, которое поднимает тень выше текста. Обязательный параметр. радиус Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0. Учтите, что алгоритм сглаживания в браузерах обычно разный, поэтому вид тени может несколько различаться в зависимости от заданных параметров сглаживания.
Допускается указывать несколько параметров тени, разделяя их между собой запятой. В CSS3 учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке — в самом низу. В CSS2 порядок наоборот: первая тень размещается в самом низу, а последняя на самом верху.
HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx
text-shadow
Результат примера показан на рис. 1.
Рис. 1. Вид тени в браузере Safari
Браузеры
Opera поддерживает максимум 6–9 параметров тени. Повышение этого значения, а также увеличение радиуса размытия свыше 100px сказывается на производительности браузера. Opera версии 9.5–10 использует отображение нескольких теней, как в CSS2.
Safari до версии 4.0 поддерживает только один параметр тени, остальные игнорируются. С версии 4.0 работает уже множество теней.
Браузер Internet Explorer понимает свойство text-shadow только с версии 10.0. Взамен используется свойство filter : Shadow(параметры) . К примеру, следующая конструкция задает цвет тени (#666666), её направление (45° от вертикали) и величину смещения (4 пиксела).
filter: Shadow(Color=#666666, Direction=45, Strength=4);
Как добавить тень к тексту в css
Свойство text-shadow добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия.
Свойство text-shadow может работать совместно с псевдоэлементами ::first-letter и ::first-line .
Синтаксис¶
Значения¶
Допускается указывать несколько параметров тени, разделяя их между собой запятой. В CSS3 учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке — в самом низу.
Примечания¶
Браузер Internet Explorer понимает свойство text-shadow только с версии 10. До этого используется свойство filter: Shadow(параметры) . К примеру, следующая конструкция задает цвет тени (#666666), её направление (45° от вертикали) и величину смещения (4 пикселя).
text-shadow
CSS-свойство text-shadow добавляет тени к тексту. Свойство задаётся разделённым запятыми списком теней, которые будут применены к тексту и к любым его свойствам decorations . Любая тень описывается комбинацией смещений по осям X и Y относительно элемента, радиусом размытия и цветом.
Исходный код этого интерактивного примера размещён в репозитории на GitHub. Если вы желаете внести вклад в проект интерактивных примеров, пожалуйста создайте клон https://github.com/mdn/interactive-examples и пришлите нам запрос на извлечение (pull request).
Syntax
Это свойство определено как разделённый запятыми список теней.
Каждая тень определена как два или три значения , за которыми следует необязательное значение . Первые два значения определяют параметры и . Третье необязательное значение задаёт . Значение определяет цвет тени.
Если определены больше чем одна тень, тени накладываются друг на друга в порядке обратном порядку их определения, что значит, первая тень окажется поверх последующих.
Тень текста CSS — примеры использования
У вас раньше появлялось неприятное чувство, когда ваши подписи плохо походили к цветам кнопок, панелей, или просто текст слабо контрастировал с фоном страницы?
С помощью CSS тени эту проблему легко решить, используя свойство text-shadow , чтобы улучшить читабельность и контрастность текста.
В приведенных примерах, мы используем тени текста в различных ситуациях, что даст вам необходимую базу, чтобы дальше вы смогли самостоятельно изучить данный вопрос.
Базовая настройка
Создайте новый HTML-файл и добавьте в него следующий код HTML и CSS :
В раздел HTML добавьте тег с классом text :
Для этого элемента мы будем добавлять тень текста CSS .
Я задал для этого элемента начальные свойства, чтобы он красиво выглядел на экране:
Теперь давайте зададим для текста атрибут text-shadow .
Но сначала разберемся, какие значения принимает этот атрибут:
- 4px – смещение по оси X ( горизонтальное );
- 3px – смещение по оси Y ( вертикальное );
- 2px – значение размытия;
- #ccc – цвет.
Это задается следующим образом:
где цвет может быть представлен шестнадцатеричным кодом #ccc или RGBA ( 0,0,0,0.3 );.
В CSS мы можем применить к нашему тексту внутреннюю тень CSS следующим образом:
Представление в браузере этого текста с тенью будет выглядеть так:
Вариации
Дальше мы будем по-разному изменять цвет фона элемента body . Делаем мы это потому, что для некоторых теней CSS нужен определенный фон, иначе они не будут заметны.
Чтобы текст смотрелся красивее, мы зададим его в верхнем регистре.
Эффект оттиска
Установите для цвета текста немного более темный оттенок, чем фон.
Затем примените небольшую белую тень текста с уменьшенной непрозрачностью:
Используя код RGBA , вы можете установить непрозрачность цвета. Обратите внимание на то, что цвет текста имеет непрозрачность 60% ( 0.6 ), а тени div CSS 10% ( 0.1 ).
CSS3. Работа с тенями. Часть 2
Продолжаем погружаться в искусство владения тенями в новых модулях CSS3. Прошлый раз мы рассматривали работу с box-shadow, сегодня мы перейдем к text-shadow.
Напомню, что оба правила, хотя и описаны в разных модулях, работают практически идентичным образом, поэтому, если вы уже знакомы с box-shadow по первой части, в этой, второй, части вы увидите много знакомого. И, прежде, чем переходить непосредственно к примерам, давайте сразу разберемся, какие есть различия, чтобы не останавливаться на них далее.
text-shadow vs box-shadow
Если вы вернетесь к разделу про синтаксис box-shadow в первой части, вы найдете такое описание:
Где последнее разворачивается в полном виде в такую конструкцию:
Спецификация CSS3 Text, описывая text-shadow, говорит буквально следующее:
В переводе на русский это означает, что для текста невозможны внутренние тени (inset) и синтаксис для text-shadow выглядит следующим образом:
Аналогично box-shadow возможны множественные тени накладываемые поверх друг друга так, что первая тень оказывается наверху. Теперь давайте смотреть, как это все работает.
text-shadow
Сдвиги и цвет
Начнем со сдвигов и работы с цветом. За сдвиги тени отвечают первые два линейных параметра, указывающих длинну (1.1–1.4):
Если вы указываете положительные значения, тень сдвигается влево и вниз (1.1):
Отрицательные значения сдвигают вправо и вверх (1.2):
Аналогично box-shadow, все браузеры, кроме основанных на webkit, если цвет тени явно не задан, берут его из цвета текста (1.1–1.2). Это может быть полезным, например, если вы хотите автоматически делать тень цвета текста, но, например, размытой (см. примеры 2.3 и 2.4). Для явного задания цвета тени достаточно прописать нужное значение в правиле:
Обратите внимание, что при указании цвета полностью применимы возможности CSS3 Color, включая указание уровня прозрачности цвета (alpha) через rgba или hsla.
Размытие
Третий линейный параметр описывает радиус размытия тени (2.1–2.4):
В полном согласии с определением box-shadow, размытие задается некоторым положительным числом — радиусом размытия. Само размытие может осуществляться UA по любому алгоритму с большой точностью аналогичному размытию по Гауссу с половинным радиусом относительно границы тени.
В первых двух примерах (2.1 и 2.2) задан разный радиус размытия:
Во второй паре примеров (2.3 и 2.4) различается только цвет текста и фона, а сами правила задания тени описаны через применяемый к блокам класс blured-shadow:
(Этот пример некорректно работает в Chrome из-за описанных выше нюансов, впрочем спецификация говорит, что пропущенный цвет остается на усмотрение UA.)
Растяжение и сжатие
Четвертый линейный параметр, если он присутствует, отвечает за растяжение или сжатие тени.
Для увеличения тени spray-distance должен быть положительным (3.1):
Для уменьшения — отрицательным (3.2):
Если отступ тени нулевой, ее можно использовать для обводки текста (3.3):
Важная деталь. Насколько мне известно, в настоящий момент (сюрприз!) параметр spray-distance для text-shadow поддерживается только в Internet Explorer 10, а остальные браузеры его не поддерживают (см. например, bug 655590 «[css3-text] Support the spread radius in text-shadow» в Mozilla Bug tracker). Это же верно и в отношении большинства учебников и статей в интернете, которые своевременно не были обновлены вслед за изменениями в спецификации. Поэтому в большинстве примеров, которые вы найдете в сети, вы даже не увидите упоминания возможности растяжения или сжатия тени текста ��
И еще одна важная деталь. Наличие четвертого параметра сегодня трактуется неподдерживающими его браузерами как неправильное задание тени — в результате эти правила просто игнорируются. Поэтому для обеспечения хоть какого-то уровня совместимости, если вы используете spread-distance, необходимо дублировать правила, например, так:
Если вы все же хотите смоделировать увеличение тени, в определенных пределах это можно сделать через множественные тени, рассматриваемые в следующем разделе (см. примеры 4.6 и 4.7).
Множественные тени
Наконец, аналогично теням для блоков, к тексту также можно применять несколько теней одновременно, добиваясь при этом различных эффектов (4.1–4.5):
Начиная с простейшей дублированной обводки (4.1):
И возможности смещения теней в разные стороны (4.2):
Продолжая эффектами типа неона (4.3):
И немного более изощренным вариантом (4.4)
Или же с ограниченным использованием предыдущего приема перекрытия смещенных теней — небольшое подчеркивание (4.5):
Эмуляция растяжения
Как было сказано в предыдущем разделе, технически множественные тени можно применять для эмулирования увеличения тени. Например, чтобы сделать что-то похожее на (4.6):
Можно было бы применить одновременно несколько теней, сдвинутых в разных направлениях (4.7):
Однако, если приглядеться, между ними заметна разница. Также важно понимать, что такой прием ограничен в применимости: он не только менее точен, но и отрицательно сказывается на производительности отрисовки страницы.
Интересные примеры
Теперь давайте рассмотрим еще несколько примеров использования теней для реализации различных интересных эффектов.
Начнем с классической радуги (5.1):
Двойная тень для стрелки (5.2):
Традиционная огненная тень (5.3):
Традиционный «letter-press», — здесь также важен контраст с фоном (5.4):
Не менее традиционный 3d-text (5.5):
Двойная тень для винтажного эффекта (5.6)
Проступающая надпись с прозрачным текстом и сжатой тенью, — также зависит от размера и гарнитуры шрифта (5.7)
Применение отдельной буквы для псевдо-класса ::first-letter (5.8)
Интерактив
Если вы хотите просто поиграться с тенями в интерактивном режиме, наши коллеги к прошедшей в сентябре конференции Build подготовили демонстрационную страницу: «Hands-on: text-shadow».
Internet Exlorer
text-shadow поддерживается в IE10+.
И повторю свой совет относительно использования фильтров: не используйте фильтры вообще, либо продумывайте верстку и стили так, чтобы для IE9+ они не применялись. Стандартные css-эффекты в IE в отличие от старых фильтров, начиная с 9й версии, работают с использованием аппаратного ускорения, к тому же фильтры часто оказываются несочетаемыми с новыми правилами свойствами CSS и их одновременное использование может приводить к неожиданным последствиям.
Похожие публикации:
- Как обращаться по id в css
- Как округлить рамку в css
- Почему появляется горизонтальный скролл css
- Сколько стоит earphones 2 basic
Как добавить тень текста с помощью CSS
Узнайте, как добавить тень текста и создать эффект неонового света с помощью CSS, чтобы сделать ваш сайт более привлекательным!
Алексей Кодов
Автор статьи
2 июня 2023 в 11:28
Тени текста могут улучшить внешний вид текста на вашем веб-сайте, добавив глубину и контраст. В этой статье мы научимся добавлять тень текста с помощью CSS.
CSS свойство text-shadow
Свойство text-shadow позволяет добавить тень к тексту. Оно принимает 3 параметра: горизонтальное смещение, вертикальное смещение и радиус размытия тени. Опционально, можно также указать цвет тени.
Пример использования text-shadow :
В этом примере мы добавляем тень к тексту в элементе h1 . Тень будет смещена на 2 пикселя вправо и на 2 пикселя вниз, с радиусом размытия тени 5 пикселей и полупрозрачным черным цветом.
Веб-разработчик: новая работа через 9 месяцев
Получится, даже если у вас нет опыта в IT
Эффект неонового света
Тени текста можно использовать для создания разных эффектов, например, эффекта неонового света. Для этого используйте следующий код:
.neon-text
В этом примере мы создаем текст с эффектом неонового света синего цвета. Тени имеют разные радиусы и смещения, что создает иллюзию свечения.
�� Экспериментируйте с параметрами text-shadow , чтобы создать разнообразные эффекты теней и сделать ваш текст более привлекательным для пользователей.
Не забывайте, что CSS свойство text-shadow поддерживается практически всеми современными браузерами, но всегда стоит проверить на совместимость, чтобы не столкнуться с проблемами на старых версиях браузеров.
Надеюсь, эта статья помогла вам разобраться в добавлении теней к тексту с помощью CSS. Удачи в вашем пути изучения веб-разработки! ��
Как добавить тень к тексту в css
Для добавления тени к тексту можно воспользоваться CSS свойством text-shadow .
Тень описывается её смещением по осям X и Y относительно текста, радиусом размытия и цветом.
Рассмотрим на конкретном примере: предположим, у нас на странице есть заголовок первого уровня, для которого заданы следующие CSS свойства:
h1 text-shadow: 3px -4px 5px red; > В результате у заголовка мы получим тень красного цвета, которая относительно текста будет смещена по оси X на 3 пикселя вправо (так как значение положительно), по оси Y на 4 пикселя вверх (так как значение отрицательно), а радиус размытия тени будет составлять 5 пикселей.