4、模拟窗口的阴影

在弹出菜单和窗口下的阴影不止是看起来很漂亮这么简单。它们帮助菜单或者窗口通过强调从背景中脱颖而出。它们还通过周围暗色调区域来屏蔽掉背景内容的噪音。

这种技术来源于传统的桌面软件，帮助用户把他们的焦点放在出现的窗口上。由于大多数情景窗口是不容易从桌面程序中辨识出来，所以阴影帮助他们更接近于读者，因为感觉上窗口似乎是三维地浮在其他页面上。

Digg 的登录窗口有一个厚厚的阴影围绕它来屏蔽网页噪音。

为了实现这一效果，设计师往往建立一个透明的容器与PNG图像作为背景，把内容放进容器中——在盒子各边加上等距的边框。另一种选择是使用一个拥有透明边框的背景图像并且通过绝对定位来控制盒子内容的位置。这正是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特效库，或者通过使用之间 我们介绍过的CSS3属性 去模拟阴影，但是你必须意识到现在的IE浏览器将不会支持它。

Basecamp 的项目切换窗口有一个大的轻阴影，帮助菜单区域脱颖而出。

出处：折折熊de交互论
责任编辑：moby

上一页 10大实用web应用界面技术 [2] 下一页 10大实用web应用界面技术 [4]