Webmasters.BY

Главная Статьи Верстка сайтов Текстовые CSS3-эффекты
Текстовые CSS3-эффекты
Рейтинг пользователей: / 2
ХудшийЛучший 
10.11.2011 12:23

css3 text effect

В данной статье вы увидите как использовать возможности CSS3 для создания красивых текстовых эффектов. Использованное здесь свойство text-shadow поддерживается всеми основными браузерами, кроме Internet Explorer.

Online-пример

Синтаксис

Свойство text-shadow может создавать одну или несколько теней для текста. Список свойст записывается через запятую,  каждое свойство содержит 2 или 3 значения,  и дополнительное - цвет. Пропущенные значения равны 0.

Горизонтальные и вертикальные тени: могут иметь значения с + или -. Они также могут иметь значение 0.

Размытие радиуса: Представляет собой эффекта размытия, если значение равно нулю либо не было указано, то тень не будет размыта.

Цвет: это цвет тени. Если он не представлен, то цвет тени будет использовать цвет текста.

text-shadow: horizontal-shadow vertical-shadow blur color;

Эффект подсветки

css3 glow effects

.glow {
 color:#fff;
 text-shadow:0px 0px 20px #00c6ff;
}

Эффект врезки

css3 inset effects

.inset {
 color:#202020;
 text-shadow: 0px 2px 3px #777;
}

Эффект вдавливания

css3 stroke effects

.stroke {
 color:#202020;
 text-shadow: 1px 1px 0px #999, -1px -1px 0px #999;
}

3D эффект

css3 3D effects

.3deffects {
 color:#202020;
 text-shadow: 1px 1px 0px #999,
 2px 2px 0px #999,
 3px 3px 0px #999,
 4px 4px 0px #999,
 5px 5px 0px #999;
}

Online-пример

Перевод

Добавить комментарий


Защитный код
Обновить

Если вы заметили ошибку в тексте новости, пожалуйста, выделите её и нажмите Ctrl+Enter

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим форумом
Обновлено 11.11.2011 13:41
 

Апельсин-1

Голосование

Ваш любимый html-редактор?

Новые файлы

Шпаргалка по HTML5 Canvas

Archive - бесплатный кириллический шрифт

Шпаргалка по HTML5 атрибутам обработчиков событий

См. также

activecloud.ru

TisRef

Баннер

Видеоуроки

Система Orphus

Кто онлайн

Сейчас 33 гостей онлайн

Комментарии

Статистика
Webmasters.BY © 2008 - 2012