骤雨打新荷
» 游客:  注册 | 登录 | 会员 | 社区银行 | 股票中心 | 帮助

 

作者:
标题: CSS滤镜在超市中的应用 上一主题 | 下一主题
花鳥風月
贵宾




积分 878
发帖 371
注册 2006-8-24
来自 久遠的海岸
状态 离线
#1  CSS滤镜在超市中的应用

由于大部分的超市製作软件都有很多定制功能,例如 Arles Image Web Page Creator 的添加代码功能,Express Thumbnail Creator 的索引页定制功能,究其原理,无非是在 html、css 等方面做文章。现在有见到在超市的索引页上加入缩略图的特效的例子,这种效果在我自己发佈图集的时候也常常采用。接著就简单介绍一下在 Arles Image Web Page Creator 中使用CSS滤镜……

滤镜也有自己的规则和语法,它是把一些特殊的效果添加到 html 元素上,而图像就成为利用滤镜最多的 html 元素了,因为许多效果在图像上能得到更好的表现,举个用 Arles Image Web Page Creator 制作并有 Alpha 滤镜效果的例子说明。

可以这样添加,超市地址:http://club.telepolis.com/iswind/filter/demo1/


这是代码。
CODE:  [Copy to clipboard]
onmouseout="this.style.filter='Shadow(enabled=false)'"
onmouseover="this.style.filter='Alpha(style=2,opacity=100,finishOpacity=25)'"
也可以这样添加,其效果是一样的,只是添加的位置不同,超市地址:http://club.telepolis.com/iswind/filter/demo2/


这是代码。
CODE:  [Copy to clipboard]
a:link img {filter:Shadow(enabled=false)};
a:visited img {filter:Shadow(enabled=false)};
a:hover img {filter:Alpha(style=2,opacity=100,finishOpacity=25)}
第一种是应用了鼠标动作添加,第二种是通过定义图片链接样式添加,其结果是一样的,不过生成的索引页可不一样,第一种方法需要为每个缩略图都添加一个鼠标动作,生成的索引页文件会比较大,因此推荐第二种添加方法。如果真的看懂了,那就可以手动添加到不论用哪种软件生成的索引页中了……

更多的滤镜的详细介绍和用法可以参考:http://windmoon.net.ru/main/codes/filter.htm


转贴请注明出处,谢谢。

2008-7-4 13:56
查看资料  访问主页  发短消息   编辑帖子  引用回复
txfzq
管理员




积分 33428
发帖 13147
注册 2005-5-26
状态 离线
#2  

滤镜这个东西嘛,我只听过,从未用过,正好学一学,哈哈



2008-7-4 16:32
查看资料  发短消息   编辑帖子  引用回复
花鳥風月
贵宾




积分 878
发帖 371
注册 2006-8-24
来自 久遠的海岸
状态 离线
#3  

嗯,其實是個挺花哨的東西……

2008-7-5 14:35
查看资料  访问主页  发短消息   编辑帖子  引用回复


可打印版本 | 推荐给朋友 | 订阅主题 | 收藏主题



论坛跳转:  



[ 联系我们 - 骤雨打新荷 ]

Powered by Discuz! 2.5 © 2001-2005 Comsenz Technology Ltd.