2004年02月23日 16:48 点击:超过8000次
本实例主要是用到样式表的FlipV滤镜(将图像垂直翻转)和Alpha滤镜(半透明效果)。
样式表有一个很大的不足就是它的滤镜不能产生垂直渐变的效果。(但可以产生水平渐变效果)。而且又不能将图片旋转90°或270°,为克服这个不足,本例中只好采用JavaScript做一个循环程序来产生渐变效果。
效果如右图所示,就好像显示器是放在玻璃茶几上产生的倒影效果。
这个效果如果全部用Photoshop可以轻松实现。但是为了练习或者说明样式表、HTML的功能的强大,可以举这个例子。因为整个右图如果存为GIF格式,为12K,而用代码和图片,仅在3K以内。
制作步骤:
1.右图是由一张显示器的图片59.gif和背景图片hxb.gif组成的。背景图片可以用Photoshop的渐变工具制作,前景色是#4FA6E8,背景色是#9CD8F8,图片大小是宽1px,高400px。
2.做一个300×400的表格,背景图片为hxb.gif。设单元格为顶边对齐,段落是居中,HTML代码是
。
4.在这张图片代码后面紧加上
。说明:这张图我存放在与它同级目录的j文件夹,CSS多个滤镜要同时使用时,之间可以用空格,这时style后面的双引号不可省。flipv表示像图像垂直翻转,alpha(opacity=35)表示透明度为35%。
5.图例中,下面那个镜像的显示器是一种渐变效果。由于浏览器不支持纵向透明度渐变,例如alpha(opacity=90,style=1,finishY=169)这句无效,所以只好用JavaScript来做一个渐变的表格,来挡住下面的那个镜像倒影显示器。程序如:
6.大功告成!
如下还有一例渐变效果:
|
(版权所有)
网页树树版权声明:
此文为Webshu.com独家撰稿,著作权属作者所有,禁止转载。
此文网址 http://www.webshu.com/column/102/69.html