Красивый текст с тенью

Описание

Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия. Свойство 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

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

Даже самый зеленый дизайнер умеет делать тени в фотошоп. Тени придают объемность дизайну и сейчас это пользуется большой популярностью. Не исключение и тени для текстов, пунктов меню и заголовков. Достаточно вспомнить оформление интерфейсов от apple

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

Задача

Сделать тень для текста средствами CSS, без использования картинок. Чего мы этим добьемся?

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

Текстовые тени для нормальных браузеров

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

Итак, перечень браузеров, которые поддерживают свойство text-shadow:

Safari 3.1 (Mac/Win) — поддерживает, не поддерживаются множественные тени
Safari 4 (Mac/Win) — поддерживает полностью
Opera 9.5+ (Mac/Win/Lin) — поддерживает полностью
Firefox 3.1/3.5 (Mac/Win/Lin) — поддерживает полностью
Google Chrome 2 (Win) — поддерживает полностью
Shiira (Mac) — поддерживает, не поддерживаются множественные тени
Konqueror (Lin/Mac/Win) — поддерживает полностью
iCab (Mac) — поддерживает, не поддерживаются множественные тени
Safari on iPhone — поддерживает, не поддерживаются множественные тени
Nokia Symbian-Smartphones (Series 60) — поддерживает
Opera Mini 4.1 — поддерживает, не поддерживает размытость тени

Для этих браузеров, чтобы сделать тень тексту достаточно одной строки в CSS:

H1 { text-shadow: 0px 1px 3px #000; }

Получим вот такой модный заголовок:

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

Размытый текст

H1 { color: #fff; background: #666; text-shadow: 0px 0px 3px #fff; }

Дублирование текста

H1 { text-shadow: 0px 20px #000; }

Множественные тени позволяют добиться еще нескольких эффектов:

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

H1 { background: #ccc; color: #ccc; text-shadow: -1px -1px #666, 1px 1px #FFF; font-family: serif; }

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

H1 { background: #999; color: #999; text-shadow: 1px 1px 3px #666, -1px -1px 3px #FFF, 1px 1px #666, -1px -1px #FFF; font-family: serif; }

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

Теперь о грустном — что делать с горячо всеми "любимым" IE?

Текстовые тени в IE

Хотя IE вплоть до 8-й версии не понимает text-shadow, у него хватает своих "примочек". В частности для создания теней есть фильтр dropShadow (). Чтобы тени появились, у элемента должен быть установлен layout. Устанавить можно несколькими способами:

задав элементу свойства : block + высоту() или ширину ())
задав элементу : absolute
задав : left/right
задав zoom: 1

H1 { filter:progid:DXImageTransform.Microsoft.DropShadow(color="#666666",offX=2,offY=2,positive="true"); zoom: 1; }

Казалось, что можно кричать "Ура!!!" и радоваться жизни, но посмотри, как этот фильтр в реальности работает:

Вот так отобразится текст, если к нему применить фильтр dropShadow

Для тех кто не понял, по пуктам недостаки этого фильтра:

тень выглядит ужасно: угловатая, нет плавного, с полупрозрачностью перехода в фон
искажается начертание шрифта
тень практически не поддается регулированию (управлять можно только положением тени) — это можно частично обойти применив фильтр shadow вместо dropShadow, но критичные первые два недостатка остаются
обязательное наличие layout несколько ограничивает разработчика

Такой результат не приемлем в реальных проектах. Непонятно кто и как принял такую работу у разработчиков.

Kilian Valkhof предложил использовать эмуляцию тени:

не применять фильтр непосредственно к тексту
использовать вместо dropShadow и shadow комбинацию фильров glow и blur

Это позволит избежать искажения текста и сделать тень более гибкой.

Тестовый заголовок Тестовый заголовок

H1 { text-shadow: 3px 3px 3px #cccccc; position: relative; zoom: 1; color: #000; } h1 span { position: absolute; left: -3px; top: -3px; z-index: -1; filter: progid:DXImageTransform.Microsoft.Glow(Color=#cccccc,Strength=1) progid:DXImageTransform.Microsoft.blur(pixelradius=3, enabled="true") ; zoom: 1; }

Но даже с таким подходом, все равно остается ряд недостатков:

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

Для создания теней для IE можно воспользоваться javascript (не в первый раз javascript спасает)

Тени для текста с помощью javascript

Из скриптов, что протестировал, для себя остановился на плагине для jquery "Drop Shadow". Его достоинства:

эмулирует тени с помощью вставки множества контенйнеров, т.е. без использования фильтров для IE. Это дает возможность сделать максимально схожими тени в IE с другими браузерами + нет нужды беспокоится о layout для IE
создает тени не только для IE, что иногда может быть полезно
малый вес скрипта — 4Kb (если удалить комментарии из кода), а если применить сжатие, еще меньше будет. В писаниии скрипта есть требовани — наличие скрипта jquery.dimensions.js, но я так и не понял зачем он. Тени создаются, удаляются, определеяются id и без него.
прост и понятен в использовании
можно с некоторым успехом проэмулировать множественные тени

Недостатки:

нельзя инициализировать скрипт по id элемента
если элементу задан фон, тень будет создана не для текста, а для элемента в целом
обязательное подключение библиотеки jquery (а это более 50Kb). Но популярность jquery практически ниверлирует этот недостаток
по опсианию скрипта так же требуется подключение jquery.dimensions.js (еще 2Kb). Но не понял зачем эта библиотека, вроде и без нее все нормально работает

Применение плагина Drop Shadow

Синтаксис:

JQuery(selector).dropShadow(options); // создание тени у элемента jQuery(selector).redrawShadow(); // перерисовка тени jQuery(selector).removeShadow(); // удаление тени jQuery(selector).shadowId(); // возвращает id тени элемента

Left: [целое число] (по умолчанию = 4) top: [целое число] (по умолчанию = 4) blur: [целое число] (по умолчанию = 2) opacity: [дробное число] (по умолчанию = 0.5) color: [строка] (по умолчанию = "black") swap: [логическое значение] (по умолчанию = false)

Параметры left и top — координаты начала тени относительно верхнего левого угла надписи (или объекта). Положительные значения сдвигаеют тень вправо и вниз, отрицательные — влево и вверх.

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

Тонкая четкая обводка

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

Текст с обводкой

Тут видно, что блок с текстом имеет класс text-dec. Именно по нему мы будем обращаться к нашему элементу в css, применяя к нему нужные свойства. Итак, как же делается тоненькая обводка:

Text-dec{ font-size: 50px; color: yellow; text-shadow: 1px 1px 0 black, -1px -1px 0 black }

Зададим сразу большой размер шрифта, чтобы все было очень хорошо видно, а цвет текста – желтый, допустим. Третья строчка в нашем случае и реализует ту самую обводку.

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

Text-shadow: смещение по горизонтали | по вертикали | размытие | цвет

В нашем случае мы сначала задали небольшое смещение вниз и влево, а потом вверх и вправо. В результате текст по всему своему контуру получил обведение. Если добавить к каждой тени еще и размытие в 10 пикселей, то она будет выглядеть так:

Размытая обводка

Другой подход заключается в том, чтобы вообще не задавать смещение, но определить размытие – тогда текст тоже будет как бы обведен, но не четко. Добавим такой же точно текст в html, но только стилевой класс задайте другой – text-dec2:

Text-dec2{ font-size: 50px; color: blue; text-shadow: 0 0 7px red; }

Это выглядит так:

Жирная обводка

Это реализовать труднее, так как слишком сильное смещение теней может привести к нечитаемости текста. И все же определенного эффекта добиться можно, хотя для этого придется добавить гораздо больше теней, чем в предыдущих случаях. Соответственно, добавьте в html новые текстовые фрагменты с классами text-dec3 и text-dec4 . И вот такие для них стили:

Text-dec3{ font-size: 50px; color: yellow; text-shadow: 1px 1px 0 black, -1px -1px 0 black, 2px 2px 0 black, -2px -2px 0 black, 3px 3px 0 black, -3px -3px 0 black, 4px 4px 0 black, -4px -4px 0 black } .text-dec4{ font-size: 50px; color: yellow; text-shadow: -1px 1px 0 black, 1px -1px 0 black, -2px 2px 0 black, 2px -2px 0 black, -3px 3px 0 black, 3px -3px 0 black, -4px 4px 0 black, 4px -4px 0 black }

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

Еще более жирная обводка со всех сторон

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

Код я приводить не буду, он занимает аж 50 строк Впрочем, сами посмотрите в генераторе.

CSS пока не всесилен

На этом возможности css заканчиваются. Если вам нужна красивая жирная обводка, например, как эта:
То сделайте ее в фотошопе, а сам текст придется вставить на веб-страницу в виде изображения

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

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

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

Оформление <a href="/the-device/fff-kakoi-cvet-css-ustanovka-cveta-dlya-teksta-v-css-sposoby-predstavleniya.html">текста CSS</a> - "Нубекс"

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

Значение параметра 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 пикселя.

13.11.2012 27.01.2018

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

В ходе урока вы научитесь:

Определять источник света
Наносить цветовой градиент на текст и настраивать его
Отбрасывать тень от текста
Создавать блики на буквах

Прежде чем начать урок взгляните и изучите эту схему. На ней наглядно видно как свет ударяет по объекту и он отбрасывает тень. Это простейшая основа которую необходимо знать и понимать.

Шаг 1

Мы начинаем урок. Создайте новый документ в фотошопе и проведите градиент по диагонали, от светло-серого к темно-серому.

Шаг 2

Теперь напишите текст. Я использовал шрифт Agency FB, а цвет #c2c8d4.

Шаг 3

Нажмите на слой с текстов зажав кнопку CTRL — это создаст выделение. Создайте новый слой. Проведите градиент с одного края цвет #495a79, а с другого — прозрачный. Градиент должен идти с нижнего правого края в верхний левый.

Шаг 4

Установите цвет переднего плана черным (вы можете сделать это, нажав на букву D на клавиатуре, которая восстанавливает цветовые настройки по умолчанию).

Теперь зажав Ctrl щелкните на слой с текстом и создайте новый слой под ним. Далее нажмите стрелку вниз на клавиатуре один раз, и стрелку вправо на клавиатуре. Затем нажмите Alt + Backspace, чтобы заполнить его черным цветом. Нажмите вниз и вправо опять один раз и залейте его черным. Вы двигаетесь на 1 пикселей вниз и вправо. Повторите это раз 30.

Шаг 5

Убедитесь что выбран слой с тенью и примените фильтр Filter — Blur — Motion Blur, параметры Angle — 45, Distance 30.

Шаг 6

Установите режим смешивания для слоя с тенью Multiply и прозрачность 40%.

Переместите тень немного вниз и вправо. Возьмите ластик(Eraser Tool) и торчащие части тени сотрите.

Шаг 7

Сделайте копию слоя с тенью и переместите его немного вправо и вниз. Примените фильтр Motion Blur, Angle -45, Distance 50. Режим смешивания для слоя — Multiply, 20% прозрачность.

Шаг 8

Создайте новый слой выше всех остальных. Зажмите CTRL и нажмите на основной слой с текстом, чтобы появилось выделение. Залейте белым цветом. Переместите выделение (не слой, а только выделение) вниз и вправо на 1 пиксель и нажмите кнопку Delete.

Установите получившемуся слою прозрачность 80%.