Печать

CSS3 - text-shadow

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

  • Google Сhrome. Полная поддержка, начиная с версии 2.0
  • Mozilla Firefox. Полная поддержка, начиная с версии 3.1
  • Opera. Полная поддержка, начиная с версии 9.5
  • Safari. Неполная поддержка с версии 1.0, с версии 4.0 - полная (добавлена поддержка нескольких теней). Вроде бы в старых версиях была проблема размытия.

textshadow

 

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

p { text-shadow: 1px 2px 3px #000; }

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

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

p { text-shadow: 1px 1px, 2px 2px #ccc, 3px 3px 1px #000; }

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

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

 

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

Простые примеры

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

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

Тестирование text-shadow

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

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

Тестирование text-shadow

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

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

Тестирование text-shadow

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

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

Тестирование text-shadow

 

Некоторые эффекты

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

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

Тестирование text-shadow

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

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

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

Тестирование text-shadow
Тестирование text-shadow

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

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

Тестирование text-shadow

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

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

Тестирование text-shadow

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

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

Тестирование text-shadow

 


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;

Тестирование text-shadow
Тестирование text-shadow

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


 

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

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

11) Эхо теней

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

Тестирование text-shadow

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

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

Тестирование text-shadow

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

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

Тестирование text-shadow

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


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

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

Тестирование text-shadow

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

 

 

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

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

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

p { text-shadow: 1px 1px #000;}

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

<script src="/js/jquery.js" type="text/javascript"></script>
<script src="/js/jquery.textshadow.js" type="text/javascript"></script>

Добавляем обработчик

<script type="text/javascript">
// <![CDATA[
    jQuery(document).ready(function(){
        jQuery("p").textShadow();
    })
// ]]>
</script>

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

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

Интересная статья? Поделись ей с другими: