10大实用web应用界面技术[译]（4）
作者：折折熊 来源：折折熊de交互论 发布时间：2009-01-20 12:40:00
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 的项目切换窗口有一个大的轻阴影，帮助菜单区域脱颖而出。
0
投稿猜你喜欢
- 当很多人发现在DW4中定义CSS很方便的时候，开始报怨FP2000不能定义CSS，甚至就此抨击FP2000如何的不好。事实上，在FP2000
- 分区表的概念 分区致力于解决支持极大表和索引的关键问题。它采用他们分解成较小和易于管理的称为分区的片(piece)的方法。一旦分区被定义，S
- Microsoft SQL Server 7.0安全问题Microsoft Corporation【「Microsoft SQL Serve
- 利用FSO取得BMP，JPG，PNG，GIF文件信息：大小，宽、高尺寸等 ’:::::::::::::::::::::::::::
- “到底是什么将艺术和设计分开的？”这样一个话题听起来费解，长时间以来， 也已经被讨论过无数次。艺术家和设计师都是通过共通的知识和素养来创造视
- 这里会讨论令Oracle停机时间最小化的步骤。各种形式的停机--计划的或者是非计划的--总是不断地发生，一个DBA应该有正确的备份策略，这样
- 以用户为中心的设计、用户体验，这两个词现在在互联网上几乎随处可见，除了设计师外，很多的用户也都在说这两个词，于是我们经常会听到诸如“这里用户
- 通常我们会在一些javascript的书籍上看到，使用Javascript保留字作为标识符(变量名、函数名、循环标记等)时，会引起程序报错！
- 其中使用到一个分页类CPaging 代码如下:Class CPaging Public RS
有一次去超市换货，本能的找到服务中心，服务中心说这个业务在超市旁边一个房间里，由于忘记带小票，那个小房间的人让我去另外一个小房间调电脑里的记- 在这篇文章中，我将努力揭开Mobile Web开发的神秘面纱，换句话说，也就是为了移动设备上的用户体验可以被接受，代码得怎么设计。我将阐述“
- 一：最近，经常碰到有网友问，如何使vbscript和javascipt传递变量。不知道为什么要这么做。因为每一种脚本语言几乎都可以完成所需要
- Eric A. Meyer 对基于 Web 标准的 CSS 与 HTML 绝非一知半解，他是这个领域杰出的专家，曾写过不少 CSS 方面的书
- 因为工作的原因，开发过一个拆分字符串的SQL函数，现在把它贴出来，与大家共勉学习。该函数如下： &
- 在网络上看到的数字人整合动网论坛的方法都非常不全,站长们都是抄人家的,也不说明可不可用,提供下载的文件也不能下载.现在我提供一些信息。一、整
- 级联样式表在13年前被引入，而且被广泛使用的CSS 2.1 标准在11年前被创建，显然我们现在已经与当年相差千里了。相当了不起的是期间网站开
- 做一个总结，把自己这些年的从业经历和观感罗列一下，某些话可能触及到个人神经，但它们没有恶意。设计师喜欢把世界想象得很美好，社会很和谐，但是这
- JavaScript图片水平翻转后垂直翻反转的特效一：<!--把下列代码加到body区域内--><SCRIPT langu
- HTTP（HyperTextTransferProtocol）是超文本传输协议的缩写，它用于传送WWW方式的数据，关于HTTP协议的详细内容
- 在程序的开发过程中，处理分页是大家接触比较频繁的事件，因为现在软件基本上都是与数据库进行挂钓的。但效率又是我们所追求的，如果是像原来那样把所
