CSS 3 text-shadow. Кроссбраузерное решение
С помощью CSS-свойства text-shadow можно без труда поставить тень для любого текста на странице. Эффект очень простой, но всё же заслуживает нашего внимания.
поддерживается следующими браузерами:
- Safari (3.0 и выше) — поддерживает, без размытия;
- Opera (9.5 и выше) — поддерживает;
- Firefox (3.1 и выше) — поддерживает;
- Chrome (2 и выше) – поддерживает;
- IE не поддерживает ни одна версия — Благодарности Майкрософту!;
Применение свойства text-shadow
Если использовать тени, то по мне только для заголовков, рассмотрим простейший пример:
-
h1 { text-shadow: 2px 3px 1px #ddd; }
Пример
- Первое значение (2px) — смещение тени по горизонтали. При положительном значении смещает тень вправо, при отрицательном – влево;
- Второе значение (3px) — смещение тени по вертикали. При положительное значении смещает тень вниз, при отрицательном – вверх;
- Третье значение (1px) — размытие тени. Параметр не обязателен и поддерживается не всеми браузерами.
- Четвертое значение (#ddd) — цвет тени. Параметр не обязателен, по-умолчанию используется цвет текста
Стоит заметить, что свойство text-shadow позволяет создавать множественные тени. Для этого нужно через запятую указать дополнительный ряд значений, например:
-
h1 { text-shadow: 2px 3px 1px #ddd, 2px 2px red, 1px 1px 10px green; }
Пример
Кроссбраузерное решение
Существует способ заставить браузеры поддерживать это свойство. Для этого воспользуемся популярной JavaScript библиотекой – jQuery.
Для начала опишем стили CSS:
-
h1, h2{ text-shadow: 2px 2px 2px #ddd;}
Теперь поможем другим браузерам понять это свойство. Подключаем библиотеку jQuery:
-
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
После подключаем плагин jQuery с необходимым обьектом textshadow:
-
<script src="js/jquery.textshadow.js" type="text/javascript"></script>
Добавляем обработчик:
-
<script type="text/javascript">
-
// <![CDATA[
-
jQuery(document).ready(function(){
-
jQuery("h1, h2").textShadow();
-
})
-
// ]]>
-
</script>
В данном примере выбраны элементы: h1 и h2. Именно у них и появится тень.
Остаётся единтсвенная проблема и как всегда она связана с IE 6, 7. В этих браузерах появляется горизонтальный скролл при обработке блочных элементов.
Лечение – блочным элементам поставить display:inline; или width:99%;
Библиотека jQuery —
Плагин textshadow —
RSS Комментарии (10)
Оставить комментарий
=)))
Товарищ Билалов явно сильно переживает, читая мои посты. И волнуют его всегда в основном тоже не особо то гнушается и говнобраузеры, в которых паталогически всё томозит и которые он никак не может забыть… Конечно его можно понять, наверняка говнобраузеры вызвали сильное моральное потрясение у Рената. Вот и пишет он, Билалов Ренат, посты в свой блог. Другой бы обошёлся простым комментом, но Ренат не из таких!
Хочу также добавить, что матчасть я немного умею ))) а учить её, по крайней мере, в рамках вышенаписанного поста невижу смысла.
Щас новый IE 9 вышел вроде, так он наверное поддерживает css 3, значит будет показывать .
Огого, IE9 будет практически все поддерживать. и не уступит фф и хрому =\
p.s. все равно не люблю ie за годы мучения с ним.
Ахуенно. Благодарен.
Тени в IE
filter: Shadow(color=#666666,direction=135,strength=3);
К сожалению Micro$oft как всегда впереди планеты всей и потому 9-ка как и все остальные их детища ничего не поддерживает:(
IE 9 не поддерживает – Благодарности Благодарности…… МайкрОСОФТ!
ржал над этой шуткой минут 20 гдето )) спс за юмор я это ценю
Трекбеки (1)