|
4、模擬窗口的陰影
在彈出菜單和窗口下的陰影不止是看起來(lái)很漂亮這么簡(jiǎn)單。它們幫助菜單或者窗口通過(guò)強(qiáng)調(diào)從背景中脫穎而出。它們還通過(guò)周圍暗色調(diào)區(qū)域來(lái)屏蔽掉背景內(nèi)容的噪音。
這種技術(shù)來(lái)源于傳統(tǒng)的桌面軟件，幫助用戶把他們的焦點(diǎn)放在出現(xiàn)的窗口上。由于大多數(shù)情景窗口是不容易從桌面程序中辨識(shí)出來(lái)，所以陰影幫助他們更接近于讀者，因?yàn)楦杏X(jué)上窗口似乎是三維地浮在其他頁(yè)面上。
Digg 的登錄窗口有一個(gè)厚厚的陰影圍繞它來(lái)屏蔽網(wǎng)頁(yè)噪音。
為了實(shí)現(xiàn)這一效果，設(shè)計(jì)師往往建立一個(gè)透明的容器與PNG圖像作為背景，把內(nèi)容放進(jìn)容器中——在盒子各邊加上等距的邊框。另一種選擇是使用一個(gè)擁有透明邊框的背景圖像并且通過(guò)絕對(duì)定位來(lái)控制盒子內(nèi)容的位置。這正是Digg的做法——這是他們正在使用的圖片（dialog.png） 。這是他們使用的代碼和CSS樣式：
(X)HTML:
<div id="container">
<div style="display: block; top: 236px; opacity: 1;" class="dialog">
<div class="body">
<div class="content">
...
</div>
</div>
</div>
</div>
CSS:
.dialog {
position: absolute;
left: 50%;
margin-left: -315px;
width: 630px;
z-index: 100001;
}
.dialog .body {
background: url(/img/dialog.png) 0 0; /* semi-transparent .png image */
padding: 40px 13px 10px 40px;
}
或者，你也可以使用基于javascript的lightbox特效庫(kù)，或者通過(guò)使用之間 我們介紹過(guò)的CSS3屬性 去模擬陰影，但是你必須意識(shí)到現(xiàn)在的IE瀏覽器將不會(huì)支持它。
Basecamp 的項(xiàng)目切換窗口有一個(gè)大的輕陰影，幫助菜單區(qū)域脫穎而出。
出處：折折熊de交互論
責(zé)任編輯：moby
上一頁(yè) 10大實(shí)用web應(yīng)用界面技術(shù) [2] 下一頁(yè) 10大實(shí)用web應(yīng)用界面技術(shù) [4]
|
第 1 頁(yè) 
第 3 頁(yè) 10大實(shí)用web應(yīng)用界面技術(shù) [3]
