» »

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


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

Установка:

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

Код
<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.02.2016 Просмотров: 542 Комментарий: (5)

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

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

Комментарий: 4
Maryges
Maryges 24.02.2016 23:231
0
Интересно, а куда его можно поставить, так бы не обычно было, если по теме подошло.
Kosten
Kosten 24.02.2016 23:312
0
Не нравиться мне все разноцветное, просто путаюсь, говорят и глаза устают еще, но если подходит на сайт, то не вижу не чего, чтоб установить, так как на сайте не один.
Alex_L_X
Alex_L_X 24.02.2016 23:343
0
Можно сделать одним цветом шары, знаний много не надо, просто переставив стиль
Kosten
Kosten 24.02.2016 23:404
+1
Можно, просто мало сайтов цветных, но они есть, но когда выбор есть, тогда намного лучше.
avatar