HTML и CSS, JavaScript

CSS 3 text-shadow. Кроссбраузерное решение

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

CSS 3 свойство text-shadow поддерживается следующими браузерами:

  • Safari (3.0 и выше) — поддерживает, без размытия;
  • Opera (9.5 и выше) — поддерживает;
  • Firefox (3.1 и выше) — поддерживает;
  • Chrome (2 и выше) – поддерживает;
  • IE не поддерживает ни одна версия — Благодарности Майкрософту!;

Применение свойства text-shadow

Если использовать тени, то по мне только для заголовков, рассмотрим простейший пример:

  1. h1 { text-shadow: 2px 3px 1px #ddd; }

Пример

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

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

  1. h1 { text-shadow: 2px 3px 1px #ddd, 2px 2px red, 1px 1px 10px green; }

Пример

Кроссбраузерное решение

Существует способ заставить браузеры поддерживать это свойство. Для этого воспользуемся популярной JavaScript библиотекой – jQuery.

Для начала опишем стили CSS:

  1. h1,  h2{ text-shadow: 2px 2px 2px #ddd;}

Теперь поможем другим браузерам понять это свойство. Подключаем библиотеку jQuery:

  1. <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

После подключаем плагин jQuery с необходимым обьектом textshadow:

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

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

  1. <script type="text/javascript">
  2. // <![CDATA[
  3.     jQuery(document).ready(function(){
  4.         jQuery("h1, h2").textShadow();
  5.     })
  6. // ]]>
  7. </script>

В данном примере выбраны элементы: h1 и h2. Именно у них и появится тень.

Остаётся единтсвенная проблема и как всегда она связана с IE 6, 7. В этих браузерах появляется горизонтальный скролл при обработке блочных элементов.

Лечение – блочным элементам поставить display:inline; или width:99%;

Библиотека jQuery — http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js
Плагин textshadow — http://cssclub.ru/samples/jquery.textshadow.zip

Похожие статьи

, .
23 сентября 2009, 15:29 Дозморов Игорь Комментарии: 6 Обратная ссылка

RSS Комментарии (6)

Оставить комментарий

  • Vegasy написал 29 сентября 2009, 15:29

    =)))

  • Дозморов Игорь написал 20 октября 2009, 15:29

    Товарищ Билалов явно сильно переживает, читая мои посты. И волнуют его всегда в основном копипаст, которым он, товарищ Билалов, тоже не особо то гнушается и говнобраузеры, в которых паталогически всё томозит и которые он никак не может забыть… Конечно его можно понять, наверняка говнобраузеры вызвали сильное моральное потрясение у Рената. Вот и пишет он, Билалов Ренат, посты в свой блог. Другой бы обошёлся простым комментом, но Ренат не из таких!

    Хочу также добавить, что матчасть я немного умею ))) а учить её, по крайней мере, в рамках вышенаписанного поста невижу смысла.

  • Максим С.Ю. написал 9 апреля 2010, 15:29

    Щас новый IE 9 вышел вроде, так он наверное поддерживает css 3, значит будет показывать .

  • RodgerFox написал 25 апреля 2010, 15:29

    Огого, IE9 будет практически все поддерживать. и не уступит фф и хрому =\
    p.s. все равно не люблю ie за годы мучения с ним.

  • Виталий написал 25 мая 2010, 15:29

    Ахуенно. Благодарен.

Трекбеки (1)

Оставить комментарий