Langsung ke konten utama

Single Submenu dengan CSS3

Single Submenu dengan CSS3

apa kabar sobat,udah lama nih saya ga share trik css lagi,kali ini saya tadinya cuma iseng" otak-atik box css3,tapi akhirnya jadi begini deh,lalu saya buat saja jadi menu.menu ini menggunaan hover effect transform.jadi ketika kita hover/arahkan kursor kemenu,maka akan menampilkan beberapa menu lagi.
karena itu saya sebut saja nama'a sub menu.menu'a saya buat 2 style.yaitu dengan 4 menu dan 8 menu.tadi'a sih pengen nambahin lagi,tapi karena sudah agak lelah,jadi saya posting saja sekarang,mungin nanti saya modif lagi trik sub menu ini.

untuk contoh'a,kalian bisa lihat sendiri dibawah ini.direkomendasikan untuk menggunakan browser versi terbaru agar hasil'a maksimal.trik ini tidakberat kq,karena ini bukan css3 animation keyframe==v

bila kalian mau mencoba,silakan copy paste saja CSS dan HTML dibawah ini.

Css'a ditaruh di atas kode ]]></b:skin> .sedangkan untuk HTMl'a diantara <body> isi HTML </body>.
atau bisa juga ke layout=>add a gadget=> HTML/javascript.

-4 menu-


-HTML
<div class="ringMenu">
<ul>
<li class="main"><a href="#">main</a></li>
<li class="top"><a href="#">top</a></li>
<li class="right"><a href="#">right</a></li>
<li class="bottom"><a href="#">bottom</a></li>
<li class="left"><a href="#">left</a></li>
</ul></div>


-CSS

.ringMenu {
width: 100px;
margin:auto;
}

.ringMenu:hover {}

.ringMenu ul {
list-style: none;
position: relative;
width: 100px;
color: white;
margin: 0;
padding: 0;
}
.ringMenu ul a {
color: white;
}
.ringMenu ul li {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0;
padding: 0;
}
.ringMenu ul li a {
display: block;
width: 100px;
height: 100px;
border-bottom: 1px solid #333;
border-left: 1px solid black;
border-right: 1px solid #333;
border-top: 1px solid black;
background: #161616;
text-align: center;
line-height: 100px;

}
.ringMenu ul li a:hover {
background: rgba(230,150,20,0.7);
}

.ringMenu ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.ringMenu:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.ringMenu ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: -102px;
left: 0;
}
.ringMenu ul li.bottom {
-webkit-transform-origin: 50% -52px;
-moz-transform-origin: 50% -52px;
-o-transform-origin: 50% -52px;
transform-origin: 50% -52px;
position: absolute;
bottom: -102px;
left: 0;
}
.ringMenu ul li.right {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: 0px;
right: -102px;
}
.ringMenu ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 0;
left: -102px;
}




-8 menu-




-HTML

<div class="ringMenu">
<ul>
<li class="main"><a href="#">main</a></li>
<li class="top"><a href="#">top</a></li>
<li class="right"><a href="#">right</a></li>
<li class="bottom"><a href="#">bottom</a></li>
<li class="left"><a href="#">left</a></li>
<li class="topright"><a href="#">topright</a></li>
<li class="topleft"><a href="#">topleft</a></li>
<li class="bottomright"><a href="#">bottomright</a></li>
<li class="bottomleft"><a href="#">bottomleft</a></li>
</ul></div>



-CSS


.ringMenu {
width: 100px;
margin:auto;
}

.ringMenu:hover {}

.ringMenu ul {
list-style: none;
position: relative;
width: 100px;
color: white;
margin: 0;
padding: 0;
}
.ringMenu ul a {
color: white;
}
.ringMenu ul li {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0;
padding: 0;
}
.ringMenu ul li a {
display: block;
width: 100px;
height: 100px;
border-bottom: 1px solid #333;
border-left: 1px solid black;
border-right: 1px solid #333;
border-top: 1px solid black;
background: #161616;
text-align: center;
line-height: 100px;

}
.ringMenu ul li a:hover {
background: rgba(230,150,20,0.7);
}

.ringMenu ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.ringMenu:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.ringMenu ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: -102px;
left: 0;
}
.ringMenu ul li.bottom {
-webkit-transform-origin: 50% -52px;
-moz-transform-origin: 50% -52px;
-o-transform-origin: 50% -52px;
transform-origin: 50% -52px;
position: absolute;
bottom: -102px;
left: 0;
}
.ringMenu ul li.right {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: 0px;
right: -102px;
}
.ringMenu ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 0;
left: -102px;
}

.ringMenu ul li.topright {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: -102px;
right: -102px;
}

.ringMenu ul li.topleft {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: -102px;
left: -102px;
}

.ringMenu ul li.bottomright {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
bottom: -102px;
right: -102px;
}

.ringMenu ul li.bottomleft {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
bottom: -102px;
left: -102px;
}




-Style 1 4menu-





HTML

<div class='ringMenusatelit'>
<ul>
<li class='main'><a href='#'>main</a></li>
<li class='top'><a href='#'>top</a></li>
<li class='right'><a href='#'>right</a></li>
<li class='bottom'><a href='#'>bottom</a></li>
<li class='left'><a href='#'>left</a></li>
</ul>
</div>




CSS

.ringMenusatelit {
width: 100px;
margin:auto;
}

.ringMenusatelit:hover {}

.ringMenusatelit ul {
list-style: none;
position: relative;
width: 100px;
color: white;
margin: 0;
padding: 0;
}
.ringMenusatelit ul a {
color: white;
}
.ringMenusatelit ul li {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0;
padding: 0;
}
.ringMenusatelit ul li a {
display: block;
width: 100px;
height: 100px;
border-bottom: 1px solid #333;
border-left: 1px solid black;
border-right: 1px solid #333;
border-top: 1px solid black;
background: #161616;
text-align: center;
line-height: 100px;

}
.ringMenusatelit ul li a:hover {
background: rgba(230,150,20,0.7);
}

.ringMenusatelit ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.ringMenusatelit:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.ringMenusatelit ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: 0px;
left: -202px;
}
.ringMenusatelit ul li.top a {
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-top-left-radius: 15px;
-webkit-border-bottom-left-radius: 15px;}

.ringMenusatelit ul li.left a {
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-top-right-radius: 15px;
-webkit-border-bottom-right-radius: 15px;}

.ringMenusatelit ul li.bottom a {
-moz-border-radius-topright: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-top-right-radius: 50px;
-webkit-border-bottom-right-radius: 50px;
}

.ringMenusatelit ul li.right a {
-moz-border-radius-topleft: 15px;
-moz-border-radius-bottomleft: 15px;
-webkit-border-top-left-radius: 50px;
-webkit-border-bottom-left-radius: 50px;
}
.ringMenusatelit ul li.main a {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

.ringMenusatelit ul li.bottom {
-webkit-transform-origin: 50% -52px;
-moz-transform-origin: 50% -52px;
-o-transform-origin: 50% -52px;
transform-origin: 50% -52px;
position: absolute;
bottom: -0px;
left: -101px;
}
.ringMenusatelit ul li.right {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: 0px;
right: -102px;
}
.ringMenusatelit ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 0;
left: 202px;
}





-Style 2 4menu-






-HTML-
<div class='ringMenubulat'>
<ul>
<li class='main'><a href='#'>main</a></li>
<li class='top'><a href='#'>top</a></li>
<li class='right'><a href='#'>right</a></li>
<li class='bottom'><a href='#'>bottom</a></li>
<li class='left'><a href='#'>left</a></li>
</ul>
</div>





-CSS-


.ringMenubulat {
width: 100px;
margin:auto;
}

.ringMenubulat:hover {}

.ringMenubulat ul {
list-style: none;
position: relative;
width: 100px;
color: white;
margin: 0;
padding: 0;
}
.ringMenubulat ul a {
color: #000;
}
.ringMenubulat ul li {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0;
padding: 0;
}
.ringMenubulat ul li a {
display: block;
width: 100px;
height: 100px;
border-bottom: 1px solid #333;
border-left: 1px solid black;
border-right: 1px solid #333;
border-top: 1px solid black;
background: #161616;
text-align: center;
line-height: 100px;

}
.ringMenubulat ul li a:hover {
background: rgba(230,150,20,0.7);
}

.ringMenubulat ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.ringMenubulat:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.ringMenubulat ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: 0px;
left: -202px;
}
.ringMenubulat ul li.top a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

.ringMenubulat ul li.left a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

.ringMenubulat ul li.bottom a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}

.ringMenubulat ul li.right a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
.ringMenubulat ul li.main a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

.ringMenubulat ul li.bottom {
-webkit-transform-origin: 50% -52px;
-moz-transform-origin: 50% -52px;
-o-transform-origin: 50% -52px;
transform-origin: 50% -52px;
position: absolute;
bottom: -0px;
left: -101px;
}
.ringMenubulat ul li.right {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: 0px;
right: -102px;
}
.ringMenubulat ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 0;
left: 202px;
}






-Style 3 4menu-


HTML
<div class='ringMenubulat1'>
<ul>
<li class='main'><a href='#'>main</a></li>
<li class='top'><a href='#'>top</a></li>
<li class='right'><a href='#'>right</a></li>
<li class='bottom'><a href='#'>bottom</a></li>
<li class='left'><a href='#'>left</a></li>
</ul>
</div>


CSS




.ringMenubulat1 {
width: 100px;
margin:auto;
}

.ringMenubulat1:hover {}

.ringMenubulat1 ul {
list-style: none;
position: relative;
width: 100px;
color: white;
margin: 0;
padding: 0;
}
.ringMenubulat1 ul a {
color: #000;
}
.ringMenubulat1 ul li {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0;
padding: 0;
}
.ringMenubulat1 ul li a {
display: block;
width: 100px;
height: 100px;
border-bottom: 1px solid #333;
border-left: 1px solid black;
border-right: 1px solid #333;
border-top: 1px solid black;
background: #161616;
text-align: center;
line-height: 100px;

}
.ringMenubulat1 ul li a:hover {
background: rgba(230,150,20,0.7);
}

.ringMenubulat1 ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.ringMenubulat1:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.ringMenubulat1 ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: 350px;
left: 120px;
}
.ringMenubulat1 ul li.top a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

.ringMenubulat1 ul li.left a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

.ringMenubulat1 ul li.bottom a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}

.ringMenubulat1 ul li.right a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
}
.ringMenubulat1 ul li.main a {
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

.ringMenubulat1 ul li.bottom {
-webkit-transform-origin: 50% -52px;
-moz-transform-origin: 50% -52px;
-o-transform-origin: 50% -52px;
transform-origin: 50% -52px;
position: absolute;
top: 270px;
left: 90px;
}
.ringMenubulat1 ul li.right {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: 90px;
right: -30px;
}
.ringMenubulat1 ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 180px;
left: 60px;
}





-Style 4 4menu-





-HTML-
<div class='ringMenubulat2'>
<ul>
<li class='main'><a href='#'>main</a></li>
<li class='top'><a href='#'>top</a></li>
<li class='right'><a href='#'>right</a></li>
<li class='bottom'><a href='#'>bottom</a></li>
<li class='left'><a href='#'>left</a></li>
</ul>
</div>


-CSS-




.ringMenubulat2 {
width: 100px;
margin:auto;
}

.ringMenubulat2 ul li a:hover {}

.ringMenubulat2 ul {
list-style: none;
position: relative;
width: 100px;
color: white;
margin: 0;
padding: 0;
}
.ringMenubulat2 ul a {
color: #000;
}
.ringMenubulat2 ul li {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
margin: 0;
padding: 0;
}
.ringMenubulat2 ul li a {
display: block;
width: 100px;
height: 30px;
border-bottom: 1px solid #333;
border-left: 1px solid black;
border-right: 1px solid #333;
border-top: 1px solid black;
background: #161616;
text-align: center;
line-height: 30px;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.ringMenubulat2 ul li a:hover {
background: rgba(230,150,20,0.7);
}

.ringMenubulat2 ul li:not(.main) {
-webkit-transform: rotate(-180deg) scale(0);
-moz-transform: rotate(-180deg) scale(0);
-o-transform: rotate(-180deg) scale(0);
transform: rotate(-180deg) scale(0);
opacity: 0;
}
.ringMenubulat2:hover ul li {
-webkit-transform: rotate(0) scale(1);
-moz-transform: rotate(0) scale(1);
-o-transform: rotate(0) scale(1);
transform: rotate(0) scale(1);
opacity: 1;
}
.ringMenubulat2 ul li.top {
-webkit-transform-origin: 50% 152px;
-moz-transform-origin: 50% 152px;
-o-transform-origin: 50% 152px;
transform-origin: 50% 152px;
position: absolute;
top: 120px;
left: 2px;
}
.ringMenubulat2 ul li.top a {-moz-border-radius-bottomleft: 15px;
-moz-border-radius-bottomright: 15px;
-webkit-border-bottom-left-radius: 15px;
-webkit-border-bottom-right-radius: 15px;
color:#fff;}

.ringMenubulat2 ul li.left a {
color:#fff;}

.ringMenubulat2 ul li.bottom a {
color:#fff;
}

.ringMenubulat2 ul li.right a {color:#fff;-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;}

.ringMenubulat2 ul li.main a {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;color:#fff;
border-radius: 50px;}

.ringMenubulat2 ul li.bottom {
-webkit-transform-origin: 50% -52px;
-moz-transform-origin: 50% -52px;
-o-transform-origin: 50% -52px;
transform-origin: 50% -52px;
position: absolute;
top: 90px;
left: 2px;
}
.ringMenubulat2 ul li.right {
-webkit-transform-origin: -52px 50%;
-moz-transform-origin: -52px 50%;
-o-transform-origin: -52px 50%;
transform-origin: -52px 50%;
position: absolute;
top: 30px;
left: 2px;
}
.ringMenubulat2 ul li.left {
-webkit-transform-origin: 152px 50%;
-moz-transform-origin: 152px 50%;
-o-transform-origin: 152px 50%;
transform-origin: 152px 50%;
position: absolute;
top: 60px;
left: 2px;
}













Untuk HTML'a sendiri,ganti tanda pagar '#' Dengan URL web yang kamu inginkan,dan ganti juga namalinknya



Bila sobat mau mengganti warna background'a,perhatikan css dibawah ini


background: #161616; = diganti kode hexa decimal'a.

.ringMenu ul li a {
display: block;
width: 100px;
height: 100px;
border-bottom: 1px solid #333;
border-left: 1px solid black;
border-right: 1px solid #333;
border-top: 1px solid black;
background: #161616;
text-align: center;
line-height: 100px;

}


Untuk mengganti warna hover effect'a,

.ringMenu ul li a:hover {
background: rgba(230,150,20,0.7);
}






mengenai kode warna hexa,bisa dilihat disini

mengenai kode warna rgba colour ,bisa dilihat disini










Menarik bukan?arigatou gozaimasu selamat mencoba,semoga bermanfaat :)
Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

MATERI SENI BUDAYA KELAS XII SEMESTER 1 "SENI RUPA 2D"

Setelah mempelajari Bab 1 ini kamu diharapkan dapat mengapresiasi dan berkreasi seni rupa sebagai berikut: 1.         Mengidentifikasi jenis, simbol, fungsi, dan nilai estetis dalam karya seni rupa dua dimensi. 2.        Mengidentifikasi bahan, media, dan teknik dalam proses berkarya seni rupa dua dimensi. 3.        Membandingkan jenis, simbol, fungsi, dan nilai estetis teknik dalam karya seni rupa dua dimensi. 4.        Membandingkan bahan, media, dan teknik dalam proses berkarya seni rupa dua dimensi. 5.        Memilih bahan, media, jenis, simbol, fungsi, nilai estetis dan teknik dalam proses berkarya seni rupa dua dimensi. 6.        Membuat karya seni rupa dua dimensi.   Di kelas X dan XI kamu sudah mempelajari berbagai jenis karya seni rupa dua dimensi. Karya-karya tersebut ada yang memiliki fungsi pakai dan ada yang memiliki fungsi hias saja. Masih ingatkah kamu perbedaan karya seni rupa terapan dan seni rupa murni? Cobalah perhatikan benda-benda disekitar kamu, dapatkah kamu
Posting Komentar
Baca selengkapnya

Seni Lukis Cirebon

Geliat Seni Lukisan Kaca Di Cirebon Seni Lukis Kaca Di Wilayah Cirebon My World Seni Lukis Kaca Di Wilayah Cirebon My World Kesenian Kebudayaan Cirebon Seni Lukis Kaca Cirebon Yang Lukisan Kaca Warisan Asli Budaya Cirebon Seni Lukis Kaca Di Wilayah Cirebon My World Teknik Serta Makna Lukisan Kaca Cirebon Direktorat Warisan Dan Seni Lukis Kaca Cirebon Yang Memiliki Nilai Sejarah Tinggi Cirebon Cemerlang Lukisan Kaca Cirebon Bagaimana Sejarah Lukisan Kaca Cirebon Seni Rupa Dictio Community Seni Lukis Kaca Di Wilayah Cirebon My World Membuat Lukisan Kaca Khas Cirebon Ukm Serufo Uny Lukisan Kaca Cirebon Wikipedia Bahasa Indonesia Ensiklopedia Bebas Bung Pata Terus Melestarikan Lukisan Kaca Cirebon Radarcire
Posting Komentar
Baca selengkapnya

MATERI SENI BUDAYA KELAS XII SEMESTER 2 "SENI RUPA 3D"

Kamu sudah mengenal dan mempelajari karya seni rupa yang berdimensi dua dan berdimensi tiga. Kamu juga sudah pernah mencoba berkarya seni rupa dua dimensi. Pada bahasan ini kamu akan mempelajari dan membuat kembali karya seni rupa tiga dimensi. Cobalah pelajari kembali materi bahan ajar di kelas X dan XI tentang apresiasi dan berkarya seni rupa tiga dimensi kemudian perkuat pemahaman kamu dengan mempelajari bab ini. Ketika kamu melihat sebuah karya seni rupa tiga dimensi, aspek apa saja yang kamu lihat? Coba kamu amati gambar di bawah ini untuk mengidentifikasi aspekaspek tersebut!   Dalam pembelajaran seni rupa, salah satu pengertian “simbol” adalah makna yang dikandung dalam karya seni rupa baik pada wujud objeknya maupun pada unsur-unsur rupanya.Diantara karya seni rupa tiga dimensiyang dapat memiliki makna dan simbol tertentu. adalah patung, tugu dan monumen. Kebiasaan untuk membuat patung, tugu dan, monumen yang melambangkan atau menyimbolkan sesuatu sudah dilakukan orang sejak za
Posting Komentar
Baca selengkapnya