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


Оглавление (нажмите, чтобы открыть):

text-shadow

Свойство CSS text-shadow используется для добавления теней к тексту HTML-элемента. Но надо четко понимать, что наличие или отсутствие тени у текста никак не влияет на размер самого элемента, хотя она и может распространяться за пределы его границ. Кроме этого, свойство text-shadow допускается применять к псевдоэлементам ::first-line и ::first-letter.

Тип свойства

Применяется: ко всем элементам.

Значения

Значением свойства text-shadow является ключевое слово none либо указание через пробелы параметров тени текста: ее цвет и от двух до трех параметров в единицах измерения принятых в CSS отвечающих за смещение и размытие тени.

  • none — отсутствие тени у элемента.
  • Параметры тени:
    1. Горизонтальное смещение — первый (обязательный) числовой параметр, который отвечает за смещение тени по горизонтали. Положительная величина смещает тень вправо, а отрицательная — влево.
    2. Вертикальное смещение — второй (обязательный) числовой параметр, который отвечает за смещение тени по вертикали. Положительная величина смещает тень вниз, а отрицательная — вверх.
    3. Размытие — третий (необязательный) числовой параметр, отвечающий за радиус размытия тени, вроде фильтра Гаусса. Если не указан, то размытие равно нулю. Отрицательные значения недопустимы.
    4. Цвет — необязательный параметр. Указание цвета тени в любом доступном в CSS формате — имя цвета, шестнадцатеричное значение перед которым ставится знак решетки (#) либо десятичный формат RGB или RGBA (A — это прозрачность цвета, которая может меняться от 0 до 1, например 0.5). Если цвет тени не указан, то он совпадает с цветом текста элемента (свойство color).

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

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

Свойство text-shadow задает эффект тени тексту элемента. При этом размер элемента не меняется (несмотря на то что тень может быть расположена далеко за пределами элемента).

Значения свойства задают смещение тени, ее радиус и цвет: [цвет] [смещение тени по оси X] [смещение тени по оси Y] [радиус тени] или
[смещение тени по оси X] [смещение тени по оси Y] [радиус тени] [цвет]. Порядок значений строго определен.

Смещение тени задается относительно верхнего левого угла текста. Положительные значения смещения сдвигают тень вправо и вниз, отрицательные влево и вверх.

Цвет тени — необязательный параметр, если он не задан, цвет тени за основу будет взят цвет текста (color), к которому применено свойство text-shadow.

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

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

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

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

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

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

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

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

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

На странице преобразуется в следующее

Пример №2. Фиксированная или жесткая тень у текста в html

Ниже представлены два примера. Тень в обоих случаях одинаковая (фиксированная), т.е. без размытия. Обратите внимание, какой эффект создается, если текст будет на черном фоне.

На странице преобразуется в следующее

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

На странице преобразуется в следующее

Пример №4. Вдавленные буквы у текста в html

На странице преобразуется в следующее

Мастер Йода рекомендует:  Говорят и показывают сеньоры обучение Junior Data Scientist

Пример №5. Вдавленные буквы у текста в html

На странице преобразуется в следующее

Для обращения к margin из JavaScript нужно писать следующую конструкцию:

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

Пример

Подробнее примеры ниже.

Определение и использование

Свойство text-shadow добавляет тень к тексту.

Это свойство принимает разделенный запятыми список теней, которые будут применены к тексту.

Значение по умолчанию: none
Inherited: yes
Animatable: yes. Читайте о animatable
Version: CSS3
Синтаксис JavaScript: object.style.textShadow=»2px 5px 5px red»

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Свойство
text-shadow 4.0 10.0 3.5 4.0 9.6

Синтаксис CSS

Примечание: Чтобы добавить в текст более одной тени, добавьте список теней с разделителями-запятыми.

Значения свойств

Значение Описание
h-shadow Обязательно. Положение горизонтальной тени. Допустимы отрицательные значения
v-shadow Обязательно. Положение вертикальной тени. Допустимы отрицательные значения
blur-radius Дополнительные. Радиус размытия. Значение по умолчанию — 0
color Дополнительные. Цвет тени. Посмотрите на значения цвета CSS для полного списка возможных значений цвета
none Значение по умолчанию. Без тени
initial Присваивает этому свойству значение по умолчанию. Читайте о initial
inherit Наследует это свойство из родительского элемента. Читайте о inherit

Другие примеры

Пример

Text-тень с эффектом размытия:

Пример

Текст-тень на белом тексте:

Пример

Текст-тень с красным неоновым свечением:

Пример

Текст-тень с красным и синим неоновым свечением:

Text Shadow CSS Generator

Preview color:

Text:
Background:

Effect Gallery

Pick a predefined style from the gallery or generate a text shadow with your preferences. Set up the desired attributes to get the CSS code.

Shift the shadow right/down, set the blur and opacity and pick a color from the palette to get your CSS. Use the online editor to adjust your style manually. Follow the evolution of your shadow in the live preview where you can set a custom text and background color.

Just like the box shadow generator, this tool also allows you to add multiple shadows to your design with the Add new button. Create amazing projections define an unlimited list of dark areas or shapes produced by a body coming between rays of light and a surface. Check out the effect gallery for inspiration and to see how they’re built. Click one of them to populate the editor and to adjust their design. Picking an item from the gallery will erase your current work progress without any warning.

Please note that the last five items in the gallery (Blurry, Emboss, Press, Carve, Ghost) can’t be adjusted once the’re loaded to preview because they use alpha channel colors and other attributes not supported by this website. For example the «Ghost» design has a completely transparent text color and all the visible and readable part is composed of shadows. Another item, called «Carved» is also transparent, and is using the background-clip: text which shows the background only where the text is.

Pro Developer`s Tip: Migrate your web app development/designing environment into the cloud with high performance citrix vdi from CloudDesktopOnline and experience the easy remote access to your essential web development tools from anywhere on any device(PC/Mac/android/iOS). Learn more about MS Azure and managed azure services by visiting one of the leading cloud hosting solutions providers – Apps4Rent.

Color Picker

Mix RGB, HSV, CMYK colors,
or pick one by name.

Gradient Generator

Pick the colors and
set the gradient type.

Box Transform

Scale, rotate, translate and skew
elements with CSS.

Border Radius

Enter the four corners
to get the styles.

12 эффектов для текста с использованием теней CSS

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

Основы использования теней

Свойство text-shadow очень просто использовать. Оно поддерживается всеми современными браузерами и даже без использования префиксов. Но поддержка в IE (даже в IE9) отсутствует. Можно использовать инструменты, например, Modernizr, которые помогут вытянуть эффекты CSS3 даже в старых версиях IE.

Синтаксис

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

Ниже приводится пример тени текста, которая смещена на два пикселя вниз и на четыре пикселя вправо, размыта на три пикселя и имеет черный цвет с уровнем непрозрачности 30%.

Результат использования данного свойства будет выглядеть следующим образом:

Почему используется rgba?

Вам не обязательно использовать rgba для задания цвета тени при определении свойства. Однако, rgba добавляет еще одну размерность при определении тени — уровень прозрачности.

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

Мастер Йода рекомендует:  JavaScript-библиотеки для создания потрясающей анимации Javascript

Вдавленный текст

С помощью свойства text-shadow можно создавать различные эффекты для текста, не ограничиваясь простыми падающими тенями. Например, здесь приводится код для формирования иллюзии вдавленного текста.

Сначала нужно установить цвет текста немного темнее, чем цвет фона. А затем надо использовать свойство text-shadow с белым цветом и увеличенной прозрачностью.

Цвет фона #222, а цвет текста имеет уровень непрозрачности 60%. Белая тень позиционируется немного вниз и вправо с уровнем непрозрачности 10%.

Четкая тень

Совсем необязательно размывать тень. Четкая тень может отлично сочетаться с дизайном сайта.

Двойная тень


Настоящее веселье начинается, когда вы отринете прочь ограничение наличия только одной тени. Используя запятую для разделения определений вы можете использовать столько теней, сколько нужно!

Вот пример использования двух теней. Первая имеет тот же цвет, что и фон.

Смещение вниз на большое расстояние

Как только вы освоите использование нескольких теней, результат будет все более и более выразительным. Очень просто создать 3D эффект для текста.

В примере используется четыре тени, все смещены вниз на разные дистанции и размыты.

Смещение вниз на небольшое расстояние и сильное размытие

Вот другое воплощение той же идеи. Три тени смещены на меньшее расстояние и сильнее размыты.

3D текст от Mark Dotto

Эффект используется на сайте MarkDotto.com. В нем используется 12 различных теней для создания отличного эффекта 3D.

Вдавленный текст от Gordon Hall

Notice in the example above I called my technique the “quick and dirty” letterpress effect. That’s because there’s a much more involved way to create some seriously inset text that’s much more believable.

Gordon uses some serious CSS voodoo to pull off not only an outer shadow but a genuine inner shadow as well. Check out his blog post for a full explanation of the technique.

12 примеров text-shadow

Типографика — моя любимая игрушка, если дело доходит до веб-дизайна. Еще бы, с ее помощью можно привлечь внимание человека, всего лишь немного изменив начертание или кегль шрифта. Очень просто и очень эффективно, на эту тему написано очень много книг и сломано немало копий в спорах. Сегодня я не буду давать советов по типографике в целом — у меня не хватит квалификации, а вот как оформить текст вашего сайта — это всегда пожалуйста. Итак, сегодня я покажу несколько вариатов использования свойства CSS3 text-shadow, очень простого, но в умелых руках оно может творить чудеса.

Базовый синтаксис text-shadow

Это свойство CSS3 работает во всех свежих браузерах, без вендорных префиксов, типа -moz и -webkit. Даже IE можно научить понимать это свойство, нужно использовать Modernizr или аналоги.

Вот и весь базовый синтаксис. Первое значение — смещение по горизонтали, второе — по вертикали, размытие тени и цвет тени. Рассмотрим пример:

Сместили тень, размыли на 3 пиксела и назначили черный цвет с прозрачностью в 30%. Почему я использую альфа-канал или прозрачность? Это дает больше свободы в действиях, можно сделать чуть светлее или темнее просто поменяв значение прозрачности, не мучаясь с подбором цвета. Достаточно быстро получается, рекомендую.

Вдавленные буквы

Принцип работы тут такой — фон чуть светлее букв, светлая тень с небольшой прозрачностью. Результат на картинке, пробуйте.

Жесткая тень

Сейчас в моде ретро-стиль, а там как раз используется тень без размытия. Ну что ж, мы готовы к этому

Двойная тень

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

Вниз и подальше

Текст объёмный и как бы висит над фоном, не так ли? Тут использованы 4 тени с различным уровнем размытия и расположения. Вообще, чем больше используется теней, тем реалистичнее эффект, учитывайте это в своих проектах.

Небольшой 3D текст

Аналогично предыдущему примеру, три тени, но расположены ближе, отсюда эффект трехмерности и весомости текста.

3D текст от Mark Dotto

Наткнулся в сети на работу этого дизайнера и никак не мог пройти мимо. Впечатляющая реалистичность.

Вдавленный текст от Gordon Hall

Еще один пример впечатляющей работы со свойством text-shadow. Но принцип такой же, как я говорил выше. Чуть светлее фон, светлая тень ниже букв и темная выше. Сделано просто, но очень круто.

Сияние текста

Тут тоже все просто — тень не смещаем, размываем посильнее и делаем ее белой. Вот и все сияние.

Ретро-стиль

Я выше говорил про ретро-стиль, это из этой же оперы. Сейчас так модно, множественные четкие тени. Применять на свое усмотрение

Несколько источников света

Тут эффект множественных источников света, которые дают тени во все стороны.

Выпуклый текст

Вдавленный текст уже был, теперь выпуклый. Достаточно простой эффект, но очень красиво смотрится в заголовках, например. Пользуйтесь, пробуйте

В заключение хочу сказать — свойство CSS3 text-shadow очень простое, как вы могли уже убедиться. Но грамотное его применение, а еще с небольшой фантазией, может творить чудеса.
Экспериментируйте, удачного вам дня

Похожие записи

В веб-дизайне частичная прозрачность также применяется и достигается за счёт формата цвета RGBA, который задаётся только для фона элемента

Здорово
Так держать! : )

Интересно а это крассбраузерный вариант?:)

Мастер Йода рекомендует:  Значение поля по умолчанию в HTML

Подставляйте вендорные префиксы, где требуется и вполне кроссбраузерно

Прекрасные примеры и руководство к действию!

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

Очень может быть. Можем сравнить закладки

ЮХ ТЭ. Да-с раньше на это свойство я внимания как то не обращал, хотя слышать приходилось. Думал что эффект от него будет мизерный, но то что сейчас увидел просто потрясло. Спасибо за статью!

Если в итоге покажете, что у вас получилось — буду благодарен

Спасибо!! Давно искала нечто подобное. Пошла пробовать!

Свойство text-shadow

Свойство text-shadow добавляет эффект тени(ей) для текста, и устанавливает её свойства, при этом размер элемента с текстом не меняется, вне зависимости от размера и положения тени. Возможно задавать несколько теней, разделять их необходимо между собой запятой. В CSS3 учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке — в самом низу. В CSS2 порядок наоборот: первая тень размещается в самом низу, а последняя на самом верху.

Свойство text-shadow определено в спецификациях CSS 2.1 и CSS 3 модуль Text Level 3 (текст, уровень 3), применяется к всем элементам, и действует на всех визуальные носителях, его значение не наследуется от родительского элемента в спецификации CSS уровень 2.1, и наследуется в спецификации CSS уровень 3, и по умолчанию принимает значение none. На данный момент свойство поддерживается во всех основных браузерах.

свойство text-shadowCSS3-генератор ☛

Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия. Свойство text-shadow может работать совместно с псевдоэлементами :first-letter и :first-line .

Краткая информация

Значение по умолчанию none
Наследуется Да
Применяется Ко всем элементам
Анимируется Да

Синтаксис ?

Обозначения

Описание Пример
Указывает тип значения.
A && B Значения должны выводиться в указанном порядке. &&
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [, ]*
+ Повторять один или больше раз. +
? Указанный тип, слово или группа не является обязательным. inset?
Повторять не менее A, но не более B раз.
# Повторять один или больше раз через запятую. #

Значения

Допускается указывать несколько параметров тени, разделяя их между собой запятой. В CSS3 учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке — в самом низу. В CSS2 порядок наоборот: первая тень размещается в самом низу, а последняя на самом верху.

Пример

Результат примера показан на рис. 1.

Объектная модель

Примечание

Opera поддерживает максимум 6–9 параметров тени. Повышение этого значения, а также увеличение радиуса размытия свыше 100px сказывается на производительности браузера. Opera до версии 10.1 использует отображение нескольких теней, как в CSS2.

Safari до версии 4.0 поддерживает только один параметр тени, остальные игнорируются. С версии 4.0 работает уже множество теней.

Браузер Internet Explorer понимает свойство text-shadow только с версии 10. До этого используется свойство filter : Shadow(параметры) . К примеру, следующая конструкция задает цвет тени (#666666), её направление (45° от вертикали) и величину смещения (4 пикселя).

filter: Shadow(Color=#666666, Direction=45, Strength=4);

Спецификация ?

Спецификация Статус
CSS Transitions Рабочий проект
CSS Text-decoration Level 3 Возможная рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
  • Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры: Настольные Мобильные ?

Internet Explorer Chrome Opera Safari Firefox
10 2 9.5 1.1 3.5
Android Firefox Mobile Opera Mobile Safari Mobile
2.1 1 9.6 1.2

Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

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

Свойство text-shadow задает эффект тени тексту элемента. При этом размер элемента не меняется (несмотря на то что тень может быть расположена далеко за пределами элемента).

Значения свойства задают смещение тени, ее радиус и цвет: [цвет] [смещение тени по оси X] [смещение тени по оси Y] [радиус тени] или
[смещение тени по оси X] [смещение тени по оси Y] [радиус тени] [цвет]. Порядок значений строго определен.

Смещение тени задается относительно верхнего левого угла текста. Положительные значения смещения сдвигают тень вправо и вниз, отрицательные влево и вверх.

Цвет тени — необязательный параметр, если он не задан, цвет тени за основу будет взят цвет текста (color), к которому применено свойство text-shadow.

Добавить комментарий