非图片、滤镜制作的阴影窗口

2005年12月12日 | 作者: 牧天 | 分类: CSS, XHTML/HTML

带阴影效果窗口最常见和方便的方法是使用滤镜，可以直接定义，但仅局限于IE环境使用。

其次是使用阴影图片做偏移背景图实现，兼容性很好。

阴影可以看作一种平滑的色阶过渡，由深到浅。于是我们可以采用多层覆盖模拟这种过度。这种方法只是在技术角度模拟出滤镜效果，纯XHTML/CSS实现，兼容IIE6和FF1.5，最终效果图：

最终效果图

阴影可以看作一种平滑的色阶过渡，由深到浅。我们可以采用多层覆盖模拟这种过度。

绝对定位定义1个容器：

#content { position:absolute; top:135px; left:40px; width:170px; height:295px; padding:10px; border:1px solid #000; background-color:#fafafa; z-index:7;}

定义5个层，色阶依次为#999 #aaa #ccc #ddd #eee，按照固定偏移量1px计算好定位位置：

#shadow1 { position:absolute; top:137px; left:42px; width:190px; height:315px; border-top:0; border-right:1px solid #999; border-bottom:1px solid #999; border-left:0; z-index:6;}
#shadow2 { position:bsolute; top:138px; left:43px; width:190px; height:315px; border-top:0; border-right:1px solid #aaa; border-bottom:1px solid #aaa; border-left:0; z-index:5;}
#shadow3 { position:absolute; top:139px; left:44px; width:190px; height:315px; border-top:0; border-right:1px solid #ccc; border-bottom:1px solid #ccc; border-left:0; z-index:4;}
#shadow4 { position:absolute; top:140px; left:45px; width:190px; height:315px; border-top:0; border-right:1px solid #ddd; border-bottom:1px solid #ddd; border-left:0; z-index:3;}
#shadow5 { position:absolute; top:142px; left:47px; width:189px; height:314px; border-top:0; border-right:1px solid #eee; order-bottom:1px solid #eee; border-left:0; z-index:2;}

调用后会得到如下结果：

效果演示

实现2个阴影层更麻烦一些，因为阴影交叉的区域需要重新模拟，还必须调整好层优先级。这是第2个容器：

#content2 { position:absolute; top:90px; left:100px; width:220px; height:300px; padding:10px; border:1px solid #000; background-color:#fff; z-index:13;}

同样的原理再定义10个层，即实现开头效果：

#shadow6, #shadow11 { position:absolute; top:92px; width:129px; left:102px; height:320px; border-top:0; border-right:0; border-bottom:1px solid #999; border-left:0; z-index:12;}
#shadow7, #shadow12 { position:absolute; top:93px; left:103px; width:128px; height:320px; border-top:0; border-right:0; border-bottom:1px solid #aaa; border-left:0; z-index:11;}
#shadow8, #shadow13 { position:absolute; top:94px; left:104px; width:127px; height:320px; border-top:0; border-right:0; border-bottom:1px solid #ccc; border-left:0; z-index:10;}
#shadow9, #shadow14 { position:absolute; top:95px; left:105px; width:126px; height:320px; border-top:0; border-right:0; border-bottom:1px solid #ddd; border-left:0; z-index:9;}
#shadow10, #shadow15 { position:absolute; top:97px; left:107px; width:124px; height:319px; border-top:0; border-right:0; border-bottom:1px solid #eee; border-left:0; z-index:8;}#shadow11 {left:232px; width:110px; border-right:1px solid #999;}
#shadow12 {left:233px; width:110px; border-right:1px solid #aaa;}
#shadow13 {left:234px; width:110px; border-right:1px solid #ccc;}
#shadow14 {left:235px; width:110px; border-right:1px solid #ddd;}
#shadow15 {left:236px; width:110px; border-right:1px solid #eee;}

如果要想相对定位实现，必须经过更复杂的定位计算，实际使用也有限不做讨论。其他色彩阴影同理，只要配好色彩的色阶。

这个效果和传统滤镜实现还是有差别的，项目使用还是建议图片模拟。

Referrence
Shadow Demo http://www.designdetector.com/tips/shadow.html

RSS 2.0 | Trackback.