» »

Круглое сениее меню RENTABL для ucoz


Круглое сениее меню RENTABL для ucoz

Хочется разобрать одно оригинальное Круглое меню RENTABL для ucoz которое безусловно стоит обсудить. Так как такой дизайн очень редко встречается, но на несколько ресурсов под вид такого видел и не плохо смотрится. Здесь можно поменять как цвет так и сами картинки, которые идут под тематику, размер их 32 пикселя и можно найти в интернете и подогнать под ресурс. По умолчанию оно было желтое, но стили делают чудеса и через миг оно стало светло синим.

Установка:

Код:

Код
<style>  
ul.piechart {padding:0; margin:0 auto; list-style:none; width:340px; height:340px; overflow:hidden; border-radius:320px; position:relative;  
-webkit-transform:rotate(-22.5deg);  
-moz-transform:rotate(-22.5deg);  
-ms-transform:rotate(-22.5deg);  
-o-transform:rotate(-22.5deg);  
transform:rotate(-22.5deg);  
}  
ul.piechart li {width:300px; height:300px; background:transparent; position:absolute; overflow:hidden;  
-webkit-transform-origin:0 300px;  
-moz-transform-origin:0 300px;  
-ms-transform-origin:0 300px;  
-o-transform-origin:0 300px;  
transform-origin:0 300px;  
}  
ul.piechart li:nth-child(1) {left:172px; top:-135px;  
-webkit-transform: skewY(-45deg);  
-moz-transform: skewY(-45deg);  
-ms-transform: skewY(-45deg);  
-o-transform: skewY(-45deg);  
transform: skewY(-45deg);  
}  
ul.piechart li:nth-child(2) {left:175px; top:-132px;  
-webkit-transform:rotate(45deg) skewY(-45deg);  
-moz-transform:rotate(45deg) skewY(-45deg);  
-ms-transform:rotate(45deg) skewY(-45deg);  
-o-transform:rotate(45deg) skewY(-45deg);  
transform:rotate(45deg) skewY(-45deg);  
}  
ul.piechart li:nth-child(3) {left:175px; top:-128px;  
-webkit-transform:rotate(90deg) skewY(-45deg);  
-moz-transform:rotate(90deg) skewY(-45deg);  
-ms-transform:rotate(90deg) skewY(-45deg);  
-o-transform:rotate(90deg) skewY(-45deg);  
transform:rotate(90deg) skewY(-45deg);  
}  
ul.piechart li:nth-child(4) {left:172px; top:-125px;  
-webkit-transform:rotate(135deg) skewY(-45deg);  
-moz-transform:rotate(135deg) skewY(-45deg);  
-ms-transform:rotate(135deg) skewY(-45deg);  
-o-transform:rotate(135deg) skewY(-45deg);  
transform:rotate(135deg) skewY(-45deg);  
}  
ul.piechart li:nth-child(5) {left:168px; top:-125px;  
-webkit-transform:rotate(180deg) skewY(-45deg);  
-moz-transform:rotate(180deg) skewY(-45deg);  
-ms-transform:rotate(180deg) skewY(-45deg);  
-o-transform:rotate(180deg) skewY(-45deg);  
transform:rotate(180deg) skewY(-45deg);  
}  
ul.piechart li:nth-child(6) {left:165px; top:-128px;  
-webkit-transform:rotate(225deg) skewY(-45deg);  
-moz-transform:rotate(225deg) skewY(-45deg);  
-ms-transform:rotate(225deg) skewY(-45deg);  
-o-transform:rotate(225deg) skewY(-45deg);  
transform:rotate(225deg) skewY(-45deg);  
}  
ul.piechart li:nth-child(7) {left:165px; top:-132px;  
-webkit-transform:rotate(270deg) skewY(-45deg);  
-moz-transform:rotate(270deg) skewY(-45deg);  
-ms-transform:rotate(270deg) skewY(-45deg);  
-o-transform:rotate(270deg) skewY(-45deg);  
transform:rotate(270deg) skewY(-45deg);  
}  
ul.piechart li:nth-child(8) {left:168px; top:-135px;  
-webkit-transform:rotate(315deg) skewY(-45deg);  
-moz-transform:rotate(315deg) skewY(-45deg);  
-ms-transform:rotate(315deg) skewY(-45deg);  
-o-transform:rotate(315deg) skewY(-45deg);  
transform:rotate(315deg) skewY(-45deg);  
}  
ul.piechart li b  
{display:block; width:300px; height:300px; border-radius:300px; position:absolute; left:-150px; top:150px;  
-webkit-transform: skewY(45deg);  
-moz-transform: skewY(45deg);  
-ms-transform: skewY(45deg);  
-o-transform: skewY(45deg);  
transform: skewY(45deg);  
background: rgb(193,144,44);  
background: -webkit-radial-gradient(center, ellipse cover, rgba(246,248,249,1) 0%,rgba(193,144,44,1) 19%, rgba(229,235,238,1) 37%, rgba(215,222,227,1) 38%,rgba(193,144,44,1) 74%, rgba(245,247,249,1) 100%);  
background: -moz-radial-gradient(center, ellipse cover, rgba(246,248,249,1) 0%, rgba(193,144,44,1) 19%, rgba(229,235,238,1) 37%, rgba(215,222,227,1) 38%, rgba(193,144,44,1) 74%, rgba(245,247,249,1) 100%);  
background: -o-radial-gradient(center, ellipse cover, rgba(246,248,249,1) 0%,rgba(193,144,44,1) 19%, rgba(229,235,238,1) 37%, rgba(215,222,227,1) 38%,rgba(193,144,44,1) 74%, rgba(245,247,249,1) 100%);  
background: -ms-radial-gradient(center, ellipse cover, rgba(246,248,249,1) 0%,rgba(193,144,44,1) 19%, rgba(229,235,238,1) 37%, rgba(215,222,227,1) 38%,rgba(193,144,44,1) 74%, rgba(245,247,249,1) 100%);  
background: radial-gradient(ellipse at center, #F6F8F9 0%,#2C66C1 19%, #E5EBEE 37%, #D7DEE3 38%,#183B7B 74%, #F5F7F9 100%);
}  
ul.piechart li a b img {position:absolute; left:175px; top:30px; border:0;  
-webkit-transform:rotate(22.5deg);  
-moz-transform:rotate(22.5deg);  
-ms-transform:rotate(22.5deg);  
-o-transform:rotate(22.5deg);  
transform:rotate(22.5deg);  
}  
ul.piechart li:hover:nth-child(1) {left:174px; top:-140px;}  
ul.piechart li:hover:nth-child(2) {left:179px; top:-134px;}  
ul.piechart li:hover:nth-child(3) {left:179px; top:-126px;}  
ul.piechart li:hover:nth-child(4) {left:174px; top:-120px;}  
ul.piechart li:hover:nth-child(5) {left:166px; top:-120px;}  
ul.piechart li:hover:nth-child(6) {left:161px; top:-126px;}  
ul.piechart li:hover:nth-child(7) {left:161px; top:-134px;}  
ul.piechart li:hover:nth-child(8) {left:166px; top:-140px;}  
</style>  
<ul class="piechart">  
<li><a href="http://zornet.ru"><b><img src="http://zornet.ru/CSS-ZORNET/gerav/refad/icon1.png" alt="" /></b></a></li>  
<li><a href="#"><b><img src="http://zornet.ru/CSS-ZORNET/gerav/refad/icon2.png" alt="" /></b></a></li>  
<li><a href="#"><b><img src="http://zornet.ru/CSS-ZORNET/gerav/refad/icon3.png" alt="" /></b></a></li>  
<li><a href="#"><b><img src="http://zornet.ru/CSS-ZORNET/gerav/refad/icon4.png" alt="" /></b></a></li>  
<li><a href="#"><b><img src="http://zornet.ru/CSS-ZORNET/gerav/refad/icon5.png" alt="" /></b></a></li>  
<li><a href="#"><b><img src="http://zornet.ru/CSS-ZORNET/gerav/refad/icon6.png" alt="" /></b></a></li>  
<li><a href="#"><b><img src="http://zornet.ru/CSS-ZORNET/gerav/refad/icon7.png" alt="" /></b></a></li>  
<li><a href="#"><b><img src="http://zornet.ru/CSS-ZORNET/gerav/refad/icon8.png" alt="" /></b></a></li>  
</ul>


Вот так можно изменить, так как вам нужно.



Как видите, с начало идет CSS и с ним можно работать в плане, какая гамма будет, отвечает ха это.

Код
background: radial-gradient(ellipse at center, #F6F8F9 0%,#2C66C1 19%, #E5EBEE 37%, #D7DEE3 38%,#183B7B 74%, #F5F7F9 100%);


Где ссылки, можно понять, сто там будет картинка на раздел. Но думаю дальше все понятно будет, ставим одним скриптом, там где считаете нужно.

08.04.2015 Просмотров: 418 Комментарий: (0)

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

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

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