ZorNet.Ru — сайт для вебмастера » Меню для сайта » Меню в виде разноцветных шаров

Меню в виде разноцветных шаров

Меню в виде разноцветных шаров

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

Установка:

Ставим туда, где вы считаете нужным.

Код

<style>
#blockelement {
margin:0 auto;
/* - Ширина блока под шар - */
width: 120px;
/* - Высота блока под шар - */
height: 120px;
z-index: 100;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
#blockelement a {
position: absolute;
/* - Положение названия в ссылке от левой части шара - */
left: 23px;
/* - Положение названия в ссылке от верхней части шара - */
top: 45px;
z-index: 12;
/* - Цвет текста в ссылке - */
color:#fff;
text-decoration:none;
/* - Размер шрифта текста в ссылке - */
font-size:26px;
/* - Тип шрифта текста в ссылке - */
font-famaly:Tahoma;
}
#sharred {
/* - Ширина шара - */
width: 120px;
/* - Высота шара - */
height: 120px;
border-radius: 50%;
/* - Градиенты фона шара - */
background-image: linear-gradient(182deg, Red 0%, White 100%);
-o-background-image: linear-gradient(182deg, Red 0%, White 100%);
-ms-background-image: linear-gradient(182deg, Red 0%, White 100%);
position: absolute;
top: 0;
  z-index: 11;
cursor: pointer;
}
#sharblack {
/* - Ширина шара - */
width: 120px;
/* - Высота шара - */
height: 120px;
border-radius: 50%;
/* - Градиенты фона шара - */
background-image: linear-gradient(182deg, Black 0%, White 100%);
-o-background-image: linear-gradient(182deg, Black 0%, White 100%);
-ms-background-image: linear-gradient(182deg, Black 0%, White 100%);
position: absolute;
top: 0;
z-index: 11;
cursor: pointer;
}
#sharblue {
/* - Ширина шара - */
width: 120px;
/* - Высота шара - */
height: 120px;
border-radius: 50%;
/* - Градиенты фона шара - */
background-image: linear-gradient(182deg, blue 0%, White 100%);
-o-background-image: linear-gradient(182deg, blue 0%, White 100%);
-ms-background-image: linear-gradient(182deg, blue 0%, White 100%);
position: absolute;
top: 0;
  z-index: 11;
cursor: pointer;
}
#shargreen {
/* - Ширина шара - */
width: 120px;
/* - Высота шара - */
height: 120px;
border-radius: 50%;
/* - Градиенты фона шара - */
background-image: linear-gradient(182deg, green 0%, White 100%);
-o-background-image: linear-gradient(182deg, green 0%, White 100%);
-ms-background-image: linear-gradient(182deg, green 0%, White 100%);
position: absolute;
top: 0;
  z-index: 11;
cursor: pointer;
}
#sharPurple {
/* - Ширина шара - */
width: 120px;
/* - Высота шара - */
height: 120px;
border-radius: 50%;
/* - Градиенты фона шара - */
background-image: linear-gradient(182deg, Purple 0%, White 100%);
-o-background-image: linear-gradient(182deg, Purple 0%, White 100%);
-ms-background-image: linear-gradient(182deg, Purple 0%, White 100%);
position: absolute;
top: 0;
z-index: 11;
cursor: pointer;
}
/* - Начало вставки в шаре (можно убрать) - */
#sharred::after,
#sharblack::after,
#sharblue::after,
#shargreen::after,
#sharyellow::after {
content: "";
width: 80px;
height: 40px;
position: absolute;
left: 20px;
top: 10px;
background: rgba(255, 255, 255, .3);
z-index: 10;
border-radius: 40px / 20px;
}
/* - Конец вставки в шаре (можно убрать) - */
#blockelement:hover ~ #elementfonred {
margin:0 auto;
width: 60px;
height: 15px;
/* - Общий фон тени - */
background: rgba(255, 0, 0, .1);
/* - Тень со свойствами - */
box-shadow: 0px 0 20px 35px rgba(255,0,0,.1);
-o-box-shadow: 0px 0 20px 35px rgba(255,0,0,.1);
-ms-box-shadow: 0px 0 20px 35px rgba(255,0,0,.1);
border-radius: 30px / 40px;-o-border-radius: 30px / 40px;
-ms-border-radius: 30px / 40px;
  -webkit-transform: scaleY(.3);
-moz-transform: scaleY(.3);
-ms-transform: scaleY(.3);
-o-transform: scaleY(.3);
transform: scaleY(.3);
}
#blockelement:hover ~ #elementfonblack {
margin:0 auto;
width: 60px;
height: 15px;
/* - Общий фон тени - */
background: rgba(0, 0, 0, .1);
/* - Тень со свойствами - */
box-shadow: 0px 0 20px 35px rgba(0,0,0,.1);
-o-box-shadow: 0px 0 20px 35px rgba(0,0,0,.1);
-ms-box-shadow: 0px 0 20px 35px rgba(0,0,0,.1);
border-radius: 30px / 40px;
-o-border-radius: 30px / 40px;
-ms-border-radius: 30px / 40px;
  -webkit-transform: scaleY(.3);
-moz-transform: scaleY(.3);
-ms-transform: scaleY(.3);
-o-transform: scaleY(.3);
transform: scaleY(.3);
}
#blockelement:hover ~ #elementfonblue {
margin:0 auto;
width: 60px;
height: 15px;
/* - Общий фон тени - */
background: rgba(0, 0, 255, .1);
/* - Тень со свойствами - */
box-shadow: 0px 0 20px 35px rgba(0,0,255,.1);
-o-box-shadow: 0px 0 20px 35px rgba(0,0,255,.1);
-ms-box-shadow: 0px 0 20px 35px rgba(0,0,255,.1);
border-radius: 30px / 40px;
-o-border-radius: 30px / 40px;
-ms-border-radius: 30px / 40px;
  -webkit-transform: scaleY(.3);
-moz-transform: scaleY(.3);
-ms-transform: scaleY(.3);
-o-transform: scaleY(.3);
transform: scaleY(.3);
}
#blockelement:hover ~ #elementfongreen {
margin:0 auto;
width: 60px;
height: 15px;
/* - Общий фон тени - */
background: rgba(0, 255, 0, .1);
/* - Тень со свойствами - */
box-shadow: 0px 0 20px 35px rgba(0,255,0,.1);
-o-box-shadow: 0px 0 20px 35px rgba(0,255,0,.1);
-ms-box-shadow: 0px 0 20px 35px rgba(0,255,0,.1);
border-radius: 30px / 40px;
-o-border-radius: 30px / 40px;
-ms-border-radius: 30px / 40px;
  -webkit-transform: scaleY(.3);
-moz-transform: scaleY(.3);
-ms-transform: scaleY(.3);
-o-transform: scaleY(.3);
transform: scaleY(.3);
}
#blockelement:hover ~ #elementfonPurple {
margin:0 auto;
width: 60px;
height: 15px;
/* - Общий фон тени - */
background: rgba(155,48,25, .1);
/* - Тень со свойствами - */
box-shadow: 0px 0 20px 35px rgba(155,48,25,.1);
-o-box-shadow: 0px 0 20px 35px rgba(155,48,25,.1);
-ms-box-shadow: 0px 0 20px 35px rgba(155,48,25,.1);
border-radius: 30px / 40px;
-o-border-radius: 30px / 40px;
-ms-border-radius: 30px / 40px;
  -webkit-transform: scaleY(.3);
-moz-transform: scaleY(.3);
-ms-transform: scaleY(.3);
-o-transform: scaleY(.3);
transform: scaleY(.3);
}
.razmer {
padding:auto 5px auto 5px;
height:140px;
}
</style>
<table border="0">
<tr>
<td class="razmer">
<div id="blockelement">
<div id="sharred"></div>
<a href="">MENU</a>
  </div>
<div id="elementfonred"></div>
</td>
<td class="razmer">
<div id="blockelement">
<div id="sharblack"></div>
<a href="">MENU</a>
  </div>
<div id="elementfonblack"></div>
</td>
<td class="razmer">
<div id="blockelement">
<div id="sharblue"></div>
<a href="">MENU</a>
  </div>
<div id="elementfonblue"></div>
</td>
<td class="razmer">
<div id="blockelement">
<div id="shargreen"></div>
<a href="">MENU</a>
  </div>
<div id="elementfongreen"></div>
</td>
<td class="razmer">
<div id="blockelement">
<div id="sharPurple"></div>
<a href="">MENU</a>
  </div>
<div id="elementfonPurple"></div>
</td>
</tr>
</table>

24 Февраля 2016 Просмотров: 1614 Комментариев: (5)

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

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

Похожие материалы

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

Комментарии: 4
Порядок вывода комментариев: Maryges 24 Февраля 2016 23:23¹ 0 Интересно, а куда его можно поставить, так бы не обычно было, если по теме подошло. Kosten 24 Февраля 2016 23:31² 0 Не нравиться мне все разноцветное, просто путаюсь, говорят и глаза устают еще, но если подходит на сайт, то не вижу не чего, чтоб установить, так как на сайте не один. Alex_L_X 24 Февраля 2016 23:34³ 0 Можно сделать одним цветом шары, знаний много не надо, просто переставив стиль Kosten 24 Февраля 2016 23:40⁴ +1 Можно, просто мало сайтов цветных, но они есть, но когда выбор есть, тогда намного лучше.