Анимированая тень с помощью свойства CSS3 text-shadow и javascript


Содержание

Используем свойство text-shadow для эффектного оформления текста

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

На демонстрационной странице представлены шесть текстовых эффектов винтаж/ретро, неон, вдавленный, анаглифный, огонь и фанера. Код, представленный ниже в статье можно использовать в своих приложениях для получения аналогичных эффектов без применения изображений. Конечно же, они доступны только в браузерах, поддерживающих свойство text-shadow (Safari, Chrome, Firefox).

Как работает свойство text-shadow

Свойство CSS3 text-shadow служит для добавления тени к любому, связанному с текстом элементу HTML. При задании свойства надо указать смещение по осям Х и Y, размывание и цвет тени. Кроме того, можно не ограничиваться только одной тенью, а задать несколько, определяя параметры для них через запятую!

Винтаж/ретро

Как работает:

Эффект винтажа создается двумя тенями, но первая имеет тот же цвет, что и фон, чтобы сложилось впечатление, что вторая тень, которая имеет тот же цвет, что и текст (тонкая темно-серая полоска), смещена вправо вниз.

Как работает

Эффект неонового свечения создается с помощью 8 уровней теней. Основной текст имеет белый цвет, а каждый из 8 уровней теней имеет все большее и большее значение размывания, что затемняет слои. Это смесь между ярким внутренним свечением и большой областью внешней пурпурной ауры.

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

Как работает

Эффект вдавленного текста очень часто используется с применением свойства text-shadow. Тень немного смещена по оси Y для создания эффекта небольшого углубления. На темном фоне светлая тень смещается вниз, а на светлом фоне темная тень смещается вверх.

Анаглиф

Как работает

Эффект анаглиф создает впечатление использования 3D изображений. Воспроизводится с помощью смешивания свойства text-shadow с установкой цвета RGBa. RGBa позволяет устанавливать прозрачность для текста и тени на уровне 50%, так что ниже лежащий текст становится виден сквозь верхние слои.

Огонь

Как работает

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

Фанера

Как работает

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: line25.com/articles/using-css-text-shadow-to-create-cool-text-effects
Перевел: Сергей Фастунов
Урок создан: 16 Декабря 2010
Просмотров: 40182
Правила перепечатки

5 последних уроков рубрики «CSS»

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Раскрывающаяся навигация

Экспериментальный скрипт раскрывающейся навигации.

Примеры. CSS Shadow/CSS Тень

С появлением каскадной таблицы CSS3 открылось больше возможностей в оформлении внешнего вида элементов интернет-страницы. Это намного упрощает работу в создании различных эффектов, к примеру, тень текста, анимация, закругление, прозрачность и т.д. Раньше чтобы создать подобное приходилось прибегать к графическим редакторам, но теперь достаточно одних свойств CSS3. Давайте рассмотрим несколько интересных примеров тени блока созданных с помощью свойства box-shadow.

Перспектива.

HTML

CSS

Завернутые углы

HTML

CSS

Изгиб по вертикали

HTML

CSS

Склейка

HTML

CSS

Подняты уголки

HTML

CSS

Поднятый один уголок

HTML

CSS

Поднятый другой уголок

HTML

CSS

Горизонтальный изгиб

HTML

CSS

Слоистый

HTML

CSS

Сервисы для генерации CSS тени.

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

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

Свойства CSS3! Часть 1. text-shadow: 15 способов применения, кроссбраузерность

30 сентября 2010 0 Рубрика: AJAX, HTML&CSS, jQuery

« Предыдущая запись
Почему работать дома также прикольно как и отстойно? Вся правда о жизни фрилансеров
Следующая запись »
Программисты шутят

Рассмотрение CSS3 я хотел бы начать именно с text-shadow по нескольким причинам:

Среди браузеров, которые поддерживают это свойство, следующие:

  • Google Сhrome. Полная поддержка, начиная с версии 2.0
  • Mozilla Firefox. Полная поддержка, начиная с версии 3.1
  • Opera. Полная поддержка, начиная с версии 9.5

Рассмотрим простейший пример.

Первое значение (1px) — смещение тени по горизонтали. Принимает положительные и отрицательные значения. При положительном значении смещает тень вправо, при отрицательном – влево.
Второе значение (2px) — смещение тени по вертикали. Принимает положительные и отрицательные значения. При положительное значении смещает тень вниз, при отрицательном – вверх.
Третье значение (3px) — размытие тени. Когда размытие не нужно, параметр можно не указывать. Параметр поддерживается не всеми браузерами.
Четвертое значение (#000) — цвет тени. Параметр также можно не указывать, и в этом случае будет использоваться цвет текста.

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

Иными словами — наборы параметров всех теней последовательно перечисляются через запятую.

А вот теперь перейдём к практике и рассмотрим эффекты, которые можно создавать при помощи теней. Примеры будут демонстрироваться непосредственно кодом, а посему просматривать эффекты в Internet Explorer и древних браузерах не следует.

Способы применения text-shadow

1) Текст сдвинут вправо и вниз на 1px.

background: #C4C4C4; color: #FF0000;
text-shadow: 1px 1px #000;

2) Текст сдвинут влево и вверх на 1px.

background: #C4C4C4; color: #FFF; text-shadow: -1px -1px #888

3) Текст сдвинут на 1px вниз

background: #C4C4C4; color: #FFF; text-shadow: 0 1px #000

4) Размытие текста и сдвиг

background: #C4C4C4; color: #FFF; text-shadow: 2px 1px 5px #000

5) Небольшая выразительнеость текста (тени едва заметны)

background: #666; color: #FFF; text-shadow: 0 1px 1px #000

6) Свечение текста (цвет шрифта и фона одинаковы)

background: #000; color: #FFF; text-shadow: 1px 1px 6px #FFF

background: #666; color: #FFF; text-shadow: 0 0 3px #FFF

7) Призрачный текст

background: #000; color: #000; text-shadow: 1px 1px 4px #FFF

Одинаковый цвет фона и текста

background: #fff; color: #fff; text-shadow: 1px 0 5px #000

9) Дублированный текст

background: #fff; color: #000; text-shadow: 0 20px #000

10) Неоновое свечение Его можно имитировать как с помощью одной тени, так и с помощью нескольких

background: #fff; color: #000; text-shadow: 0 0 4px #88FF77;

background: #fff; color: #000; text-shadow: 0 0 4px #FF8877, 0 0 4px #FF8877;

При желании можно ещё одну тень добавить

Использование многослойных теней

Многослойные тени не везде работают, а в Хроме ещё они немного «деревянные». Сравните, к примеру, в Опере и в Хроме и Вы поймёте о чём речь.

background: #fff; color: #000;
text-shadow: 50px 10px 2px #4d9edb, -50px 5px 2px #0ac213, 20px -10px 2px #ff1919

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

background: #ccc; color: #ccc;
text-shadow: -1px -1px #fff, 1px 1px #333;

13) Вогнутый текст (или выпуклый, кто как увидит)

background: #ccc; color: #ccc;
text-shadow: 1px 1px #fff, -1px -1px #333;

Выпуклый и вогнутый текст достигается путём использования светлой и тёмной теней. Есть одно существенное ограничение — на мелких размерах шрифта работает не так, как хотелось бы =(

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

background: #C4C4C4; color: #FFF;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000

15) Горящий текст

background: #000; color: #000;
text-shadow: 0 0 4px #ccc, 0 -5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -18px 18px #f20;

Кроссбраузерный text-shadow

На jQuery был написан скрипт, который позволяет научить старые браузеры понимать эффект text-shadow. Для этого нужен jQuery, плагин (http://shublog.ru/files/js/jquery.textshadow.js) и следующая последовательность действий.

Указываем на CSS тени.

Подключаем библиотеку со скриптом

Теперь у тега p будет появляться тень даже в IE. Однако всё в том же ишаке (IE6, IE7) может появляться баг — горизонтальный скролл при обработке блочных элементов. Лечится просто прописыванием display:inline, или width:99%. Первый вариант даже лучше (напоминаю про баг блоков с float-ом и padding’ом в IE6).

В общем, использовать text-shadow не только можно, но и нужно, наплевав при этом на IE. Если не плевать на него, то используем скрипт jQuery. И вот Вам 100%-я кроссбраузерность. Так что вперёд к новым начинаниям!

Box-shadow: тень для элемента

Вы можете добавлять к элементам тень и изменять ее внешний вид с помощью CSS-свойства box-shadow. Этот стиль позволяет воплотить в жизнь интересные эффекты, например, объемность и трехмерность блока. Свойство поддерживается всеми современными браузерами. Исключение составляют IE8 и Opera Mini.


Свойство box-shadow: синтаксис

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

Рассмотрим по порядку, за что отвечает каждый параметр (слева направо):

  • Ключевое слово inset : параметр, который необязательно указывать; рисует тень внутри элемента.
  • Сдвиг по оси X: указывает степень смещения тени по горизонтали относительно элемента. Положительное значение означает сдвиг вправо, отрицательное — влево. Значение 0 означает, что тень без сдвига.
  • Сдвиг по оси Y: указывает степень смещения тени по вертикали. Положительное значение означает сдвиг вниз, отрицательное — вверх. Значение 0 — это тень без сдвига.
  • Радиус размытия: это степень размытия тени. Чем больше значение, тем более размыта тень. Если параметр не указан, используется значение по умолчанию — 0 . В таком случае тень будет идеально четкой.
  • Расширение: необязательный параметр, отвечающий за растяжение тени по обеим осям; чем больше значение, тем больше растяжение. Расширение работает только при наличии предыдущего параметра. Значение по умолчанию — 0 .
  • Цвет тени: с этим параметром всё понятно — он задает цвет тени элемента. Цвет по умолчанию — черный.

Примечание. Браузерам Android и более старым версиям iPhone Safari требуется префикс -webkit- для корректной работы CSS свойства box-shadow.

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

Примеры box-shadow

Чтобы вы лучше поняли всю силу и прелесть свойства CSS box-shadow, мы покажем несколько примеров, которые можно смело применять на практике. Данное свойство способно сильно преобразить обычный блок!

СSS3 Тени

С помощью CSS3 вы можете создавать теневые эффекты!

CSS3 эффект тени

С помощью CSS вы можете добавить тень к тексту и элементам.

В этой главе вы узнаете о следующих свойствах:

CSS тень текста

CSS свойство text-shadow применяет тень к тексту.

В простейшем случае можно указать только горизонтальную тень (2 пикселя) и вертикальную тень (2 пикселя):

Эффект тени текста!

Пример

Сначала, добавить цвет к тени:

Эффект тени текста!

Пример

Затем добавьте эффект размытия в тень:

Эффект тени текста!

Пример

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

Эффект тени текста!

Пример

Следующий пример показывает красную неоновую тень:

Эффект тени текста!

Пример

Несколько теней

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

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

Эффект тени текста!

Пример

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

Эффект тени текста!

Пример

Можно также использовать свойство text-shadow для создания простой границы вокруг текста (без теней):

Граница вокруг текста!

Пример

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

CSS свойство box-shadow устанавливает тень к элементам.

В простейшем случае можно указать только горизонтальную и вертикальную тень:

Пример

Сначала, добавить цвет к тени:

Пример

Сначала, добавить эффект размытия к тени:

Пример

Вы также можете добавить тени к псевдо-элементам ::before и ::after , чтобы создать интересный эффект:

Пример

#boxshadow <
position: relative;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding: 10px;
background: white;
>

#boxshadow img <
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
>

#boxshadow::after <
content: »;
position: absolute;
z-index: -1; /* скрыть тень изображение */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* половина оставшегося 30% */
height: 100px;
bottom: 0;
>

Карточки

Пример использования свойства box-shadow для создания красивх карточек:

CSS3 текст, свойство text-shadow

Рассмотрим несколько примеров использования свойства CSS3 text-shadow:

Общий синтаксис text-shadow:

Свойство text-shadow работает во всех новых браузерах, без вендорных префиксов, типа -moz и -webkit.

Даже IE можно научить понимать это свойство, нужно использовать Modernizr или аналоги.

Общий принцип:

text-shadow:1 2 3 4;

1.x-смещение
2.у-смещение
3.размытие
4.цвет

Пример 1:

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

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

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

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

Пример 2:

#text h1 <
color: rgba(0,0,0,0.6);
text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
>

Текст с жесткой тенью

Используется тень без размытия.

Пример 3:

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

Текст с двойной тенью

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

Пример 4:

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

Текст с тенью внизу

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

Пример 5:

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

CSS3 3D текст

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

Пример 6:

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

Еще один CSS3 3D текст

Более расширенный эфект.

Пример 7:

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

Еще пример вдавленного текста CSS3.

Чуть светлее фон, светлая тень ниже букв и темная выше.

Пример 8:

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;

CSS3 сияние текста.

Тень не смещаем, размываем посильнее и делаем ее белой.

Пример 9:

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

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

Очень красивый эфект.

Пример 10:

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 как видите можно очень красиво оформить заголовки и текст в статьях на Вашем сайте.

CSS Shadow Effects

С CSS вы можете создавать эффекты теней!

Эффекты тени CSS

С помощью CSS можно добавить тень к тексту и к элементам.

В этой главе вы узнаете о следующих свойствах:

Тень текста CSS

Свойство CSS text-shadow применяет тень к тексту.

В самом простом использовании, вы только определяете горизонтальную тень (2px) и вертикальную тень (2px):

Эффект тени текста!

Пример

Затем добавьте цвет к тени:

Эффект тени текста!

Пример

Затем добавьте эффект размытия в тень:

Эффект тени текста!

Пример


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

Эффект тени текста!

Пример

В следующем примере показана красная Неоновая тень свечения:

Эффект тени текста!

Пример

Множественные тени

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

В следующем примере показана красная и синяя Неоновая тень свечения:

Эффект тени текста!

Пример

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

Эффект тени текста!

Пример

Для создания простой границы вокруг некоторого текста (без теней) можно также использовать свойство text-shadow:

Граница вокруг текста!

Пример

CSS Box-свойство тени

Свойство CSS box-shadow применяет тень к элементам.

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

Пример

Затем добавьте цвет к тени:

Пример

Затем добавьте эффект размытия в тень:

Пример

Вы также можете добавить тени в:: before и:: After псевдо-элементы, чтобы создать интересный эффект:

Пример

#boxshadow <
position: relative;
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding: 10px;
background: white;
>

#boxshadow img <
width: 100%;
border: 1px solid #8a4419;
border-style: inset;
>

#boxshadow::after <
content: »;
position: absolute;
z-index: -1; /* hide shadow behind image */
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one half of the remaining 30% */
height: 100px;
bottom: 0;
>

Карты

Пример использования свойства box-shadow для создания бумажных карточек:

Игра теней / эксперименты со свойством text-shadow / css3

Сегодня мы поговорим о таком замечательном свойстве css3, как text-shadow. Оно, как можно понять из названия, добавляет самую обычную (ну не совсем) тень к тексту. Ее особенность в том, что тень можно регулировать — вылет тени, цвет и размытие. Это свойство уже присутствовало в css2, затем в css2.1 его выкинули и опять вернули в css3.

Ознакомимся с синтаксисом. Выглядит он так:

где 1px — смещение тени на 1px вправо (чтобы сместить влево, надо задавать отрицательное значение), 2px — смещение на 2px вниз (чтобы сместить вверх, надо задавать отрицательное значение), 3px — размытие тени (чтобы тень была четкой, присвойте значение 0) и #000 — цвет тени (можно задавать в формате rgba). Кстати, не забываем, что для одного элемента можно задавать несколько теней (через запятую: text-shadow:2px 2px 2px red, -2px -2px -2px blue;).

Вот и все. Особенно хочется отметить поддержку браузерами: google — 2+, mozilla — 3.1+, opera — 9.5+, safari — 1.1+, ie — 10+. То есть, с учетом распространенности старых «ослов» и только недавней версии Internet Explorer 10 Release Preview, об IE можно забыть). Но, адекватные браузеры (включая яндекс.браузер) это свойство поддерживают хорошо.

Примеры использования CSS тени текста

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

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

1. Базовая настройка

Создайте новый HTML-файл и добавьте в него следующий код HTML и CSS:

В раздел HTML добавьте тег

с классом text :

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

Теперь давайте зададим для текста атрибут text-shadow . Но сначала разберемся, какие значения принимает этот атрибут:

  1. 4px – смещение по оси X (горизонтальное);
  2. 3px – смещение по оси Y (вертикальное);
  3. 2px – значение размытия;
  4. #ccc – цвет.

Это задается следующим образом:

де цвет может быть представлен шестнадцатеричным кодом #ccc или RGBA (0,0,0,0.3); . В CSS мы можем применить к нашему тексту внутреннюю тень CSS следующим образом:

Представление в браузере этого текста с тенью будет выглядеть так:

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

2. Эффект оттиска

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

Используя код RGBA, вы можете установить непрозрачность цвета. Обратите внимание на то, что цвет текста имеет непрозрачность 60% (0.6) , а тени div CSS 10% (0.1) .

3. Эффект ретро-тени

Для ретро-тени не всегда нужно применять размытие. Возьмем, к примеру, эту ретро-тень:

4. Эффект двойной тени

Интересно, что вы можете добавлять более одной CSS тени шрифта. Это можно сделать следующим образом: text-shadow: shadow1, shadow2, shadow3; Давайте добавим две тени, одна — с цветом фона, а вторая немного темнее:

Фон у нас белый, так что другой цвет для него нам не нужен. В браузере эффект будет выглядеть так:

5. Эффект удаленной тени

Этот эффект основывается на функции определения нескольких красивых теней CSS. Ниже вы можете увидеть эффект с четырьмя тенями, отбрасываемыми вниз с различной степенью интенсивности:

6. 3D-эффект Марка Дотто

Следующий эффект был опубликован на MarkDotto.com, в нем используется 12 отдельных теней, чтобы создать реалистичный 3D-эффект:

Теперь посмотрите, как эти внутренние тени текста CSS выглядят в браузере:

7. Реалистичный эффект вырезанного текста Гордона Холла

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

Тень для текста (кроссбраузерное решение)

Даже самый зеленый дизайнер умеет делать тени в фотошоп. Тени придают объемность дизайну и сейчас это пользуется большой популярностью. Не исключение и тени для текстов, пунктов меню и заголовков. Достаточно вспомнить оформление интерфейсов от 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:

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

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

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

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

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

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

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

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

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

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

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

    задав элементу свойства display: block + высоту(height) или ширину (w >

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

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

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

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

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

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

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

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

  • несемантический код — лишний элемент, да еще и с дублированием текста скажется не лучшим образом на логичной структурности содержимого, СЕО оптимизации. Эту проблему можено решить с помощью 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

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

Blur определяет размер, дисперсию тени. Нормльная тень будет при значениях 1 или 2. При больших значения тень будет размытая (не желетльно использовать такие значения, т.к. влияет на скорость работы скрипта.

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

Color — имя или шестнадцатиричный код цвета тени.

Swap &mdahs; инвесия цветов основного текста и тени. В описании написано, что этот парметр предназанчен для особых эффектов, вроде рельефной или гравированной надписи. но я не въехал как можно такого добиться, с помощью этого праметра.

Выводы об использовании теней для текста в реальных проектах

Тени для текста уже сейчас применять можно, но следует помнить об IE, который не так хорошо с ними дружит. Для IE есть два вараинта решения:

  1. закрывать глаза на неполное соотвествие дизайна теней в IE
  2. добиваться требуемого результата с помощью javascript

На каком варианте остановиться команде разработчиков и заказчику — дело сугубо индивидуальное. Мое мнение — не следует из-за IE отказываться от прекрасных новых возможностей.

Илон Маск рекомендует:  Шаблон сайта портфолио HTML, CSS, 1 страница
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL