Текст с тенью css3 text-shadow примеры
7-06-2011, 00:43. Разместил: Admin
CSS3 text-shadow 40 примеров текста с теньюКак только современные браузеры начали боле менее корректно поддерживать свойство text-shadow тень текста на css3 - сразу же интерес к этому свойству вырос многократно. Достигаемый эффект действительно очень стильный, разнообразие теней ограничивается лишь фантазией веб мастера.
Пришло время и мне выложить свою "коллекцию" теней.
CSS3 свойство text-shadow добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно текста и радиус размытия. Свойство text-shadow может работать совместно с псевдоэлементами :first-letter(определяет стиль первого символа в тексте элемента, к которому добавляется) и :first-line(задает стиль первой строки форматированного текста).
Opera 9.5 поддерживает не более шести теней. Позже, это ограничение было снято. Обратите внимание, что опера окрашивает тени в неправильном порядке. Это было исправлено в Opera 10.5. Opera поддерживает максимум 6-9 параметров тени. Повышение этого значения, а также увеличение радиуса размытия свыше 100px сказывается на производительности браузера. Opera версии 9.5-10 использует отображение нескольких теней, как в CSS 2.
Safari до версии 3.2 включительно поддерживает только один параметр тени, остальные игнорируются. В версии 4.0 работает уже множество теней.
Браузер Internet Explorer ни в одной версии не понимает свойство text-shadow. Взамен используется свойство filter: Shadow(параметры). К примеру, следующая конструкция {filter: Shadow(Color=#666666, Direction=45, Strength=4);} задает цвет тени (#666666), её направление (45° от вертикали) и величину смещения (4 пиксела).
Пример написания: text-shadow: 1px 2px 3px #999;
Где:
1px - сдвиг по x
Смещение тени по горизонтали относительно текста. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр.
2px - сдвиг по y
Смещение тени по вертикали относительно текста. Также допустимо использовать отрицательное значение, которое поднимает тень выше текста. Обязательный параметр.
3px - радиус
Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0. Учтите, что алгоритм сглаживания в браузерах обычно разный, поэтому вид тени может несколько различаться в зависимости от заданных параметров сглаживания.
#999 - цвет
Цвет тени в любом доступном CSS формате. По умолчанию цвет тени совпадает с цветом текста. Необязательный параметр.
Можно применить значение none - Отменяет добавление тени.
Допускается указывать несколько параметров тени, разделяя их между собой запятой. В CSS 3 учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке — в самом низу. В CSS 2 порядок наоборот: первая тень размещается в самом низу, а последняя на самом верху.
У меня скопилось 40 разных примеров применения text-shadow тень текста на css3, шрифт может не самый удачный, но демонстрация получилась замечательная. Примеры корректно работают только в современных браузерах последних версий. Стоит отметить что все браузеры немного по разному отображают тени, тени хуже не становятся, а, скорее наоборот, каждый браузер придаёт тени свою неповторимую индивидуальность. В каком браузере тени смотрятся красивее - даже не знаю, поэкспериментируйте сами.
Все примеры живые, не картинки, поэтому можно посмотреть как работает тень в разных браузерах.
Смотреть примеры text-shadow тень текста на css3
Если у кого есть интересные примеры - выкладывайте, добавим в коллекцию.
Вернуться назад