Горизонтальная навигация с градиентной заливкой

Автор: Admin    Категория: Меню навигации    Теги:  Горизонтальное меню, CSS3, Градиент    Дата: 5-06-2013, 23:14
Горизонтальная навигация с градиентной заливкой Несколько примеров горизонтальной навигации с градиентной заливкой, никаких картинок только CSS. Идея реализации попалась мне ещё года два назад, но тогда это было неактуально так как браузеры такую реализацию поддерживали очень криво и в массы такую навигацию не пустишь. Теперь это всё хорошо работает и пришло время массового использования этой техники.

Меню реализовано маркированным списком, код валидный HTML5 корректно работает во всех современных браузерах. Весь эффект реализован CSS3 свойством background-image: linear-gradient () - линейный градиент и box-shadow - тень блока.

Я подготовил шесть примеров навигаций разных цветов что бы можно было выбрать подходящее и сразу использовать. Код брать непосредственно в примере (Ctrl+U)

Примеры:
Пример градиент меню чёрное
Пример градиент меню синее
Пример градиент меню зелёное
Пример градиент меню коричневое
Пример градиент меню фиолетовое
Пример градиент меню жёлтое

Не забывайте ссылаться на MegaWeb.su!
Версия для печати
  • 100
     Просмотров: 13 305      Комментариев: 2   

Понравилась новость Горизонтальная навигация с градиентной заливкой на MegaWeb.su? Сохрани в закладках или распечатай!


Информация

Внимание!

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

№ 2 Автор: Admin 18 июня 2013 13:13

 Вот такой я - Admin

Admin
Администраторы
комментариев
публикаций

Статус: Пользователь offline
Цитата: morff
Меню супер!Автору большое спасибо.

На здоровье, мне тоже нравится smile
Цитата: morff
Поменял только цвет под свой сайт.Пример:wotrandom.ru

Симпатично вписалось в дизайн.


----------------------------------------------------
Пойми что тебе нравится и сделай это своей работой!

  • Нравится
  • 0
    

№ 1 Автор: morff 18 июня 2013 12:59

 Вот такой я - morff

morff
Гости
комментариев
публикаций

Статус:
Меню супер!Автору большое спасибо.Поменял только цвет под свой сайт.Пример:wotrandom.ru

  • Нравится
  • 0
    

Информация

Внимание!

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

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

Глобус