Горизонтальная навигация с градиентной заливкой
Автор: Admin Категория: Меню навигации Теги: Горизонтальное меню, CSS3, Градиент Дата: 5-06-2013, 23:14
Несколько примеров горизонтальной навигации с градиентной заливкой, никаких картинок только CSS. Идея реализации попалась мне ещё года два назад, но тогда это было неактуально так как браузеры такую реализацию поддерживали очень криво и в массы такую навигацию не пустишь. Теперь это всё хорошо работает и пришло время массового использования этой техники.Меню реализовано маркированным списком, код валидный HTML5 корректно работает во всех современных браузерах. Весь эффект реализован CSS3 свойством background-image: linear-gradient () - линейный градиент и box-shadow - тень блока.
Я подготовил шесть примеров навигаций разных цветов что бы можно было выбрать подходящее и сразу использовать. Код брать непосредственно в примере (Ctrl+U)
Примеры:
Пример градиент меню чёрное
Пример градиент меню синее
Пример градиент меню зелёное
Пример градиент меню коричневое
Пример градиент меню фиолетовое
Пример градиент меню жёлтое
Не забывайте ссылаться на MegaWeb.su!
Понравилась новость Горизонтальная навигация с градиентной заливкой на MegaWeb.su? Сохрани в закладках или распечатай!
Информация
Если копируете мой материал - будьте добры оставлять ссылку на источник MegaWeb.su пожалуйста, или поставьте на свой сайт мою кнопочку.
Уважайте чужой труд! И Вам хорошо - и мне приятно, это стимулирует дальнейшее развитие проекта!
Другие новости по теме
Обратите внимание, возможно Вас заинтересуют другие публикации, похожие на Горизонтальная навигация с градиентной заливкой из категории Меню навигации
- Меню навигации ⋙ Горизонтальное меню CSS3 мутный текст
- Основы / CSS ⋙ Текст с тенью css3 text-shadow примеры
- Меню навигации ⋙ CSS3 горизонтальное выпадающее меню в стиле web 2.0
- Меню навигации ⋙ CSS3 увеличение картинки при наведении
- Фотошоп ⋙ Градиент для сайта в фотошопе урок
- Меню навигации ⋙ Горизонтальная раздвижная CSS3 навигация
- Меню навигации ⋙ Универсальное CSS3 меню одна кнопка замечательный пример CSS3 анимации
- Меню навигации ⋙ Стильное горизонтальное меню навигации для сайта с применением CSS3 анимации
- Основы / CSS ⋙ Обзор основных CSS3 свойств Меню аккордеон на CSS3 вертикальное
- Фотошоп ⋙ Вдавленный текст Photoshop CS5 RUS
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
