阴影效果成了平面设计的一个套路,平面设计师把它当作瑞士军刀的起子,随处使用,尽管招致不少非议,却一直广受欢迎。虽然用图像编辑软件也能实现阴影效果,但在Web设计快速发展的今天,适应性和易用性是大势所趋,这种以固定背景效果制作出的静态图片很难有良好的适应性。
假如有一种技术,用 CSS 对任意块级元素灵活地添加阴影,而且能随着内容的大小自动扩展,还要适用于大多数流行的浏览器,那该有多好!不信么?告诉您,只需写几行代码就能做到。
是不是很有意思?先别急,这可不是我们的发明,我们只不过对此作了改进。这个技术是由著名的 1976 design 上的 Dunstan Orchard (向 Dunstan 脱帽致敬)构思出来的,并且作了演示。我们觉得这个方法简洁实用,但深入研究之后,发现还有改进的余地。
这里是它的工作原理:先用图像软件制作一幅背景图片,图片上只有阴影,不能有可见的边界(一种简便的方法是对空白的选择区域应用某种效果)。这个图片要能够覆盖将要修饰的最大元素,实践当中,800 x 600 一般就足够了。将它保存为GIF图片,记住一定要在背景颜色之上应用效果,此外再把它另存为完全透明的PNG图片(即没有背景色)。这是为了根据浏览器的能力区别对待[译注:即让支持透明 PNG 图片的浏览器使用PNG,IE 使用GIF。]。这里是将要用到的 GIF 文件以及 PNG 文件。
我们先从如何为图片添加阴影开始,然后再扩展到其他块级元素。为了直观起见,我们把这个 class 命名为 img-shadow,我们先用这只可爱的小猫作个试验:
相应的代码(只需额外增加一个 div ):
<div class="img-shadow">
<img src="cat.jpg" alt="test"/>
</div>
下图演示了我们所用到的技术:
首先,我们用先前准备的阴影图片作为该 div 的背景。
background: url(shadow.gif) no-repeat bottom right;
然后,我们将图片的左边距和上边距设为负值,使它“投下”阴影,阴影的宽度为 6 个像素,也就代码中的数字:
margin: -6px 6px 6px -6px;
为避免指定该 div
的大小,我们将它浮动起来。(否则它将占据全部可用的水平空间。)
还记得前面我们说过,要让好的浏览器显示好的阴影效果吗?诀窍在这行代码:
background: url(shadowAlpha.png) no-repeat right bottom !important;
这里的“!important”表示此处指定的样式的优先级高于同元素上的普通样式声明(参见 标准),对透明 PNG 缺乏内在支持的所有版本的 Internet Explorer 刚好也不支持“!importan”。通过互相矛盾的两次声明,我们得到了期望的结果(IE 用的是第二个,而大多数浏览器会采用第一个)。最终的结果是这样的:当需要改变背景颜色时,支持 PNG 的浏览器显示出的阴影效果非常完美。而在可怜的 IE 中,阴影还是它原来的颜色。
你可能会问,为什么要这样做?答案是可以一箭双雕。
- 我们能够: 不费吹灰之力就可以自动地让高级的浏览器发挥它的最好效果。
- 它能自我修复: 如果(随Longhorn而来的)新版 Internet Explorer 支持这两个标准,我们无须进行修补,仍然能够获得精确、完全透明的阴影。
最终的 CSS 代码是这样的:
.img-shadow {
float:left;
background: url(shadowAlpha.png) no-repeat bottom right !important;
background: url(shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.img-shadow img {
display: block;
position: relative;
background-color: #fff;
border: 1px solid #a9a9a9;
margin: -6px 6px 6px -6px;
padding: 4px;
}
为了补偿 IE 浮动模型的错误,所以上面代码中的 margin 有些差异,而最后一行的 padding 将图片框装扮得更加漂亮,可惜在 IE 5.0 和 5.5 中不起作用,不过阴影效果仍然存在。
在符合标准的浏览器中,阴影和背景无缝融合在一起。在 IE 中,除非你把阴影和背景设为同一颜色,否则阴影和背景的过渡就显得比较生硬。这里就是最终效果:[译注:请在不同的浏览器中观看效果。]
接下来让我们为一段文字加上阴影效果。
一段文字只不过是一个区块元素,按理说上面的技术应该同样适用。实际上,在大多数浏览器中都没问题,猜猜看,到底是哪个浏览器搞的破坏?
在开发这种技术时,我们发现如果要应付的不是图片,而是一个块级元素,则难度之大超出了我们的想象。不管我们如何尝试,IE 总是把左上角(也就是“突出”阴影之外的部分)给切掉。更可笑的是,只有 5.0 版的 IE 表现正常。看来任何技巧、溢出设定或者建议都于事无补(当然也试过念咒语)。我们决定放弃,转而寻求别的解决方案。
我们先从 Douglas Bowman 的Sliding Doors(滑门)方法开始,当然额外的开销(另一个 div)必须要有,我们的这个段落应该是这个样子:
<div class="p-shadow">
<div>
<p>The rain in Spain ...</p>
</div>
</div>
与刚才指定负的左、上边距(margin)值的做法相反,这回我们为右、下边距(padding)指定正值,将阴影(其实是外层 div 的背景)暴露出来。然后,我们用一个局部透明的 GIF 图片放在阴影之上,伪造出假的阴影偏移效果。注意,图片可见部分的颜色要与用于阴影效果的背景颜色相同。这幅图片的名字为 “shadow2.gif”。图片的构成如下:
这就是GIF 图片的例子(这幅图片在浏览器的中看起来好像是空白的,所以最好把它存起来,在图形处理软件中观看。)
这就是我们想要达到的效果:
下面是实现这种效果的样式表。注意额外的图片和补白(padding)仅仅用于 Internet Explorer。绝大多数浏览器会忽略内层的 div,仍然使用前面讲过的图片阴影效果技术。
.p-shadow {
width: 90%;
float:left;
background: url(shadowAlpha.png) no-repeat bottom right !important;
background: url(shadow.gif) no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}
.p-shadow div {
background: none !important;
background: url(shadow2.gif) no-repeat left top;
padding: 0 !important;
padding: 0 6px 6px 0;
}
.p-shadow p {
color: #777;
background-color: #fff;
font: italic 1em georgia, serif;
border: 1px solid #a9a9a9;
padding: 4px;
margin: -6px 6px 6px -6px !important;
margin: 0;
}
在前面的图片例子中提到的背景色注意事项,段落也应加以注意。这就是最终的效果。(请试着改变浏览器窗口大小,观察段落大小的改变和阴影的调整。)
The rain in Spain falls mainly on the plain. The rain in Spain falls mainly on the plain. The rain in Spain falls mainly on the plain.
附注
本文为了清楚起见,将图片和段落的样式打散了,但其实可以做些小小的更改,将它们整合在一起。
这个技术已经在 Gecko 引擎的浏览器、Safari、Opera 和 IE 5.0+ 中 测试过,除了提到的一些微小的差异,还没有发现什么问题。应当适用于大多数的浏览器(除了 Netscape 4.x)。
致谢
感谢发明了阴影技术的 Dunstan,以及 Douglas Bowman 的 Sliding Doors 技术。
发表评论
-
Oseicq是最好的可2次开发的即时通讯软件Oseicq即时通讯源码 .
2012-02-02 12:48 694Oseicq是最好的可2次开发的即时通讯软件,专 ... -
正则表达式在UBB论坛中的应用
2007-03-07 09:01 852一、读者指引 读者指引帮助你掌握本文的梗概。以免你看了大 ... -
!important和(空格)/**/:的组合技巧及其他
2007-03-07 09:06 693先温习一下对于IE的box-model的破解 IE box-m ... -
JS的IE和Firefox兼容性汇编
2007-03-07 09:08 538JS的IE和Firefox兼容性汇编(原作:hotman_x) ... -
javascript如何对中文字符进行url编码
2007-03-07 09:11 1153今天来点轻松得,这几天因做一个项目用到了对URL的编解码,就总 ... -
把应用程序从 Internet Explorer 迁移到 Mozilla
2007-03-07 09:49 1332级别: 初级 Doron Rosenberg (doronr@ ... -
一段折叠代码,带记忆功能的
2007-03-08 11:28 1128<script language="Java ... -
JavaScript中的私有成员
2007-03-10 08:16 715本文地址:http://www.nir ... -
共享一个ASP无组件折线图源码!强
2007-06-07 11:42 960我又来了,这几天我无意发现了一个地方有这个源码。当时下下来就没 ... -
网页设计中文标题h1~h4应用技巧
2007-07-10 17:00 1760体验css提示您本教程适合初学者应用,高手还望见笑。欢迎来信[ ...
相关推荐
css怎么实现阴影效果css怎么实现阴影效果css怎么实现阴影效果css怎么实现阴影效果css怎么实现阴影效果css怎么实现阴影效果css怎么实现阴影效果css怎么实现阴影效果css怎么实现阴影效果css怎么实现阴影效果css怎么...
纯CSS3实现的各种阴影效果,无需图片和js代码即可实现图片、按钮等元素的阴影效果,完全通过样式控制阴影大小、方向和深度,经测试效果相当不错非常酷。
纯CSS实现鼠标移上图片添加阴影效果.rar纯CSS实现鼠标移上图片添加阴影效果.rar纯CSS实现鼠标移上图片添加阴影效果.rar纯CSS实现鼠标移上图片添加阴影效果.rar纯CSS实现鼠标移上图片添加阴影效果.rar纯CSS实现鼠标移...
2.需要使用css3中的至少两种效果,并且用到css3的地方请注释,例如阴影效果,动画效果,2D转换,3D转换,css3过渡等等。 3.要求css样式写在head的style里,或者新建一个css文件写在里面。图片放在单独建立的文件夹下...
CSS实现当鼠标滑过图片出现阴影效果, 效果蛮不错的.
这是一个纯粹的CSS3效果,模拟实现Pseudo-Classes模拟卡片翘边阴影效果、方框边框阴影效果,IE8及以下浏览器对CSS3不感冒,童鞋们就不要试了,但完美支持ie9、chrome、safari、firefox、opera、360等浏览器。...
在网页设计中常常要使用到阴影效果,通过阴影效果可以很好的突出一个元素,在 CSS3 出现之前,我们想要为文本或者元素添加阴影效果需要借助图像才能实现,很不方便。而 CSS3 出现之后,我们通过 text-shadow 和 box-...
CSS3文字阴影实现乳白文字效果是一款有效利用css3的text-shadow属性,可以实现很多漂亮的效果。
下面小编就为大家带来一篇CSS实现曲面阴影效果的简单实例(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
今天给大家推荐一款类似lightbox弹出界面的效果。需要在支持CSS3属性的浏览器下浏览
css3实现底部阴影按钮,初始化时,底部有阴影效果,不过这个还是很另类的了,一般网站的按钮都会弄的很大气,不会太花哨,现在扁平化的按钮看起来也不错哦,这款按钮可以看源码好好学习,php中文网推荐下载!
css+div实现图片内阴影效果源码免费下载
纯CSS实现鼠标移上图片添加阴影效果! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
CSS3实现网页特效,在不支持CSS3属性的浏览器下亦可观看,只是少了描边阴影效果
CSS3实现的图片列表,当鼠标悬停在图片上的时候,图片立体显示,且带有一定阴影效果,点击图片则会弹出提示对话框。 建议开发童鞋使用跨平台开发工具——统一开发环境UDE来进行查看、调试、开发哦~~它是一款HTML5跨...
鼠标悬浮弹出下拉菜单,下拉菜单有阴影效果,美观简洁。
用HTML+CSS实现 旋转太极图(有阴影效果,自动旋转,转速可调)
3D阴影效果css3按钮代码是一款纯CSS3实现的带有阴影效果的css3 3d按钮特效。
今天我们要给大家带来一款很别致的纯CSS3垂直菜单导航,它的特点是菜单项带有3D立体阴影的效果,同时当鼠标滑过菜单项时,菜单项便会吸附在页面上,移开鼠标菜单项便又会离开页面呈现3D阴影的视觉效果。这款菜单基于...