CSS3 code example: CSS3 make fresh Web navigation

Article Introduction: CSS3 make small fresh navigation.

HTML structure

<ul class= "NAV" >
<li id= "button1" ><a href= "#button1" >Home</a></li>
<li id= "Button2" ><a href= "#button2" >About</a></li>
<li id= "Button3" ><a href= "#button3" >Contact</a></li>
<li id= "Button4" ><a href= "#button4" >F.A.Q</a></li>
<li>
<a href= "#" >s</a>
<input type= "Search" placeholder= "type your search here ..."/>
</li>
</ul>

CSS Code

There's nothing to comment on.

A {text-decoration:none!important;outline:none!important;}
Body {Background:rgb (245,245,245);}

. Nav {
margin:50px Auto;
Text-align:center;
width:591px;
height:41px;
BORDER:1PX solid;
Border-color:rgb (181,181,181) RGB (235,235,235) RGB (236,236,236) RGB (235,235,235);
border-radius:2px;
padding:1px;
Background:rgb (240,240,240);
box-shadow:0 1px 0 rgb (255,255,255);
}
. Nav Li {
Float:left;
position:relative;
}
. Nav li:not (: last-child) a {
Display:block;
Color:rgb (138,138,138);
width:75px;
height:39px;
font-size:14px;
line-height:39px;
BORDER:1PX solid;
Border-color:rgb (213,213,213) RGB (216,216,216) RGB (197,197,197) RGB (216,216,216);
border-radius:2px;
margin-right:1px;
text-shadow:0 1px 0 rgb (247,247,247);
Background:-webkit-linear-gradient (Top,rgb (248,248,248), RGB (241,241,241) 50%,rgb (221,221,221));
Background:-moz-linear-gradient (Top,rgb (248,248,248), RGB (241,241,241) 50%,rgb (221,221,221));
Background:-ms-linear-gradient (Top,rgb (248,248,248), RGB (241,241,241) 50%,rgb (221,221,221));
Background:linear-gradient (Top,rgb (248,248,248), RGB (241,241,241) 50%,rgb (221,221,221));
Box-shadow:inset 0 1px 0 rgb (255,255,255), 0 1px 0 rgb (134,134,134), 0 2px 0 rgb (193,193,193);
}
. Nav li:not (: last-child): Target a {
Background:-*-linear-gradient (Top,rgb (214,243,119), RGB (203,232,107));
Box-shadow:inset 0 1px 0 rgb (116,133,59), inset 0 2px 0 rgba (116,133,59,0.1), inset 0 3px 0 rgba (116,133,59,0.05), inset 0 0 5px RGB (216,216,216),
0 1px 0 RGB (250,250,250), 0 2px 0 rgb (241,241,241);
}
. Nav input[type= "Search"] {
width:264px;
height:39px;
padding:0;
padding-left:12px;
margin-left:1px;
BORDER:1PX solid;
Border-color:rgb (213,213,213) RGB (216,216,216);
border-radius:2px;
Background:-webkit-linear-gradient (Top,rgb (226,226,226), RGB (241,241,241) 50%,rgb (247,247,247) 90%,rgb ( 242,242,242));
Background:-moz-linear-gradient (Top,rgb (226,226,226), RGB (241,241,241) 50%,rgb (247,247,247) 90%,rgb (242,242,242)) ;
Background:-ms-linear-gradient (Top,rgb (226,226,226), RGB (241,241,241) 50%,rgb (247,247,247) 90%,rgb (242,242,242));
Background:linear-gradient (Top,rgb (226,226,226), RGB (241,241,241) 50%,rgb (247,247,247) 90%,rgb (242,242,242));
Box-shadow:inset 0 1px 0 rgb (138,138,138), inset 0 2px 0 rgb (206,206,206), inset 0 3px 0 rgb (217,217,217);
}
. Nav Li:last-child a {
Position:absolute;
height:35px;
width:34px;
Color:rgb (180,180,180);
font:17px/35px Icon-search;
text-shadow:0 1px 0 rgb (255,255,255);
BORDER:1PX solid;
Border-color:rgb (195,195,195) RGB (214,214,214) RGB (146,146,146) RGB (214,214,214);
border-radius:2px;
Background:-webkit-linear-gradient (Top,rgb (248,248,248), RGB (218,218,218));
Background:-moz-linear-gradient (Top,rgb (248,248,248), RGB (218,218,218));
Background:-ms-linear-gradient (Top,rgb (248,248,248), RGB (218,218,218));
Background:linear-gradient (Top,rgb (248,248,248), RGB (218,218,218));
Box-shadow:inset 0 1px 0 rgb (255,255,255), 0 1px 0 rgb (185,185,185);
top:3px;
right:2px;
-webkit-transition:color 500ms Ease;
-moz-transition:color 500ms Ease;
Transition:color 500ms Ease;
}
. Nav li:last-child a:hover {color:rgb (190,218,100);}
. Nav li:last-child a:active {background:-*-linear-gradient (Top,rgb (218,218,218), RGB (242,242,242));

@font-face {
font-family: ' Icon-search ';
Src:url ("Font/icon-search.eot");
Src:url ("Font/icon-search.eot #iefix") format (' Embedded-opentype '),
URL (".. /font/icon-search.woff ") format (' Woff '),
URL ("Font/icon-search.ttf") format (' TrueType '),
URL ("Font/icon-search.svg#icon-search") format (' SVG ');
Font-weight:normal;
Font-style:normal;
}