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
投稿猜你喜欢
前言验证码的种类有很多，它是常用的一种反爬手段，包括：图片验证码，滑块验证码，等一些常见的验证码场景。识别验证码的python 库有很多，用- 本次爬取网站为opgg，网址为：” http://www.op.gg/champion/statistics”由网站界面可以看出，右侧有英雄
- Anaconda简介Anaconda，是一个开源的Python发行版本，其包含了conda、Python以及一大堆安装好的工具包及依赖项，比
- 1.lower()将字符串中的大写字母转换成小写字母语法：str.lower()#举例：str1 = "LiBai is a bo
- 兼容当前HTML/XHTML文档是否有DTD声明：以下为程序代码：var xtop = document.documentElement.s
- 一、Map是什么？map是一堆键值对的未排序集合，类似Python中字典的概念，它的格式为map[keyType]valueType，是一个
- 总结大家都知道，在开发中提供用户登录以及维护用户的登录状态，是一个拥有用户系统的软件应用普遍需要做的事情。像微信这样的一个社交平台，如果做一
- 刚入pytorch的坑，代码还没看太懂。之前用keras用习惯了，第一次使用pytorch还有些不适应，希望广大老司机多多指教。首先说说，我
- 一级行政区经纬度一级行政区（省级行政区）：34个（23个省、5个自治区、4个直辖市、2个特别行政区）provinces = {
- 写在之前这几天的阅读量蜜汁低，是什么原因我也没搞清楚，如果你们觉得我哪里写的有问题，或者是哪里不好，欢迎后台或者微信告知我，先行谢过。昨天的
- 前言最近因为工作的原因，在做APP购物车下单支付这一块儿.被测试提了一个bug,当点加入购物车点的比较快的时候,同一个商品在购物车中出现了两
- 在已有的shapefile文件的基础上增加字段： # -*- coding:gb2312 -*-import shapefiler=shap
- 如何最准确地统计在线用户数？我们推荐的这个程序据说是目前最好的在线用户数量统计程序。代码如下：'首先要设置好global.asa&n
- 怎样判断一个JavaScript变量是array还是obiect？ 答案： 1、如果你只是用typeof来检查该变量，不论是array还是o
- 在技术更新的进程中, 仍然有一些人死抱着已经过了气的东西不放. 也有一些人虽然进入到新的世界, 但仍摆脱不了陈
- 0. 学习目标在诸如单链表、双线链表等普通链表中，查找、插入和删除操作由于必须从头结点遍历链表才能找到相关链表，因此时间复杂度均为O(n)。
- 本文实例讲述了Python基于Tkinter实现的记事本。分享给大家供大家参考。具体如下：from Tkinter import *root
- 函数绑定(Function binding)很有可能是你在开始使用JavaScript时最少关注的一点，但是当你意识到你需要一个解决方案来解
- 前言本文主要给大家介绍的关于Python批量压缩png的相关资料，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍：1.需求为什
- 由于最近需要做项目，需要进行分词等，查了资料之后，发现python NLTK很强大，于是就想试试看。在网上找了很多安装资料，都不太完整，下载
