How to Make a Rounded Corner Menu Using CSS3


CSS 3 has some new features, such as:
Animation, so the animation does not require a similar program Adobe Flash and Microsoft Silverlight
Some text effects, such as shaded text, newspaper columns, and “word-wrap”
External fonts, so it can use the letters that do not include the “web-safe fonts”.
Some effect on the box, like a box whose size can be changed, the transformation of 2-dimensional and three-dimensional, obtuse angles and shadows.


<style>
#navigationMenu li{
list- style: none;
height:39px;
padding:2px;
width:40px;
}
#navigationMenu span{
/* Container properties*/
width 0;
left:38px;
padding 0;
position: absolute;
overflow: hidden;
/* Text properties*/
font-family: Myriad Pro ,Arial, Helvetica, sansserif;
font-size: 18px;
font-weight: bold;
letter -spacing:0.6px;
white-space:nowrap;
line-height:39px;
/* CSS3 Transition: */
-webkit-transiti on: 0. 25s;
/* Future proofing (these do not work yet) */
-moz-transition: 0.25s;
transition: 0.25s;
}
#navigationMenu a{
background: uri( http ://4. bp. blogspot com/-tsHedRsfZSU/
TpVKZfqlcBI/AAAAAAAAAVo/9WxThkkAMEI
s300/navigation.jpg ) no-repeat;
height:39px;
width:38px;
display: block;
position: relative;
}
/* General hover styles */
#navigationMenu a:hover span{ width auto; padding:
0 20px;overflow:visible; }
#navigationMenu a:hover{
text-decoration: none;
1.*, C SS outer glow with the box-shadow property
-moz-box-shadow:O 0 5px #9ddff5;
-webkit-box-shadow:O 0 5px #9ddff5;
box-shadow:O 0 5px #9ddff5;
}
/* Green Button */
#navigationMenu .home { background-position:O
0; border-radius: 5px 5px 5px 5px;}
#navigationMenu .home:hover {background-position:
0 -39px;}
#navigationMenu .home span{
background-color:#? da315;
color:#3d4f0c;
text-shadow: 1 px 1 px 0 #99bf31 ;
}
/* Blue Button */
#navigationMenu .about {background-position:-
38px 0; border-radius: 5px 5px 5px 5px;}
#navigationMenu .about: hover { backgroundposition:-
38px -39px;}
#navigationMenu .about span{
background-color:#1 e8bb4;
color #223a44;
text-shadow:1px 1px 0 #44a8d0;
}
/* Orange Button */
#navigationMenu .services {background-position:-
76px 0; border-radius: 5px 5px 5px 5px;}
#navigationMenu .services:hover { backgroundposition:-
76px -39px;}
#navigationMenu .services span{
background-color:#c86c1 f;
color #5a3517;
text-shadow:1px 1px 0 #d28344;
/* Yellow Button */
#navigationMenu .portfolio {background-position:-
114px0; border-radius: 5px 5px 5px 5px;}
#navi gationMenu . portfolio: hover { backgroundpositi on:-
114px -39px;}
#navigationMenu .portfolio span{
background-color:#d0a525;
color:#604e 18;
text-shadow: 1 px 1 px 0 #d8b54b;
}
/* Purple Button *I
#navigationMenu .contact {background-position:-
152px 0; border-radius: 5px 5px 5px 5px;}
#navigationMenu .contact hover { backgroundposition:-
152px -39px;}
#navigationMenu .contact span{
background-color:#af1 e83;
color:#460f35;
text-shadow:1px 1px 0 #d244a6;
}
/* The styles below are only needed for the demo
page*/
#tengah{
margin 80px auto;
position: relative;
width40px;
}
h1{
color#fff;
font-size:30px;
font-weight:normal;
padding:60px 0 20px;
text- align:center;
}
h2{
font-weight normal;
text-align center;
}
h1 ,h2{
font-family »Myriad Pro» ,Ari al, Helvetica, sansseri f;
}
a, a:visited,a:active {
color :#01 96e3;
text-decoration:none;
outline:none;
}
a:hover{
text-decoration: underline;
}
a img{
border none;
}
</style> Script Di atas adalah untuk mengatur tampilan
menu, contoh penerapan di kode HTML
CONTOH PENERAPAN Dl I<ODE HTML
<div id=»tengah»>
<ul id=»navigationMenu»>
<li>
<a class=>>home» href=»#»>
<span>Home</span
<Ia>
</li>
<li>
<a class=»about» href=»#»>
<span> About</span>
<Ia>
</li>
<li>
<a class=»services» href=»#»>
<span>Services</span>
<Ia>
<IIi>
<li>
<a class= »portfolio» href= »#»>
<span>Portfolio</span>
<Ia>
</li>
<li>
<a class=»contact» href=»#»>
<span>Contact us</span>
<Ia>
</li>
</ul>
</div>