Photoshop 扩展 – CSS3Ps

如今的互联网前端早已不再是早前「搭页面」的简单干活,对于网站性能的优化和提升才是更能体现他们价值的地方。也正因此,在前端工作中占有举足轻重地位的 CSS 也在朝着效果「多样化」,代码「简洁化」的方向发展,目的就是利用更多的数字化渲染来代替更多网页中可见的实体效果,从而提升加载速度,降低服务器负载,而其中首当其冲的就是「图片」。

掐指算算自己离开前端岗位也有两年了,这期间且不说 HTML5 的强势入侵和 JS 框架的日新月异,单是 CSS 中的各种新属性更新就已经跟不上趟了。如今的 CSS3 可以利用纯代码实现很多早前只有「图片」才能做到的效果,不过这些代码写起来可不是一件轻松的事情,所以为了方便使用,开发者们码出了各种可自动将某种图片效果生成 CSS 代码的工具,CSS3Ps 就是其中的一个,只不过它是以 Extensions 的形式存在于 Photoshop 中。

在其官网可以免费 下载 CSS3Ps,通过 Adobe Extension Manager 安装后即可在扩展列表中找到它的身影。扩展启用后只是出现一个写有 Logo 的面板,只需要选中想要生成 CSS 代码的图层,再点击这个面板即可轻松实现转换。

举个例子,如上图中这个黄色的圆角矩形。在 Photoshop 中将想要的效果都制作完成后,确保其为当前图层,然后点击 CSS3Ps 的扩展面板,则会自动打开其官网,并将当前效果传送至服务器,并在几秒后将所对应的代码显示在网页中,而剩下的就只是复制粘帖了。

当然,这种转换并非万能,CSS3Ps 官方目前在效果上的支持也是有限的,比如在元素上只支持 Shape 或 Bitmap,形状也不能太过怪异,你画个桃心它也只能认成一个方块,不少 Ps 的图层效果也只支持部分…具体的可以去 这里 围观。

另外要说的是,转换后的实际效果对于浏览器也是有要求的,毕竟很多都用到了 CSS3 的属性,不同版本间的兼容性依然是要考虑的问题。不过 CSS3Ps 官方对于 Safari、Chrome、Firefox 以及 IE 的新版本都有较好的支持。What?IE6…滚粗!

可能真正的前端对这种东东只会嗤之以鼻,但如果你是个常用 Photoshop 做网页的设计师,在某些情况下偶尔需要用到,或干脆不懂 CSS,那么这个 CSS3Ps 或许值得一试。