个人在做网页或者写博的时候,有时希望对图片做一些修饰处理,比如,高光,圆角,阴影等。当然,我们可以使用图像处理软件。但是这样做有2点不好,一是需要额外PS等步骤,二是破坏了原始图像
。网上已经有很多利用css的方法来动态处理图片,但是css的方法需要额外在图片外部套一个到两个div标记来实现阴影的偏移效果,这里要介绍的是一种使用js的方法,非常简单,只需两步:
1.去Glossy.js主页下载一个javascript文件,在需要显示图片的html文件<head>部分加一句:<script type="text/javascript" src="glossy.js"></script>
2.在需要修饰的图片<img> 标记中简单的加一个class=”glossy”就可以完成阴影,高光,圆角等一系列效果。
下面的官方demo中,5个GIF原图,都是不带圆角,倒角,高光,阴影的。
在每个<img> 标记中加一个class=”glossy”,实现下图中的修饰效果。

这样子做法的好处是,如果将来不想使用修饰效果了,原图还是保留着未修改的样子。
有关详细的用法可以去Glossy.js主页查阅,圆角大小,有无阴影,以及高光的渐变色都是可以定制的。
我个人打算研究研究,怎么把这个功能整合到一个wp的插件中
,后台有选项可以选择图片的效果,并在主页全文输出时用filter的方式替换<img>达到效果。
我们是居住在上海的一对小夫妻,浪子喜欢折腾他的破计算机,小小喜欢画画。还有两条雪纳瑞狗狗,分别叫聪聪和悠悠。欢迎光临小站,我们随便说说,您随便逛逛,希望有您喜欢的话题。
这个太强了,不知道透明在破烂的IE6下效果如何?
央街浪子 回复:我在IE6下试过了,除了圆角似乎有些锯齿外,效果还是很好的。这个作者很强,应该不会犯浏览器兼容性这种小错误。
[回复]
嗯,我也看到过一个用 js css 模拟 apple dock 的,做得非常棒,我看了下代码,对各个浏览器分别定义的
[回复]
这个不错, 央街浪子, 我改了一个插件, 可以实现你的回复功能, 你可以先去我的博客试试, 点那个每个留言下的 reply to this comments然后留言就可以了. 今天只是初步, 下面我要改进一下!
[回复]