Горизонтальное меню 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/

---

Вернуться назад