Google-Translate Войти на сайт
 
МЕНЮ САЙТА
РАЗДЕЛЫ
Уроки Ucoz [13]
Уроки Borda.ru [13]
Уроки Photoshop [32]
Уроки Adobe Illustrator [1]
Уроки HTML и CSS [13]
JAVA-Скрипты [15]
Веб-дизайн [17]
Создание и продвижение сайта [92]
Интересные статьи [194]
ВЕЛОЛЮБИТЕЛЯМ!
Ярмарка Мастеров - ручная работа, handmade
КОНТАКТЫ
ICQ: 177700574
skype: k-dezign
e-mail: info@k-dezign.ru
mail-агент: k-dezign@mail.ru
Мы Вконтакте
НАШИ ДРУЗЬЯ
Быстрая и недорогая раскрутка сайта
Регистрация в каталогах
Сибирский рубеж - автоэмали оптом и в розницу. Подбор автоэмалей PROFIX.
Хорошие новости о животных
WOlist.ru - каталог качественных сайтов Рунета
FONWEB.RU - Веб-дизайн
Интересные статьи
Клипарт на прозрачной основе


ЗАРЕГИСТРИРОВАТЬ СВОЙ САЙТ
СТАТИСТИКА
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Главная | Полезные статьи
Главная » Статьи » Уроки HTML и CSS

Кроссбраузерный text-shadow эффект с помощью CSS
Посещая разные интернет ресурсы на некоторых вы наверно видели эффект отбрасывания текстом тени, или эффект вдавленного текста. Возможно на некоторых сайтах текст представляет собой картинку, а эффект отбрасывания тени сделан в фотошопе. Но уверен что точно такого эффекта можно добиться с помощью CSS стилей и прочитав эту статью вы узнаете кроссбраузерное решение этой задачи.

Стили для Safari 1.1, Firefox 3.5+, Opera 9+ и Chrome

Все современные браузеры за исключением догадайтесь какого... конечно же ИЕ, поддерживают этот стиль и правильно его отображают. .shadow {text-shadow: #666666 5px 5px 5px;}

Текст с тенью в современных браузерах

Стили только для Internet Explorer

.shadow {height: 1em;filter:Shadow(Color=#666666,Direction=135,Strength=5);}

Текст с тенью только в IE/Win

Стили для Internet Explorer и Safari и других современных браузеров

.shadow{text-shadow: #666666 5px 5px 5px;height: 1em;
filter: Shadow(Color=#666666, Direction=135, Strength=5);}

Text-shadow в IE Safari и в современных браузерах

Стили для ранних версий Мозиллы и других браузеров которые понимают псевдоэлемент :before

.shadow {
  line-height: 2em;
  white-space: nowrap;}
.shadow:before {
  display: block;
  margin: 0 0 -2.12em 0.15em;
  padding: 0;
  color: #666666;
}

Text-shadow для Мозиллы и тех которые понимают псевдоэлемент :before

Демонстрация этого примера тут неработает, потому что :before не не работает в inline стилях а только в css

Окончательный кроссбраузерный CSS Text-shadow

.shadow {
  height: 1em;
  filter: Shadow(Color=#666666, Direction=135, Strength=5);
  line-height: 2em;
  white-space: nowrap;}
.shadow:before {
  display: block;
  margin: 0 0 -2.12em 0.15em;
  padding: 0;
  color: #666666; }
html*.shadow {
[color:red;text-shadow: #666666 5px 5px 5px; ]color:auto; }
.dummyend[id]{clear: both;}
html*.shadow:before {[color:red;display: none; ]color:auto;}
.dummyend[id]{clear: both;}

Конечно использование такого рода хаков сделает невозможной валидацию вашего CSS, поэтому для сторонников верстки без хаков предлагаю использовать работающий только в современных браузерах валидный стиль:

.shadow {text-shadow: #666666 5px 5px 5px;}

А для тех кто хочет поэкспериментировать с различными цветами и вариантами отбрасывания текстом тени вот ссылочка на онлайн генератор валидного text-shadow эффекта.


Категория: Уроки HTML и CSS | Добавил: Белая_Кошка (09.08.2012)
Просмотров: 3330 | Теги: как сделать тень от текста, текст с стенью | Рейтинг: 0.0/0


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Веб-студия "К-Дизайн" © 2009-2017
Контакты
ICQ: 177700574
skype: k-dezign
e-mail: info@k-dezign.ru
mail-агент: k-dezign@mail.ru

Счетчики
Яндекс цитирования
Работа
Создание сайтов и форумов
Порядок работы с заказами
Порядок оплаты заказов
Бонусы
Бесплатные кнопки для форумов
Бесплатные дизайны для форумов
Готовые шаблоны для сайтов
Уроки фотошоп
Уроки CMS Ucoz