» »

Меню сайта в оригинальном стиле в CSS

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

Установка:

Вставляем код в новый блог

HTML

Код
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
  <a href="#">Other</a>
</nav>

CSS

Код
nav {
  padding-top: 20px;
  background: url('http://zornet.ru/CSS-ZORNET/ASABAG/Vapelan/rope.png') top left repeat;
  background-size: 125px;
}

a {
  display: block;
  position: relative;
  text-align: center;
  background: purple;
  color: #FFF;
  margin: 25px 0;
  padding: 10px 0;
  font-size: 20px;
  font-family: cursive;
  text-decoration:none;
  border: 2px dashed pink;
  outline: 6px solid purple;
  backface-visibility: hidden;
  transition: transform 0.2s ease-in-out;
  z-index: 2;
}
a:hover {
  text-decoration: underline;
  outline: 6px solid purple;
}

a:before {
  top: -5px;
  bottom: -5px;
  left: -8px;
  right: -8px;
  box-shadow: 0 0 10px 1px #000;
  border-radius: 0px;
  content: '';
  position: absolute;
  z-index: -2;
}

a:nth-child(odd) {
  transform: rotate(-2deg);
}
a:nth-child(even) {
  transform: rotate(2deg);
}

a:hover:nth-child(odd), a:hover:nth-child(even) {
  transform: rotate(0deg);
}

Демонстрация
2012-04-16 Просмотров: 2423 Комментарий: (3)

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

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

Оставь свой отзыв

Комментарий: 3
AnTron
AnTron 2015-12-25 15:551
0
Такое меню немного по шире сделать, думаю лучше было бы по дизайну смотрется.
Марковичь
Марковичь 2015-12-25 16:082
0
Много его на сайте видел, постоянно по разделал разбит был.
Kvint
Kvint 2015-12-25 16:303
0
Здесь только добавили стрелку, а само меню по скрипту даже знакомо.
avatar