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



Всем здравствуйте. В этой статье поговорим об актуальной теме-меню для наших блогов. Сегодня хочу предложить простое горизонтальное и вертикальное меню с фоном градиента. Пример меню горизонтального:
Стили 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 градиент генератор

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

Ссылка на сайт    www.colorzilla.com/gradient-editor

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

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

TEXT.RU - 100.00%





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


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

0 коммент. :

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


Ув. читатели! Для вставки HTML кода в комментарии, воспользуйтесь Генератором HTML кода


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

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

Имя

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

Сообщение *