Текст с тенью css3 text-shadow примеры

Автор: Admin    Категория: Основы / CSS    Дата: 7-06-2011, 00:43
Текст с тенью css3 text-shadow примеры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

Если у кого есть интересные примеры - выкладывайте, добавим в коллекцию.
Версия для печати
  • 100
     Просмотров: 7 850      Комментариев: 2   

Понравилась новость Текст с тенью css3 text-shadow примеры на MegaWeb.su? Сохрани в закладках или распечатай!


Информация

Внимание!

Если копируете мой материал - будьте добры оставлять ссылку на источник MegaWeb.su пожалуйста, или поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!

№ 2 Автор: Admin 14 июня 2011 15:14

 Вот такой я - Admin

Admin
Администраторы
комментариев
публикаций

Статус: Пользователь offline
Цитата: Lexus
Вот это подборочка, спасибо!!!

Рад что моя подборка примеров теней вам пригодилась.


----------------------------------------------------
Пойми что тебе нравится и сделай это своей работой!

  • Нравится
  • 0
    

№ 1 Автор: Lexus 14 июня 2011 13:09

 Вот такой я - Lexus

Lexus
Гости
комментариев
публикаций

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

  • Нравится
  • 0
    

Информация

Внимание!

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Лента новостей
RSS 2.0

Лента новостей сайта megaweb.su

Блок программ Популярный софт

Коды блока "Популярный софт":

Фиксированный
windows-1251

код блока 1

<script type="text/javascript" src="/softblok/softblok.js" charset="windows-1251"></script>

Резиновый
windows-1251

код блока 2

<script type="text/javascript" src="/softblok/softblok2.js" charset="windows-1251"></script>

Резиновый
UTF-8

код блока 3

<script type="text/javascript" src="/softblok/softblok1.js" charset="utf-8"></script>

Глобус