使用CSS实现Photoshop选区效果及应用

这篇文章发布于 2010年06月24日,星期四,19:44,归类于 CSS相关。 阅读 74594 次, 今日 6 次 6 条评论

 

一、Photoshop中的选区

用过Photoshop的想必都知道Photoshop中的选区,呈现的状态时不断过渡的虚线框。如下图所示:

Photoshop中的选区 张鑫旭-鑫空间-鑫生活

上图为静止图片,实际上边缘应该是波纹状不断移动的。如下图所示:

Photoshop中的选区动画图 张鑫旭-鑫空间-鑫生活

当然,上图不是截图,而是配合CSS且对图片进行一定处理后的效果,也就是本文的主要内容。

二、不规则选区

上一段落其实已经展示了一个实现photoshop选区的效果图,不过上图选区为矩形。实际上,即使是不规则的选区形状,我们也可以使用CSS实现,参见下图:

不规则选区实现 张鑫旭-鑫空间-鑫生活

三、如何实现的

就像魔术一样,说穿了其实很简单。使用CSS实现类似于photoshop的选区效果最最关键的因素就是一张黑白斜纹的动画图片,这张gif动画图片为8像素*8像素,大小不足1K。我们将这张小图放大10倍后,看看是个什么样子,见下图:

10倍大小的选区动画图片

您可以狠狠地点击这里:gif动画图片下载

具体实现

基本上,这类效果的实现原理差不多,首先是外部标签应用斜纹动画背景图片(平铺),内部标签与外部标签保留1像素的间距且内部标签背景实色,那么在,在内标签的外边缘就会透出类似于photoshop的选框效果。具体参见下面的gif动画演示:

同样的,要实现不规则选区效果,只需要1像素不规则的镂空线条即可。例如上面的水果不规则选区中的水果图片,如果放在深色背景上,则1像素的镂空线条就会像独眼龙看告示——一目了然。见下截图:

1像素镂空线条 张鑫旭-鑫空间-鑫生活

四、一些实际的应用

我们可以将photoshop的选区UI效果应用在web制作中。例如下面的一些实际的或是娱乐的应用:

1. 导航样式

2. 单/复选框选中

您认为下面哪四只球队夺冠希望最大:

3. 高亮文本框焦点样式

用户名:
邮箱:
密码:

4. 鼠标经过显示图片选区

鼠标经过下图,然后,

其他

其他一些应用就是您的聪明才智想出来的应用,这里就不继续献丑了。

五、参考文章

文章参考自:http://matthewjamestaylor.com/blog/animated-photoshop-selection-on-a-web-page

(本篇完)

分享到:


发表评论(目前6 条评论)

  1. 阳光Angel说道:

    这个水果的动画真的太有创意了,厉害啊大佬

  2. 窍门天下说道:

    关于选区的问题,就是在做产品图的时候,在PS里用工具“p”勾了路径然后转选区时,选区是整个路径包含的内容,没有象博主那样是线条选区

  3. zsz说道:

    不错啊,有创意!

  4. 路过说道:

    最后一张图,效果太有创意了

  5. Jerry说道:

    想法有见地,学习了