Azt Syarif

 

Halo temen-temen udah lama nih gak update tips end trik blog apakabarnya nih semua  untuk kali ini deary widodo akan berbagi tips lagi bagaimana cara membuat menu  berbentuk bunga menu ini bisa membuat cantik blog tapi ini memang agak sedikit lebai cubi-cubi kayaknya bagus nih buat blog cewek biar unyuk-unyuk  untuk  menu yang ini bekerja di mozilla, Google Crome yang terbaru ya jagan lama apa kata dunia kalo gak update. langsung aja deh kayaknya udah pada penasaran

ul.flower {padding:0; margin:50px auto; list-style:none;
position:relative; height:300px; width:300px;}
ul.flower li a {display:block; width:100px; position:absolute; left:0;
top:0; background:#888; line-height:100px;font:bold 13px/100px arial,
sans-serif; color:#fff; text-align:center; text-decoration:none;
border-radius:100px 100px 0 100px;
-moz-border-radius:100px 100px 0 100px;
transform-origin: 101px 101px;
-ms-transform-origin: 101px 101px;
-o-transform-origin: 101px 101px;
-moz-transform-origin: 101px 101px;
-webkit-transform-origin: 101px 101px;
}
ul.flower li a b {display:block;
transform:rotate(-40deg);
-ms-transform:rotate(-40deg);
-o-transform:rotate(-40deg);
-moz-transform:rotate(-40deg);
-webkit-transform:rotate(-

40deg);
}
ul.flower li a:hover {color:#000; background:#c00;
background-image: -webkit-gradient(linear, 0% 0%, 45% 45%,
from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-60deg, rgba(255, 255, 255,
0.7), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(-60deg, rgba(255, 255, 255, 0.7),
rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(-60deg, rgba(255, 255, 255,
0.7), rgba(255, 255, 255, 0));
box-shadow: -4px -4px 8px rgba(0, 0, 0, 0.4);
-moz-box-shadow: -4px -4px 8px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: -4px -4px 8px rgba(0, 0, 0, 0.4);
}
ul.flower li.p1 a {
transform:rotate(60deg)skew(30deg);
-ms-transform:rotate(60deg)skew(30deg);
-o-transform:rotate(60deg)skew(30deg);
-moz-transform:rotate(60deg)skew(30deg);
-webkit-transform:rotate(60deg)skew(30deg);
}
ul.flower li.p2 a {
transform:rotate(120deg)skew(30deg);
-ms-transform:rotate(120deg)skew(30deg);
-o-transform:rotate(120deg)skew(30deg);
-moz-transform:rotate(120deg)skew(30deg);
-webkit-transform:rotate(120deg)skew(30deg);
}
ul.flower li.p3 a {
transform:rotate(180deg)skew(30deg);
-ms-transform:rotate(180deg)skew(30deg);
-o-transform:rotate(180deg)skew(30deg);
-moz-transform:rotate(180deg)skew(30deg);
-webkit-transform:rotate(180deg)skew(30deg);
}
ul.flower li.p4 a {
transform:rotate(240deg)skew(30deg);
-ms-transform:rotate(240deg)skew(30deg);
-o-transform:rotate(240deg)skew(30deg);
-moz-transform:rotate(240deg)skew(30deg);
-webkit-transform:rotate(240deg)skew(30deg);
}
ul.flower li.p5 a {
transform:rotate(300deg)skew(30deg);
-ms-transform:rotate(300deg)skew(30deg);
-o-transform:rotate(300deg)skew(30deg);
-moz-transform:rotate(300deg)skew(30deg);
-webkit-transform:rotate(300deg)skew(30deg);
}
ul.flower li.p6 a {
transform:rotate(360deg)skew(30deg);
-ms-transform:rotate(360deg)skew(30deg);
-o-transform:rotate(360deg)skew(30deg);
-moz-transform:rotate(360deg)skew(30deg);
-webkit-transform:rotate(360deg)skew(30deg);
}
ul.flower li.center {width:54px; height:54px;position:absolute;
left:72px; top:72px; z-index:100; background:#ff0;
border-radius:50px;
-moz-border-radius:50px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(0,
0, 0, 0.6);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6), inset 0 0 15px
rgba(0, 0, 0, 0.6);
}

<center>

<div id="info">
<ul class="flower">
<li class="p1"><a href="http://widodoclalucyank.blogspot.com/"><b>HOME</b></a></li>
<li class="p2"><a href="http://widodoclalucyank.blogspot.com/search/label/Templat%20Blog?max-results=4"><b>Templat Blog</b></a></li>
<li class="p3"><a href="http://widodoclalucyank.blogspot.com/"><b>Trik Blog</b></a></li>
<li class="p4"><a href="http://widodoclalucyank.blogspot.com/"><b>Visual Basic</b></a></li>
<li class="p5"><a href="http://widodoclalucyank.blogspot.com/"><b>CONTACT</b></a></li>
<li class="p6"><a href="http://widodoclalucyank.blogspot.com/"><b>Profile</b></a></li>
<li class="center"></li>
</ul>
</div>
</center>