Модуль содержит возможности CSS, относящиеся к оформлению текста, такие как подчеркивание, тени текста, а также акценты в тексте восточно-азиатских языков.
Свойства для оформления текста
1. Оформление линии: подчеркивание, обводка и зачеркивание
Подчеркивание, обводка и перечеркивающие линии отображаются только для незамещаемых блоков уровня строки (display: inline) и отображаются по всему тексту, включая пробелы между символами и словами, за исключением отступов в начале и конце строки.
Браузеры могут прерывать подчеркивание и обводку в том месте, где линия пересекает глиф, отображаясь на некотором расстоянии по обе стороны от контура глифа. Когда браузер прерывает подчеркивание или обводку на границах глифа, форма линии на этой границе должна соответствовать форме глифа. Однако, спецификация не предписывает конкретный метод для «следования форме» глифа, оставляя это на усмотрение браузеру.
Рис. 1. Прерывание линии подчеркивания
1.1. Вид линии оформления: свойство text-decoration-line
Поддержка браузерами
IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2
Свойство text-decoration-line определяет, какой тип линии, если таковые имеются, добавляется к элементу.
Свойство не наследуется.
Синтаксис
Text-decoration-line: none; text-decoration-line: underline; text-decoration-line: overline; text-decoration-line: line-through; text-decoration-line: blink; text-decoration-line: underline overline; text-decoration-line: overline underline line-through; text-decoration-line: inherit; text-decoration-line: initial;
1.2. Стиль линии оформления: свойство text-decoration-style
Поддержка браузерами
IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2
Свойство text-decoration-style определяет стиль линий, нарисованных для оформления текста, указанного в элементе. Значения имеют то же значение, что и для свойства border-style .
Свойство не наследуется.
Синтаксис
Text-decoration-style: solid; text-decoration-style: double; text-decoration-style: dotted; text-decoration-style: dashed; text-decoration-style: wavy; text-decoration-style: inherit; text-decoration-style: initial;
1.3. Цвет линии оформления: свойство text-decoration-color
Поддержка браузерами
IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2
Свойство text-decoration-color определяет цвет линии оформления текста, установленный для элемента с text-decoration-line .
Свойство не наследуется.
Синтаксис
Text-decoration-color: currentColor; text-decoration-color: salmon; text-decoration-color: #00ff00; text-decoration-color: rgba(255, 128, 128, 0.5); text-decoration-color: transparent; text-decoration-color: inherit; text-decoration-color: initial;
1.4. Краткая запись свойств линии оформления: свойство text-decoration
Поддержка браузерами
IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2
Свойство text-decoration является краткой формой записи свойств text-decoration-line text-decoration-style text-decoration-color в одном объявлении. Пропущенные значения устанавливаются на их начальные значения. Значение по умолчанию text-decoration: none solid currentColor; . Свойство не наследуется. Тем не менее, стиль всех линий оформления текста должен быть одинаковый для одного элемента.
1.5. Расположение линии оформления: свойство text-underline-position
Поддержка браузерами
IE: —
Edge: 12
Firefox: —
Chrome: 71
Safari: —
Opera: —
iOS Safari: —
UC Browser for Android: ?
Chrome for Android: 71
Samsung Internet: —
Свойство text-underline-position устанавливает положение линии подчеркивания, указанного в элементе.
Свойство наследуется.
| Значения: | |
| auto | Браузер может использовать любой алгоритм для определения позиции подчеркивания, тем не менее линия должна быть размещена на или под базовой линией текста. Значение по умолчанию. |
| under | Подчеркивание расположено под текстовым содержимым элемента. В этом случае подчеркивание обычно не пересекает нижний выносной элемент. Это значение можно комбинировать с left или right , если конкретная сторона предпочтительна в вертикальных типографских режимах. |
| left | В вертикальных типографских режимах подчеркивание выравнивается по левому краю текста. Тем не менее, это значение интерпретируется как under . |
| right | В вертикальных типографских режимах подчеркивание выравнивается по правому краю текста. Тем не менее, это значение интерпретируется как under . |
| inherit | |
| initial | |
Синтаксис
Text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;
text-underline-position: under left;
text-underline-position: under right;
text-underline-position: inherit;
text-underline-position: initial;
Рис. 2. Подчеркивание текста с обеих сторон в вертикальных типографских режимах с помощью значений left и right
2. Тень текста: свойство text-shadow
Поддержка браузерами
IE: 10
Edge: 12
Firefox: 3.5
Chrome: 4
Safari: 4
Opera: 10
iOS Safari: 3.2
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 4
Свойство text-shadow используется для добавления тени к тексту. Тень текста — интересный инструмент, который позволяет создавать удивительные эффекты. Тени могут быть однослойными или многослойными, размытыми, цветными или полупрозрачными. Задавая тень для элемента, можно указывать только одно значение длины и цвет, таким образом создавая цветную копию отдельного символа или слова. Также, с помощью тени можно сделать текст более читаемым, если контраст между цветом текста и фоном невелик.
Каждая тень применяется как к самому тексту, так и к элементам его оформления (свойство text-decoration). Одновременно можно задавать несколько теней, указывая их через запятую. Тени накладываются друг на друга, но не перекрывают сам текст. Первая тень всегда расположена сверху над остальными тенями. Свойство наследуется.
Каждая тень определяется двумя или тремя значениями длины и необязательным цветом. Допустимы длины, равные 0 .
Свойство не наследуется.
Рис. 3. Синтаксис свойства text-shadow
| text-shadow | |
|---|---|
| Значения: | |
| x-offset | Задает горизонтальное смещение тени. Положительное значение рисует тень, смещенную вправо от текста, отрицательная длина — влево. |
| y-offset | Задает вертикальное смещение тени. Положительное значение смещает тень вниз, отрицательное — вверх. |
| blur | Задает радиус размытия. Отрицательные значения не допускаются. Если значение размытия равно нулю, то край тени четкий. В противном случае, чем больше значение, тем больше размыт край тени. |
| цвет | Задает тени. Если цвет отсутствует, используемый цвет берется из свойства color . |
| none | Значение по умолчанию, означает отсутствие тени текста. Убирает тень элемента из группы элементов с заданным свойством. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
В отличие от box-shadow , текстовые тени не обрезаются и могут отображаться, если текст частично прозрачен. Как и box-shadow , текстовые тени не влияют на макет и не вызывают прокрутку или увеличение размера прокручиваемой области.
Синтаксис
Text-shadow: 2px 2px 4px pink; text-shadow: #fc0 1px 0 10px; text-shadow: 5px 5px #4D4644; text-shadow: blue 2px 5px; text-shadow: 5px 10px; text-shadow: inherit; text-shadow: initial;
2.1. Примеры тени текста
Плакатная тень
Тень текста
Text-shadow-1 { background: #77F7DE; color: white; text-shadow: -2px -2px 0 #4D4644, 2px -2px 0 #4D4644, -2px 2px 0 #4D4644, 2px 2px 0 #4D4644, 4px 4px 0 white, 5px 5px 0 white, 6px 6px 0 white; letter-spacing: 0.1em; }
3D тень
Тень текста
Text-shadow-2 { background: linear-gradient(-45deg, #FEE864, #F5965E); color: #f4f4f4; text-shadow: -1px -1px white, 1px 1px gray, 2px 2px #7a7a7a, 3px 3px #757575, 4px 4px #707070, 5px 5px #6b6b6b, 6px 6px #666666, 7px 7px #616161, 8px 8px #5c5c5c, 9px 9px #575757, 10px 10px #525252, 11px 11px #4d4d4d, 18px 18px 30px rgba(0, 0, 0, .4), 18px 18px 10px rgba(0, 0, 0, .4); }
Тень-текст
Тень текста
Text-shadow-3 { background: #FFE6DB; color: #FFE6DB; letter-spacing: .1em; text-shadow: 3px 0 rgba(250, 111, 142, .5), 6px 0 rgba(250, 111, 142, .4), 9px 0 rgba(250, 111, 142, .3), 12px 0 rgba(250, 111, 142, .2), 15px 0 rgba(250, 111, 142, .1); }
Ретро-тень
Тень текста
Text-shadow-4 { color: #FB631E; letter-spacing: .1em; text-shadow: 4px 4px white, 6px 6px #D7CC88; }
Многослойная тень
Тень текста
Text-shadow-5 { background: #f1f1f1; color: #fcc105; letter-spacing: .1em; text-shadow: 4px 4px #ff981d, 7px 7px rgba(200, 120, 22, .2); }
Описание
Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия. Свойство 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);
Влад Мержевич
Одно время на текст с тенью была определённая мода и подобный эффект можно было встретить практически на любом сайте. В графическом редакторе тень добавляется просто, выглядит отлично, вот текст с тенью и пихали на веб-страницы независимо от стиля сайта и чувства меры дизайнера. Когда же большинство браузеров стало дружно поддерживать стилевое свойство 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, отвоевывая рыночный сегмент. Инвестиция синхронизирует ролевой социальный статус, повышая конкуренцию. Торговая марка естественно обуславливает план размещения, используя опыт предыдущих кампаний.
Свойство CSS text-shadow отвечает за задание тени у текста. Очень схож со свойство box-shadow .
Синтаксис CSS text-shadow
text-shadow : X Y R color ;
- X - сдвиг тени относительно текста по оси Х (чаще всего задается в пикселях px);
- Y - сдвиг тени относительно текста по оси Y (чаще всего задается в пикселях px);
- R - радиус тени (чаще всего задается в пикселях px);
- color - цвет (можно задавать в любом формате, см. названия html цветов)
Синтаксис text-shadow допускает задание нескольких теней через запятую. Например
text-shadow : X1 Y1 R1 color1 , X2 Y2 R2 color2 , ...;
Приоритет тени (какая выше, какая ниже) зависит от конкретной версии CSS. В CSS3 первая тень в списке размещается на самом верху, последняя в списке - в самом низу. В CSS2 наоборот.
Примеры: как сделать тень у текста в html
Пример №1. Простая тень у текста в html
Ниже представлен самый простой пример с тенью у текста. Здесь мы применили оба смещения (X и Y), а также сделали радиус размытия.
Текст с тенью
Текст с тенью
Пример №2. Фиксированная или жесткая тень у текста в html
Ниже представлены два примера. Тень в обоих случаях одинаковая (фиксированная), т.е. без размытия. Обратите внимание, какой эффект создается, если текст будет на черном фоне.
Фиксированная или жесткая теньФиксированная или жесткая тень с фоном
На странице преобразуется в следующее
Фиксированная или жесткая тень
Фиксированная или жесткая тень с фоном
Пример №3. Двойная тень у текста в html
Двойная тень
На странице преобразуется в следующее
Двойная тень
Пример №4. Вдавленные буквы у текста в html
Вдавленные буквы - вариант 1Вдавленные буквы - вариант 2
На странице преобразуется в следующее
Вдавленные буквы - вариант 1
Вдавленные буквы - вариант 2
Пример №5. Вдавленные буквы у текста в html
Небольшой 3D текст
На странице преобразуется в следующее
Небольшой 3D текст
Для обращения к margin из JavaScript нужно писать следующую конструкцию:
document.getElementById("elementID").style.margin ="VALUE "
Даже самый зеленый дизайнер умеет делать тени в фотошоп. Тени придают объемность дизайну и сейчас это пользуется большой популярностью. Не исключение и тени для текстов, пунктов меню и заголовков. Достаточно вспомнить оформление интерфейсов от 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 — координаты начала тени относительно верхнего левого угла надписи (или объекта). Положительные значения сдвигаеют тень вправо и вниз, отрицательные — влево и вверх.
