вРазные полезности

Круглое меню для сайта ucoz на CSS3

 
Красивое круглое меню для сайта. Редко где увидишь, можно сказать шикарная навигация по сайту. При наведение на кокой либо раздел в круге он становиться светлым, что очень впечатляет. Само оно оригинальное и создана на стилях, кроме картинок которые вы можете в коде поменять на свои под свою тематику сайта. Само оно выдержана в различной цветовой гамме, каждый цвет под каждый раздел, все создано с умом. Сам код проверен и полностью рабочий и без ошибок. В коде есть конверт, если вы немного понимаете в кодах, то вы можете сделать, что когда вам кто то написал и оно будит мигать. Но пока просто сделано под некий ваш раздел который будит у вас на сайте. Ставить код вы можете там где по вашему мнению должен стоять. Но так же скажу его можно установить в блок вашего портала и он отлично будит смотреться. Хочу заметить что всего 9 разделов и для любой тематики это будит в самый раз.
Код который вам нужно установить на сайт:

Код
<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(-20deg);
-moz-transform:rotate(-20deg);
-ms-transform:rotate(-20deg);
-o-transform:rotate(-20deg);
transform:rotate(-20deg);

ul.piechart li width:300px; height:300px; background:transparent; position:absolute; left:170px; top:-130px; 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 b
-webkit-transform: skewY(50deg);
-moz-transform: skewY(50deg);
-ms-transform: skewY(50deg);
-o-transform: skewY(50deg);
transform: skewY(50deg);

ul.piechart li:nth-child(1)
-webkit-transform: skewY(-50deg);
-moz-transform: skewY(-50deg);
-ms-transform: skewY(-50deg);
-o-transform: skewY(-50deg);
transform: skewY(-50deg);

ul.piechart li:nth-child(1) b background:#c88;
ul.piechart li:nth-child(2)
-webkit-transform:rotate(40deg) skewY(-50deg);
-moz-transform:rotate(40deg) skewY(-50deg);
-ms-transform:rotate(40deg) skewY(-50deg);
-o-transform:rotate(40deg) skewY(-50deg);
transform:rotate(40deg) skewY(-50deg);

ul.piechart li:nth-child(2) b background:#c68;
ul.piechart li:nth-child(3)
-webkit-transform:rotate(80deg) skewY(-50deg);
-moz-transform:rotate(80deg) skewY(-50deg);
-ms-transform:rotate(80deg) skewY(-50deg);
-o-transform:rotate(80deg) skewY(-50deg);
transform:rotate(80deg) skewY(-50deg);

ul.piechart li:nth-child(3) b background:#cc8;
ul.piechart li:nth-child(4)
-webkit-transform:rotate(120deg) skewY(-50deg);
-moz-transform:rotate(120deg) skewY(-50deg);
-ms-transform:rotate(120deg) skewY(-50deg);
-o-transform:rotate(120deg) skewY(-50deg);
transform:rotate(120deg) skewY(-50deg);

ul.piechart li:nth-child(4) b background:#696;
ul.piechart li:nth-child(5)
-webkit-transform:rotate(160deg) skewY(-50deg);
-moz-transform:rotate(160deg) skewY(-50deg);
-ms-transform:rotate(160deg) skewY(-50deg);
-o-transform:rotate(160deg) skewY(-50deg);
transform:rotate(160deg) skewY(-50deg);

ul.piechart li:nth-child(5) b background:#869;
ul.piechart li:nth-child(6)
-webkit-transform:rotate(200deg) skewY(-50deg);
-moz-transform:rotate(200deg) skewY(-50deg);
-ms-transform:rotate(200deg) skewY(-50deg);
-o-transform:rotate(200deg) skewY(-50deg);
transform:rotate(200deg) skewY(-50deg);

ul.piechart li:nth-child(6) b background:#c8c;
ul.piechart li:nth-child(7)
-webkit-transform:rotate(240deg) skewY(-50deg);
-moz-transform:rotate(240deg) skewY(-50deg);
-ms-transform:rotate(240deg) skewY(-50deg);
-o-transform:rotate(240deg) skewY(-50deg);
transform:rotate(240deg) skewY(-50deg);

ul.piechart li:nth-child(7) b background:#689;
ul.piechart li:nth-child(8)
-webkit-transform:rotate(280deg) skewY(-50deg);
-moz-transform:rotate(280deg) skewY(-50deg);
-ms-transform:rotate(280deg) skewY(-50deg);
-o-transform:rotate(280deg) skewY(-50deg);
transform:rotate(280deg) skewY(-50deg);

ul.piechart li:nth-child(8) b background:#89c;
ul.piechart li:nth-child(9)
-webkit-transform:rotate(320deg) skewY(-50deg);
-moz-transform:rotate(320deg) skewY(-50deg);
-ms-transform:rotate(320deg) skewY(-50deg);
-o-transform:rotate(320deg) skewY(-50deg);
transform:rotate(320deg) skewY(-50deg);

ul.piechart li:nth-child(9) b background:#9ca;
ul.piechart li:nth-child(1) b,  
ul.piechart li:nth-child(2) b,  
ul.piechart li:nth-child(3) b,  
ul.piechart li:nth-child(4) b,  
ul.piechart li:nth-child(5) b,  
ul.piechart li:nth-child(6) b,  
ul.piechart li:nth-child(7) b,  
ul.piechart li:nth-child(8) b,
ul.piechart li:nth-child(9) b
display:block; width:300px; height:300px; border-radius:300px; position:absolute; left:-150px; top:150px;
box-shadow:0px 0px 10px rgba(0,0,0,0.9);

ul.piechart li:nth-child(10) width:200px; height:200px; box-shadow:inset 0px 0px 10px rgba(0,0,0,0.9); border-radius:200px; background:#fff; position:absolute; left:70px; top:70px;
ul.piechart li a b img position:absolute; left:180px; top:20px; border:0;
-webkit-transform:rotate(20deg);
-moz-transform:rotate(20deg);
-ms-transform:rotate(20deg);
-o-transform:rotate(20deg);
transform:rotate(20deg);

ul.piechart li a:hover b background:#eee;
</style>
<ul class=»piechart»>
<li><a href=»#»><b><img src=»http://zornet.ru/CSS-ZORNET/ZR/1364854779_icon1.png» alt=»» /></b></a></li>
<li><a href=»#»><b><img src=»http://zornet.ru/CSS-ZORNET/ZR/1364854714_icon2.png» alt=»» /></b></a></li>
<li><a href=»#»><b><img src=»http://zornet.ru/CSS-ZORNET/ZR/1364854765_icon3.png» alt=»» /></b></a></li>
<li><a href=»#»><b><img src=»http://zornet.ru/CSS-ZORNET/ZR/1364854791_icon4.png» alt=»» /></b></a></li>
<li><a href=»#»><b><img src=»http://zornet.ru/CSS-ZORNET/ZR/1364854764_icon5.png» alt=»» /></b></a></li>
<li><a href=»#»><b><img src=»http://zornet.ru/CSS-ZORNET/ZR/1364854794_icon6.png» alt=»» /></b></a></li>
<li><a href=»#»><b><img src=»http://zornet.ru/CSS-ZORNET/ZR/1364854751_icon7.png» alt=»» /></b></a></li>
<li><a href=»#»><b><img src=»http://zornet.ru/CSS-ZORNET/ZR/1364854750_icon8.png» alt=»» /></b></a></li>
<li><a href=»#»><b><img src=»http://zornet.ru/CSS-ZORNET/ZR/1364854783_icon9.png» alt=»» /></b></a></li>
<li></li>
</ul>

источник: zornet.ru

Похожие посты