Меню для блоггер с фоном градиента



Всем здравствуйте. В этой статье поговорим об актуальной теме-меню для наших блогов. Сегодня хочу предложить простое горизонтальное и вертикальное меню с фоном градиента. Пример меню горизонтального:
Стили CSS, фон градиента для оформления меню

Фон градиент каждый сможет оформить или выбрать под свой дизайн, и меню в Вашем блоге будет отличаться от всех других. А сейчас начнем создавать меню. Я буду использовать обычные ссылки в контейнере nav без маркированного списка ul и пунктов li<a href = "#">Главная</a>


<nav>
 <a href = "#">Главная</a>
 <a href = "#">Контакты</a>
 <a href = "#">Карта блога</a>
</nav>

Добавим оформление, используя  стили CSS

<style>
nav a{
display:block;
}
nav a{
float: left; *// блочные свойства ссылок
font-size:14px; *// размер шрифта
text-decoration: none;
border-right: 1px solid #000; *// цвет разделителя справа
padding: 8px;
background:linear-gradient(to right, rgba(206,220,231,1) 0%,rgba(89,106,114,1) 100%); *// фон градиент
border-bottom:2px solid rgba(206,220,231,1); *// размер, форма и цвет нижней границы
border-radius:px; *//радиус скругления углов
}
nav a:hover{
background:rgba(167,199,220,1); *// фон при наведении
}
a:link{
color:#fff; *// цвет ссылок
}
</style>


Для вертикального меню удалите с кода CSS свойство float: left; пример:

Как формить, используя стили CSS, выбор фона на сайте генератор фона CSS

Цвет шрифта ссылок можно настроить в конструкторе тем (дизайнер шаблонов прежнее название). С кода CSS стилей удалить строку a:link{color:#fff;}

Для любителей плавающего меню, зафиксировать, добавим свойство  fixed; 

nav{
position: relative;
width:100%;
z-index: 5;
border:1px solid rgba(206,220,231,1);
position: fixed; top: 0px; left:0px;
}

Как закрыть ссылки от индексации и открыть в новом окне читайте в статье Горизонтальное фиксированное многоуровневое меню для блоггер;

При желании можете добавить другие эффекты оформления, нужно минимум знаний CSS. Также фоном градиент можно оформить фон шапки, сайдбар, основной фон и футер блога. Пример сходите посмотреть в тестовый блог.

Рекомендую посмотреть статью Как подобрать совместимость фонового цвета; и воспользоваться инструментом Генератор цветового кода

Хороший сервис CSS градиент генератор

настроить свой фон градиент или выбрать из предложенных сервисом фонов.

На выбор разные фоны градиент или настройте свой фон, тут уже зависит от фантазии. На этом у меня вся информация. Все вопросы в комментариях или работает форма контактов. Всего доброго.

Читайте также:

TEXT.RU - 100.00%


Автор статьи ✎ Olga Protasova Выпуск ✹ 3/18/2017 Ярлыки ►


Открыть комментарии →

0 коммент. :

Отправить комментарий


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *