Using CSS3 to mimic window7 's Start menu

Quite lifelike, CSS3 really tough. To pay attention to the point is still what several, the difficulty lies in the fine-tuning of the details, especially the production of gradient background, CSS3 is very flexible, the next opportunity to send a CSS3 gradient background of the detailed tutorial.

Quite lifelike, CSS3 really tough.
Friendly tips: Do not browse under IE.
Take a look at the original author's design sketches:

Concise creation Process

The first step: Create the following menu structure

<p id= "StartMenu" > <ul id= "Programs" > <li><a href= "#" >mozilla firefoxa></li> <li><a href= "#" >Google Chromea ></li> <li><a href= "#" >safaria></li> <li> <a href= "#" >operaa></li> <li><a href= "#" >internet explorera></li> <li><a href=" # ">rss feedsa></li> <li><a href= "#" >Twittera></ Li> <li><a href= "#" >deliciousa></li> <ul> <ul id= "Links" > <li class= "icon" ></li> <li><a href= "#" ><span>Documentsspan>a></li> <li><a href= "#" &Gt;<span>picturesspan>a></li> <li><a href= "#" ><span>musicspan>a></ Li> <li><a href= "#" ><span>Computerspan>a></li> <li><a href= "#" >< Span>networkspan>a></li> <li><a href= "#" ><span>connect tospan>a></li > <ul> p>

The Win7 Start menu has two sections, the left-hand Program menu, and the right-side system menu.

Step Two: Menu container CSS

#startmenu {border:solid 1px #102a3e; overflow:visible; display:inline-block; margin:60px 0 0 20px;-moz-border-radius:5 px;-webkit-border-radius:5px; position:relative; Box-shadow:inset 0 0 1px #fff; -moz-box-shadow:inset 0 0 1px #fff; -webkit-box-shadow:inset 0 0 1px #fff; Background-color: #619bb9; Background:-moz-linear-gradient (Top, RGBA (92, 123, 165, 0.75), RGBA (220, 176,, 0.75) 50%, Rgba (0.75)); Background:-webkit-gradient (linear, center top, center bottom, from (#327aa4), Color-stop (45%, #2e4b5a), to (#5cb0dc)); }

There are several points of concern that can be noted below:

-moz-border-radius:5px;-webkit-border-radius:5px, fillet effect, which is the most widely used box-shadow:inset in CSS3 0 0 1px #fff; -moz-box-shadow:inset 0 0 1px #fff; -webkit-box-shadow:inset 0 0 1px #fff Shadow effect background:-moz-linear-gradient (top, RGBA (123, 165, 0.75), Rgba (46, 75, 9 0, 0.75) 50%, Rgba (92, 176, 220, 0.75)); gradient background

Step three: CSS in the left part of the menu

#programs {background: #fff; border:solid 1px #365167 margin:7px 0 7px 7px box-shadow:0 0 1px #fff-moz-box-shadow:0 0 1px #fff; -webkit-box-shadow:0 0 1px #fff; -moz-border-radius:3px;-webkit-border-radius:3px;} #programs a {border:solid 1px transparent; display:block; padding:3px; margin:3px; color: #4b4b4b; text-decoration:none; min-width:220px;}  #programs a:hover {border:solid 1px #7da2ce;-moz-border-radius:3px;-webkit-border-radius:3px; Box-shadow:inset 0 0 1px #fff; -moz-box-shadow:inset 0 0 1px #fff; -webkit-box-shadow:inset 0 0 1px #fff; Background-color: #cfe3fd; Background:-moz-linear-gradient (top, #dcebfd, #c2dcfd); Background:-webkit-gradient (linear, center top, center bottom, from (#dcebfd), to (#c2dcfd));} #programs a img {border:0; vertical-align:middle; margin:0 5px 0 0;}

Here is worth noting is the mouse after the effect of the menu item set, that is, the style of #programs a:hover, this is the difficulty, is also the CSS3 of the strong, is still a round corner, shadow, gradient background.

Fourth Step: CSS section on the right side of the menu

#links {margin:7px; margin-top:-30px;} #links Li.icon {text-align:center;} #links a {border:solid 1px transparent; displa Y:block; margin:5px 0; position:relative; Color: #fff; Text-decoration:none; min-width:120px;} #links a:hover {border:solid 1px #000;-moz-border-radius:3px;-webkit-border-radius:3px; box-shadow:0 0 1px #fff;-moz-b Ox-shadow:inset 0 0 1px #fff; -webkit-box-shadow:inset 0 0 1px #fff; Background-color: #658da0; Background:-moz-linear-gradient (center left, Rgba (81,115,132,0.55), Rgba (121,163,184,0.55) 50%, Rgba ( 81,115,132,0.55)); Background:-webkit-gradient (linear, 0% 100%, 100% 100%, from (#517384), Color-stop (50%, #79a3b8), to (#517384)); } #links a span {padding:5px; display:block;} #links a:hover span {background:-moz-linear-gradient (center top, Transpa Rent, Transparent 49%, Rgba (2,37,58,0.5) 50%, Rgba (63,111,135,0.5)); Background:-webkit-gradient (linear, center top, center bottom, from (Transparent), color-stop (49%, Transparent), Color-stop (50%, Rgba (2,37,58,0.5)), to (Rgba (63,111,135,0.5))); }

To pay attention to the point is still what several, the difficulty is the fine-tuning of the details, especially the production of gradient background, CSS3 very flexible.

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!