|
相當(dāng)逼真，css3果然強(qiáng)悍。 友情提示：請(qǐng)勿在IE下瀏覽。 查看實(shí)例：http://www./examples/windows7menu/ 點(diǎn)擊下載：http://www./wp-content/plugins/download-monitor/download.php?id=170 來(lái)看下原作者的設(shè)計(jì)草圖： 簡(jiǎn)明創(chuàng)建過(guò)程第一步 ：創(chuàng)建如下菜單結(jié)構(gòu) <div id="startmenu">
<ul id="programs"> <li><a href="#"><img src="firefox-32.png" alt="" />Mozilla Firefoxa>li> <li><a href="#"><img src="chrome.png" alt="" />Google Chromea>li> <li><a href="#"><img src="safari.png" alt="" />Safaria>li> <li><a href="#"><img src="opera.png" alt="" />Operaa>li> <li><a href="#"><img src="ie.png" alt="" />Internet Explorera>li> <li><a href="#"><img src="rss_32.png" alt="" />RSS Feedsa>li> <li><a href="#"><img src="twitter_32.png" alt="" />Twittera>li> <li><a href="#"><img src="delicious_32.png" alt="" />Deliciousa>li> ul> <ul id="links"> <li class="icon"><img src="folder.png" alt="" />li> <li><a href="#"><span>Documentsspan>a>li> <li><a href="#"><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> div> win7的開(kāi)始菜單有二個(gè)部分，左側(cè)程序菜單，右側(cè)系統(tǒng)菜單。 第二步：菜單容器css #startmenu { border:solid 1px #102a3e; overflow:visible; display:inline-block; margin:60px 0 0 20px;
-moz-border-radius:5px;-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(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75)); background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc)); } 有幾個(gè)關(guān)注的點(diǎn),可以留意下：
第三步：菜單左側(cè)部分的css #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;} 這里值得留意的是鼠標(biāo)經(jīng)過(guò)菜單項(xiàng)的效果設(shè)置，也就是#programs a:hover里的樣式，這是難點(diǎn)，也是css3的強(qiáng)大之處，依舊是圓角、陰影、漸變背景。 第四步：菜單右側(cè)的CSS部分 #links {margin:7px; margin-top:-30px;}
#links li.icon {text-align:center;} #links a {border:solid 1px transparent; display: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-box-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, transparent, 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))); } 要留意的點(diǎn)依舊是哪幾項(xiàng)，難點(diǎn)在于細(xì)節(jié)的微調(diào)，尤其是漸變背景的制作，css3中非常靈活，下次有機(jī)會(huì)，發(fā)篇css3漸變背景的詳細(xì)教程。 |
|
|
來(lái)自： 看見(jiàn)就非常 > 《tip》
