標籤:des style blog http color 使用 os io
前一陣在園子裡看到一篇文章《使用css3仿造window7的開始菜單》,文中僅使用CSS3 實現了Windows 7 開始菜單的動態效果,很久以來一直被WPF/Silverlight 山上的風景所吸引,未成想其他的山也同樣引人入勝。於是心血來潮也嘗試著做了一個Windows 7 案頭效果,先來看幾張吧。
傳統型程式滑鼠Hover 效果:
工作列程式滑鼠Hover 效果:
開始菜單效果:
傳統型程式表徵圖
案頭背景及程式表徵圖的結構如下:
<div id="win"> <ul id="app"> <li>
<a href="#"> <img src="images/computer.png"><br /> Computer</a>
</li> <li>
<a href="#"> <img src="images/recycle.png"><br /> Recycle Bin</a>
</li> <li>
<a href="#"> <img src="images/network.png"><br /> Network</a>
</li> </ul></div>
在案頭<div>中加入背景圖片:
#win{ background-image: url(images/win7bg.jpg); background-position: center; width: 880px; height: 550px; border: #ffffff 1px solid;}
為案頭應用表徵圖添加滑鼠Hover 動態效果,text-shadow 用來設定應用程式文字陰影製作效果,-webkit-border-radius 可設定邊框圓角:
#app{ float: left; text-align: center; margin: -15px 0 0 -30px; list-style: none;}#app a{ text-decoration: none; border: solid 1px transparent; display: block; padding: 3px; margin: 20px 0 0 0; color: #ffffff; text-shadow: 0.2em 0.1em 0.3em #000000;}#app a:hover{ border: solid 1px #bbd6ec; -webkit-border-radius: 3px; box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff; background-color: #5caae8;}
工作列程式表徵圖
下面是工作列結構的HTML代碼:
<div id="taskbar"> <a href="#" id="start"></a> <a href="#" style="left: 60px"> <img src="images/ie.png" /> </a>
<a href="#" style="left: 120px"> <img src="images/library.png" /> </a>
<a href="#" style="left: 180px"> <img src="images/mp.png" /> </a>
<a href="#" style="left: 240px"> <img src="images/live.png" /> </a>
<a href="#" style="left: 300px"> <img src="images/outlook.png" /> </a> <div id="desktop"></div></div>
首先來看看開始菜單表徵圖如何設定,通過Hover 操作變換start.bmp 顯示位置,達到表徵圖發亮效果。
#taskbar #start{ position: absolute; text-align: center; width: 57px; height: 46px; background: url(images/start.bmp) 0 -6px no-repeat;}#taskbar #start:hover{ text-decoration: none; background-position: 0 -114px;}
工作列背景通過taskbarbg.png 實現,其他表徵圖Hover 效果通過改變taskbarhover.png 圖片位置實現表徵圖下方高亮效果。
#taskbar{ height: 42px; width: 880px; margin: -42px 0 0 1px; background: url(images/taskbarbg.png) no-repeat;}#taskbar img{ margin: 5px 0 0 0; width: 30px; height: 29px;}#taskbar a{ position: absolute; text-align: center; width: 57px; height: 46px; background: url(images/taskbarhover.png) 0 -46px no-repeat;}#taskbar a:hover{ background-position: 0 -3px;}
開始菜單
對於開始菜單的設定可以參考之前提到的那篇文章,本篇在其基礎上添加了菜單分割線及透明效果。
<div id="menuwin"> <div id="startmenu"></div> <ul id="programs"> <li><a href="#"> <img src="images/ie.png" />Internet Explorer</a></li> <li><a href="#"> <img src="images/mc.png" />Microsoft Media Center</a></li> <li>
<div id="leftspliter"></div></li> <li><a href="#"> <img src="images/word.png" />Microsoft Word 2010</a></li> <li><a href="#"> <img src="images/excel.png" />Microsoft Excel 2010</a></li> <li><a href="#"> <img src="images/powerpoint.png" />Microsoft PowerPoint 2010</a></li> <li><a href="#"> <img src="images/access.png" />Microsoft Access 2010</a></li> <li><a href="#"> <img src="images/update.png" />Windows Update</a></li> <li> <div id="leftspliter"></div></li> <li><a href="#"> <img src="images/narrow.png" />All Programs</a></li> <li> <img id="search" src="images/search.png" /></li> </ul> <ul id="links"> <li class="icon"><img src="images/user.png" /></li> <li><a href="#"><span>Documents</span></a></li> <li><a href="#"><span>Pictures</span></a></li> <li><a href="#"><span>Music</span></a></li> <li><div id="rightspliter"></div></li> <li><a href="#"><span>Games</span></a></li> <li><a href="#"><span>Computer</span></a></li> <li><div id="rightspliter"></div></li> <li><a href="#"><span>Control Panel</span></a></li> <li><a href="#"><span>Devices and Printers</span></a></li> <li><a href="#"><span>Default Programs</span></a></li> </ul></div>
開始菜單通過opacity 設定其透明度:
#startmenu{ border: solid 1px #102a3e; overflow: visible; display: block; float: left; height: 404px; width: 400px; opacity: 0.9; -webkit-border-radius: 5px; position: absolute; box-shadow: inset 0 0 1px #ffffff; -webkit-box-shadow: inset 0 0 1px #ffffff; background-color: #619bb9; background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc));}
通過jQuery(common.js) 完成開始菜單開啟/關閉效果
$(document).ready(function () { $("#start").click(function () { $("#menuwin").css("display", "block"); }); $("#win").click(function () { $("#menuwin").css("display", "none"); }); $("#desktop").click(function () { $("#menuwin").css("display", "none"); });});
原始碼下載
請使用Chrome 瀏覽