Text shadow: text-shadow | htmlbook.ru — Независимое театральное объединение "Зрительские симпатии"

Содержание

Свойство 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 — еще несколько примеров
Несколько примеров на русском

Свойство box-shadow — тень блока

Свойство box-shadow

задает тень блоку. В качестве значения свойство принимает 6 параметров, перечисляемые через пробел, либо ключевое слово none, отменяющее тень совсем.

Синтаксис

селектор { box-shadow: inset сдвиг_по_x сдвиг_по_y размытие размер_тени цвет; }

селектор { box-shadow: none; }

Параметры

Параметр	Описание
`inset`	Необязательный параметр. Если он задан, то тень будет внутри контейнера, если не задан — то снаружи.
сдвиг по x	Задает смещение тени по оси X. Положительное значение смещает вправо, отрицательное — влево.
сдвиг по y	Задает смещение тени по оси Y. Положительное значение смещает вниз, отрицательное — вверх.
размытие	Задает размытие тени. Чем больше значение — тем более размытой будет тень. Необязательный параметр. Если не задан — тень будет четкой.
размер тени	Задает размер тени. Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Необязательный параметр. Если не задан — тень будет такого же размера, что и элемент.
цвет	Задает цвет тени в любых единицах для цвета. Необязательный параметр. Если не задан — цвет тени совпадает с цветом текста.

Смещения по осям, размытие и размер тени задаются в любых единицах для размеров, кроме процентов.

Пример

В данном примере тень сдвинута вниз и вправо и добавлено небольшое размытие:

<div></div>

#elem {
 box-shadow: 5px 5px 3px black;
 border: 1px solid black;
 width: 300px;
 height: 50px;
}

Пример . Четкая тень

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

<div></div>#elem { box-shadow: 2px 2px black; border: 1px solid black; width: 300px; height: 50px; }

Пример . Равномерная тень

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

<div></div>

#elem {
 box-shadow: 0px 0px 3px black;
 border: 1px solid black;
 width: 300px;
 height: 50px;
}

Пример .

Размер тени

В данном примере тень не сдвинута, размытие равно нулю, но к ней добавлен размер (черное — это граница, красное — это тень):

<div></div>#elem { box-shadow: 0 0 0 3px red; border: 3px solid black; width: 300px; height: 50px; }

Пример . Размытие + размер тени

В данном примере тень не сдвинута, но к ней добавлены размытие и размер (черное — это граница, красное — это тень):

<div></div>#elem { box-shadow: 0 0 3px 3px black; border: 1px solid black; width: 300px; height: 50px; }

Пример . Внутренняя тень

В данном примере тень находится внутри контейнера:

<div></div>#elem { box-shadow: inset 0 0 6px black; border: 1px solid black; width: 300px; height: 50px; }

Смотрите также

свойство text-shadow,
которое задает тень тексту

Текстовая тень CSS3 | Могу ли я использовать.

.. Таблицы поддержки для HTML5, CSS3 и т. д.

Могу ли я использовать

Поиск

Текстовая тень CSS3

— CR

Глобальное использование
98,81% + 1% «=» 99,81%

Метод применения одного или нескольких эффектов тени или размытия к тексту

Chrome

4 — 112: Поддерживается
113: Поддерживается
114 — 116: Поддерживается

Edge

12 — 18: Поддерживается
79 — 112: поддерживается
113: поддерживается

Safari

3.1 — 3.2: Частичная поддержка
49% — Supported»> 4 — 16.3: Поддерживается
16.4: Поддерживается
16.5 — TP: Поддерживается

Firefox

2 — 3: Не поддерживается 9 0015
3.5 — 111: Поддерживается
112: Поддерживается
113–114: Поддерживается

Opera

9: Не поддерживается
9.5–97: Поддерживается
98: Поддерживается

900 13 IE

5,5–9: не поддерживается
10: поддерживается
11: Поддерживается

Chrome для Android

69% — Supported»> 112: Поддерживается

Safari на iOS

3.2–16.3: Поддерживается
16.4: Поддерживается
16.5: Поддерживается

Интернет Samsung

4 — 19.0: поддерживается
20: поддерживается

Opera Mini

все: частичная поддержка

Opera Mobile

10–12.1: поддерживается
73: поддерживается

Браузер UC для Android

13.4: Поддерживается

Браузер Android

2.1–4.4.4: Поддерживается
00% — Supported»> 112: Поддерживается

Firefox для Android 9 0014

110: поддерживается

Браузер QQ

13.1: Поддерживается

Браузер Baidu

13.18: Поддерживается

Браузер KaiOS

2.5: Поддерживается
3: Поддерживается

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

Ресурсы:: Хаки Mozilla статья; Live editor; WebPlatform Docs

Как применить тень к тексту в PowerPoint: пошаговое руководство

Как мы упоминали в нашей предыдущей статье о тенях в PowerPoint, презентация. Но как насчет текста? Работают ли те же предпосылки, когда мы применяем тень текста в PowerPoint? Следите за подробным руководством по этому вопросу.

Способ №1. Применение тени текста в PowerPoint с помощью ленты

Этот первый метод является наиболее распространенным подходом при использовании теней текста. Для целей этого урока мы создадим простой текст в пустой презентации PowerPoint.

Текстовое поле готово для эффекта тени текста

Используется шрифт Allegra Black, который создаст интересный контраст между текстом и тенью. Да, цветовой контраст и вес шрифта имеют значение при применении теней к тексту в дизайне презентации.

Выберите текстовое поле (не сам текст) и перейдите на ленту .

Выбор эффектов формы

Нажмите Эффекты формы и перейдите к Тени .

Доступ к эффектам теней

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

Пример текста с использованием тени Offset Bottom Left

Чтобы настроить этот эффект тени, откройте Параметры тени в том же меню, в котором мы были раньше.

Поиск параметров тени

Теперь параметры для эффекта тени в PowerPoint:

Предустановка : выбирает поведение эффекта тени, то есть с какого направления он исходит.
Цвет : По умолчанию черный. Измените цвет, чтобы увидеть интересные результаты.
Прозрачность : Оптимальные значения для этого ползунка находятся в диапазоне 55–65 %. Все, что ниже 55 %, будет выглядеть слишком темным, а все, что выше 65 %, будет настолько прозрачным, что эффект тени текста не будет виден.
Размер : всегда должен быть равен 100%. В противном случае эффект тени обнуляется.
Размытие : Старайтесь держать его между 2-4 пунктами.
Угол : Определяет положение для эффекта тени.
Расстояние : Как следует из названия, насколько далеко тень от объекта/текста.

Тень текста с параметрами по умолчанию

Как вы можете видеть ниже, изменяя эти параметры, только один из них, эффект тени может резко измениться.