Text shadow css примеры. Красивый текст с тенью

Описание

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

Синтаксис

text-shadow: none | тень [,тень]*
где тень:
<сдвиг по x> <сдвиг по y> <радиус размытия> <цвет>

Значения

None Отменяет добавление тени. цвет Цвет тени в любом доступном CSS формате. По умолчанию цвет тени совпадает с цветом текста. Необязательный параметр. сдвиг по x Смещение тени по горизонтали относительно текста. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное - влево. Обязательный параметр. сдвиг по y Смещение тени по вертикали относительно текста. Также допустимо использовать отрицательное значение, которое поднимает тень выше текста. Обязательный параметр. радиус Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0. Учтите, что алгоритм сглаживания в браузерах обычно разный, поэтому вид тени может несколько различаться в зависимости от заданных параметров сглаживания.

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

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

В чащах юга жил бы цитрус? Да, но фальшивый экземпляр!

Результат примера показан на рис. 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);

На свой сайт, задали необходимый и цвет. Научились управлять декорациями шрифта. Теперь настало время поговорить о том, как добавить тень HTML-шрифта.

Тень к тексту невозможно сделать средствами HTML, самый правильный и простой способ сделать тень - CSS. Для этого существует специальное свойство CSS shadow (text-shadow ). Рассмотрим его применение:

Конструктор сайтов "Нубекс"

Значение параметра text-shadow задается следующим образом:

Text-shadow: [сдвиг по оси X] [сдвиг по оси Y] [радиус размытия тени] [цвет]

В случае, если тень для текста необходимо убрать, просто нужно прописать:

Text-shadow: none;

Разберемся теперь, что означают указанные параметры и как их правильно задать:

• Сдвиг по оси X (Y) - указывает смещение тени по оси X (Y). Параметр можно задать как положительным числом, так и отрицательным. В первом случае тень будет смещена вправо (вниз), во втором - влево (вверх);
• Радиус размытия тени - при увеличении этого значения размер тени увеличивается, она становится более сглаженной и светлой. Вид сглаживания отличается при отображении в различных браузерах;
• Цвет - устанавливает цвет тени.

Все параметры, кроме цвета, задаются в пикселях (px ). Цвет можно задать как названием (red, green, blue ), так и в шестнадцатиричном формате (#383838).

Тени возможно комбинировать. Для этого нужно несколько теней прописать через запятую:

Text-shadow: 1px 1px 1px #787878, 2px 2px 2px blue;

Кроссбраузерность

Практически все современные браузеры корректно работают с тенями и способны отображать большое множество теней. Но нужно помнить, что некоторые браузеры имеют с этим проблемы. Например, браузер Internet Explorer стал поддерживать свойство text-shadow только начиная с версии 10. Для более ранних версий использовалось свойство filter :

Filter: Shadow(Color=#787878, Direction=60, Strength=2);

Записанный код создает тень цвета #787878, с углом 60 градусов от вертикали и смещением в 2 пикселя.

Обводка текста CSS

С помощью свойства text-shadow можно сделать и обводку текста. Суть следующая: для текста создаются 8 теней для всех возможных комбинаций X и Y: 1,0; 1,1; ...; 1,-1. Атрибут text-shadow в таком случае выглядит примерно так:

P { color: white; text-shadow: black 2px 0px, black 2px 2px, black 0px 2px, black -2px 2px, black -2px 0px, black -2px -2px, black 0px -2px, black 2px -2px; }

В приведенном примере к тексту белого цвета устанавливается черная обводка в 2 пикселя.

Влад Мержевич

Одно время на текст с тенью была определённая мода и подобный эффект можно было встретить практически на любом сайте. В графическом редакторе тень добавляется просто, выглядит отлично, вот текст с тенью и пихали на веб-страницы независимо от стиля сайта и чувства меры дизайнера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство 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. Контурный текст

Контурный текст

Контур, сделанный этим методом, продемонстрирован на рис. 1. Контур получается слегка размытым, поэтому для тех, кто хочет получить чёткую линию, предназначен второй метод. Он заключается в использовании четырёх резких теней одного цвета, они смещаются в разные углы на один пиксел (пример 2).

Пример 2. Четыре тени для контура

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Контурный текст

Вид такого контура показан на рис. 3. Заметно, что контур получается более выразительным.

Рис. 3. Контур с помощью четырёх теней

Для добавления эффекта трёхмерного текста показанного на рис. 4 применяется одновременно несколько теней которые смещаются относительно друг друга на один пиксел по горизонтали и вертикали.

Рис. 4. Трёхмерный текст

Лично мне подобный текст напоминает надписи в стиле ретро и опять же лучше всего он подходит для заголовков, а не для основного текста веб-страницы.

Число теней зависит от того, насколько вы хотите «выдвинуть» текст вперёд. Большее количество повышает «глубину» букв, меньшее, наоборот, понижает трёхмерность. В примере 3 используется пять теней одного цвета.

Пример 3. Тень для добавления трёхмерности

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Десятикамерный холодильник

Для всех теней ставим нулевой радиус размытия и одинаковый цвет. Различаются тени только значениями смещения.

Тиснение текста

Для создания эффекта тиснения текста или, по-другому, рельефа, цвет текста должен совпадать с цветом фона. Одна часть «выступающих» над поверхностью букв словно освещена, другая же часть находится в тени (рис. 5).

Рис. 5. Рельефный текст

Для добавления подобного эффекта нам понадобится две тени - белую тень мы смещаем влево вверх на один пиксел, а тёмно-серую вправо вниз (пример 4).

Пример 4. Рельефный текст

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Рельефный текст

Рельеф выигрышнее всего смотрится именно на сером фоне, поэтому эффект подойдёт не для каждой цветовой схемы сайта. Кстати, легко получить вдавленный, а не выдавленный текст, достаточно поменять местами цвета тени.

Text-shadow: #333 -1px -1px 0, #fff 1px 1px 0;

Свечение

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

Рис. 6. Свечение текста

Пример 5. Свечение

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Светлая сторона

Тёмная сторона

Размытие

Тень сама по себе размывается, так что если оставить только тень, а сам текст скрыть, то мы получим размытые буквы (рис. 7), причём степень размытия легко регулировать через параметр text-shadow .

Рис. 7. Текст с размытием

Для сокрытия оригинального текста достаточно задать цвет как transparent (пример 6). Цвет тени после этого выступает цветом текста, а радиус размытия устанавливает степень нерезкости букв.

Пример 6. Размытие текста

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

Нерезкий текст

Тень и псевдоклассы

Тень не обязательно добавлять непосредственно к тексту, свойство text-shadow прекрасно сочетается с псевдоклассами :hover и :first-letter . За счёт этого получаются интересные эффекты с текстом вроде контурной первой буквы абзаца или свечения ссылки при наведении на неё курсора мыши. В примере 7 показаны такие приёмы.

Пример 7. Использование псевдоклассов

HTML5 CSS3 IE 9 IE 10+ Cr Op Sa Fx

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

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

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

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

Text-shadow: x-смещение у-смещение размытие цвет;

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

Text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

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

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

body { background: #222; } #text h1 { color: rgba(0,0,0,0.6); text-shadow: 2px 2px 3px rgba(255,255,255,0.1); }

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

Жесткая тень

text-shadow: 6px 6px 0px rgba(0,0,0,0.2);

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

Двойная тень

text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

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

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

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);

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

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

text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);

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

3D текст от Mark Dotto

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);

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

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

background-color: #666666; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; color: transparent; text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;

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

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

text-shadow: 0px 0px 6px rgba(255,255,255,0.7);

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

Ретро-стиль

text-shadow: -10px 10px 0px #00e6e6, -20px 20px 0px #01cccc, -30px 30px 0px #00bdbd;

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

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

text-shadow: 0px 15px 5px rgba(0,0,0,0.1), 10px 20px 5px rgba(0,0,0,0.05), -10px 20px 5px rgba(0,0,0,0.05);

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

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

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);

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

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

В этом уроке вы узнаете, как добавить тень от букв, используя такие инструменты программы Photoshop как Трансформация (Тransform tool) и стиль слоя "Наложение градиента" (Gradient Overlay).

Уметь создавать тени в Photoshop, очень важный навык, который пригодится вам во многих сферах цифрового искусства.

Данный урок не займет у вас много времени, но полученные навыки вы сможете успешно применять к различным объектам. Урок простой и больше подойдет для начинающих осваивать программу Photoshop.

Начнем!

Шаг 1

Работать с тенью будет гораздо проще, если вы запомните несколько простых правил и будете их соблюдать.

1) Источник света.
Прежде чем работать с тенью вы должны определить, либо выбрать источник света. Это может быть как один, так и несколько источников света. Каждый источник света создает тень для всех окружающих предметов.

2) Характеристики света.
Прежде чем приступить к работе, вы должны обратить внимание на направление света, расстояние источника света от объекта, интенсивность света, и так далее.

Давайте поэкспериментируем на простом примере.
Создайте новый документ любого размера. Залейте фоновый слой цветом # a59d87. Поверх фонового создайте новый слой и напишите произвольный текст. Цвет для шрифта используйте # e4ddc6.

Примечание переводчика:
- Для создания нового документа перейдите к Файл - Создать - Новый ;
- Для заливки фонового слоя активируйте инструмент Заливка ( G) и сделайте щелчок в любом месте рабочего холста;
- Для того что бы добавить новый слой, нажмите комбинацию клавиш Shift+ Ctrl+ N
- Для того что бы написать текст, активируйте инструмент Горизонтальный текст (Т)

Как вы видите - текст и фон, однородные по цвету, не имеют переходов, а значит, мы можем представить, что на данном этапе источник света отсутствует.

Шаг 2

Рассмотрим первый вариант, в котором источник света расположен по направлению к тексту (представим что свет падает от зрителя на текст).
Запомните: интенсивность источника света и расстояние объекта от источника, определяют длину и насыщенность отбрасываемой тени!

Изменим фон, согласно выбранному освещению. Встаньте на фоновый слой, разблокируйте его, перейдите к Стиль слоя (Layer Style) и добавьте Наложение градиент (Gradient Overlay). Настройки можно применить такие, как показаны на рисунке ниже. Так же измените цвет текста - сделайте его на 1-3 тона светлее.

Примечание переводчика: для того что бы перейти к настройкам "Стиль слоя" сделайте двойной щелчок левой клавишей мыши по слою.

Для создания тени скопируйте текстовый слой. Переименуйте слой-оригинал в "Тень". Растрируйте текстовый слой "Тень". Активируйте инструмент Трансформирование (Тransform tool) и уменьшите размер букв на 60% по высоте. Опорную точку при масштабировании установите как показано на скриншоте.

Перейдите к Редактирование - Трансформирование - Перспектива (Edit - Transform -Perspective Tool). Исказите тень так, что бы она лежала на поверхности.

Понизьте заливку (fill) слоя "Тень" до 0%. Перейдите к Стиль слоя (Layer Style) и добавьте к слою "Тень" Наложение градиента (Gradient Overlay).

Для того что бы тень выглядела более естественно, сделаем ее мягче. Перейдите к Фильтр - Размытие - Размытие по Гауссу (Filter - Blur - Gaussian Blur). Так же вы можете подкорректировать фон. Если вы считаете, что фон слишком светлый (или темный), достаточно встать на фоновый слой, перейти к параметрам Стиль слоя и поэкспериментировать с непрозрачностью наложенного градиента.
Тень готова!

Шаг 3

Рассмотрим второй вариант. Представим, что источник света расположен за текстом.
Встаньте на фоновый слой и перейдите к параметрам Стиль слоя - Наложение градиента (Layer Style- Gradient Overlay). Мы будем использовать градиент, тот же что и в предыдущем варианте, все что нужно сделать это поставить галочку "Инверсия " (Reverse).

Приступим к добавлению тени. Скопируйте текстовый слой. Переименуйте слой-оригинал в "Тень". Растрируйте слой-оригинал. Перейдите к Редактирование - Трансформирование - Отразить по вертикали (Edit - Transform -Perspective Tool - Flip Vertical).

Далее, повторите действия шага №2:
-понизьте заливку (fill) слоя "Тень" до 0%
- перейдите к Стиль слоя (Layer Style)
- добавьте Наложение градиента (Gradient Overlay)
- смягчаем тень используя Размытие по Гауссу (Gaussian Blur)
Встаньте на текстовый слой-оригинал и добавьте к нему Стиль слоя - Наложение градиента (Layer Style- Gradient Overlay), для того что бы затемнить нижнюю часть букв.
Как результат, вы получите похожее изображение:

Мы рассмотрели только два варианта освещения. Конечно свет может распространяться из различных точек, к примеру, из правого угла. В этом случае все, что вам нужно сделать, это исказить тень, воспользовавшись инструментами Трансформирования (Наклон, Перспектива, Искажение (Skew, Perspective, Distort)).

На этом урок окончен. Удачной вам практики!