Круглое сениее меню 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%); Где ссылки, можно понять, сто там будет картинка на раздел. Но думаю дальше все понятно будет, ставим одним скриптом, там где считаете нужно.  | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |