Горизонтальное меню CSS3 мутный текст

Автор: Admin    Категория: Меню навигации    Теги:  Горизонтальное меню, CSS3, Мутный текст    Дата: 7-09-2012, 18:43
Горизонтальное меню CSS3 мутный текстЭффект мутного текста на CSS3 в горизонтальной навигации

Эффект мутного текста на CSS3 в горизонтальной навигации
Иногда пользователи задают вопросы - как реализовать мутный текст без применения картинок и скриптов.
Да очень просто, с помощью CSS3 свойств: тень text-shadow и полупрозрачного цвета rgba.

Формат RGBA похож по синтаксису на RGB, но включает в себя альфа-канал, задающий прозрачность элемента. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

text-shadow добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия.

И чтобы получить мутный текст ему нужно уменьшить прозрачность цвета, например так:

color: rgba(0, 128, 128, 0.3);


И добавить размытой тени, например так:

text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);


А при наведении сделать текст полностью непрозрачным и уменьшить размытость тени или вообще тень убрать, например так:

color: rgba(0, 0, 0, 1);
text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.5)


Вот и всё!

Всё это можно посмотреть в примере, который я подготовил, это простая горизонтальная менюшка, кнопки меню разноцветные - это для наглядной демонстрации эффекта тени и размытого текста на фонах разных цветов.

Код меню валидный HTML5 меню корректно работает во всех современных браузерах кроме IE .

Посмотреть Горизонтальное меню CSS3 мутный текст от http://megaweb.su/

Версия для печати
  • 100
     Просмотров: 3 700      Комментариев: 0   

Понравилась новость Горизонтальное меню CSS3 мутный текст на MegaWeb.su? Сохрани в закладках или распечатай!


Информация

Внимание!

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

Другие новости по теме

Обратите внимание, возможно Вас заинтересуют другие публикации, похожие на Горизонтальное меню CSS3 мутный текст из категории Меню навигации

Информация

Внимание!

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

Лента новостей
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>

Глобус