ZorNet.Ru — сайт для вебмастера » HTML и CSS » Оригинальное оформление меню для сайта

Оригинальное оформление меню для сайта

Оригинальный стиль дизайна, который выполнен для навигаций по сайту, где мы видим вертикальное меню, что расположено на основной странице сайта. Это безусловно вариант для универсального стиля сайта или блога, но также считаю его можно поставить под вновь созданную страницу, где реально закрепить как работающею навигацию по сайту. Что все запросы реально прописаны, также выставлен оттенок цвета, что идет в двух вариантах, что можно построить красивый вид градиента.

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

Как пример по изменению цветовой палитры:

Установка:

HTML

Код

<div class="elementa-menyu">
<div class="obrabotka">
<div class="kasus-anadem">
</div>
<ul class="navigan">
<li class="kategoria">Главная страница</li>
<li class="kategoria">Каталог файлов</li>
<li class="kategoria">Раздел скриптов</li>
<li class="kategoria">Анимация на CSS3</li>
<li class="kategoria">Раздел для форума</li>
<li class="kategoria">Обратная связь</li>
</ul>
<div class="navigata-sionaya"></div>
</div>
</div>

CSS

Код

.elementa-menyu {
font-family: Lato, Sans-serif
background: #fff;
margin: 0;
width: 500px;
height: 500px;
padding: 10px;
perspective: 1500px;
}
.obrabotka {
  margin: 198px auto;
  position: relative;
  background: #872fc7;
  background: linear-gradient(to bottom, hsl(110, 86%, 39%) 0%, hsl(28, 78%, 33%) 40%);
  width: 312px;
  height: 374px;
  border-width: 20px 0;
  border-style: solid;
  border-color: #dcdcdc;
  color: #f5f5f5;
  transform-style: preserve-3d;
  box-shadow: 0 0 20px 0 #757171;
  transform: translateY(-160px) rotateX(35deg) rotateZ(35deg);
}
.obrabotka:before {
content: '';
position: absolute;
height: 30px;
width: 300px;
top: 370px;
left: 0px;
transform: rotateX(90deg) translateY(-15px) translateZ(15px);
background: #fff;
}
.obrabotka:after {
content: '';
position: absolute;
height: 350px;
width: 30px;
top: -20px;
right: -30px;
transform: rotateY(90deg) translateZ(-15px) translateX(15px);
border-width: 20px 0;
border-style: solid;
border-color: #fff;
background: #fff;
}
.kasus-anadem {
padding: 15px 0px 15px 20px;
width: 100%;
}
.navigan {
position: relative;
min-height: 40px;
list-style: none;
padding: 0;
margin: 0;
font-weight: bold;
font-size: 20px;
transform-style: preserve-3d;
}
.kategoria {
  margin: 0;
  padding: 12px 0 12px 26px;
  outline: 0 none;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(1px);
  z-index: 1;
}
.kategoria:hover {
  box-shadow: inset 0 0 80px 0 rgba(189, 189, 189, 0.55);
  cursor: pointer;
}
.navigata-sionaya {
position: absolute;
background: transparent;
top: -30px;
left: 0;
width: 300px;
height: 360px;
transform: translateZ(-29px);
box-shadow: 15px 15px 11px -20px #5a5555;
}

Здесь лучше изначально посмотреть демонстрацию, и там навести курсор, чтоб оценить hover эффект, но и самостоятельно поработать с дизайном, так как можно красиво вывести каждую категорию, а не делать навигацию под плоский стиль, как основном можно наблюдать на многих ресурсах.

Демонстрация

10 Июля 2020 Загрузок: 2 Просмотров: 895 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0