Photoshop将死，利用CSS编辑图像

浅浅的花香味﹌ 2022-05-26 08:40 142阅读 0赞

在[CSSconf EU 2015][]上，来自意大利的前端开发大牛[Una Kravets][]做了名为《Photoshop将死，利用CSS编辑图像–Photoshop is Dead!: Editing Images in CSS》的演讲，大家可以狠戳[这里][Link 1]（youtube）观看演讲。

photoshop购买昂贵、使用麻烦、PS图片难以翻译、难以响应式设计，CSS3方面的 filter,blendmode,mask,clip,shape等可以在网页上实时实现图片的编辑，具体详情可以参照[http://thenewcode.com/][http_thenewcode.com]的阅读列表，渐变和阴影、[滤镜][Link 2]、[文字效果][Link 3]、[形状和遮罩][Link 4]、[混合模式][Link 5]等。

同时在她的博客里面也正在更新一个利用css实现图像编辑的系列文章，感兴趣的同学移步观看实现优雅的水洗效果[http://una.im/vintage-washout][http_una.im_vintage-washout]，3D玻璃效果[http://una.im/3d-effect/][http_una.im_3d-effect], 加光晕[http://una.im/vignettes/][http_una.im_vignettes]等，后续将给大家带来本系列文章的翻译。

[CSSconf EU 2015]: http://2015.cssconf.eu/
[Una Kravets]: http://una.im/
[Link 1]: https://www.youtube.com/watch?v=LY65F2e4B5w
[http_thenewcode.com]: http://thenewcode.com/
[Link 2]: http://thenewcode.com/899/Web-Developer-Reading-List-CSS-Filters
[Link 3]: http://thenewcode.com/1049/Web-Developer-Reading-List-Text-Effects
[Link 4]: http://thenewcode.com/1053/Web-Developer-Reading-List-CSS-Shapes-and-Masks
[Link 5]: http://thenewcode.com/14/CSS-Blend-Modes-Reading-List
[http_una.im_vintage-washout]: http://una.im/vintage-washout
[http_una.im_3d-effect]: http://una.im/3d-effect/
[http_una.im_vignettes]: http://una.im/vignettes/

发表评论取消回复

表情：

评论列表（有 0 条评论，142人围观）

还没有评论，来说两句吧...

相关阅读

相关图像处理软件Photoshop 2024 mac新增功能

Photoshop 2024 mac是一款图像处理软件的最新版本。ps2024提供了丰富的功能和工具，使用户能够对照片、插图、图形等进行精确的编辑和设计。 ![e59dfd3

朱雀/ 2024年03月02日 09:37/ 0 赞/ 49 阅读

相关将动画 CSS 热点添加到响应式图像

热点是应用于图像的视觉指示器，带有号召性用语（超链接、工具提示、模式）。在此示例中，我们将向响应式图像添加 CSS 热点，以突出显示汽车内饰的某些特征。 ![在这里插入图片描

亦凉/ 2023年10月11日 22:18/ 0 赞/ 9 阅读

相关 Photoshop中将图片拖不进软件的编辑区的解决方法，超详细

![format_png][] ![format_png 1][] 今天在学习ps的过程中，发现我的ps怎么和人家老师的不一样，怎么不一样呢？人家老师的ps5中，鼠标可以直

旧城等待，/ 2022年12月25日 02:50/ 0 赞/ 139 阅读

相关利用OpenCV的imread将RGB图像转化为灰度图像!

通常，我们是利用cvtColor将图像转化为灰度图，但实际上在读取图像的时候便可以将图像转化为灰度图，很简单的操作，只需要将imread的第二个参数置为0即可如下面的代

深藏阁楼爱情的钟/ 2022年08月23日 09:54/ 0 赞/ 192 阅读

相关 PhotoShop-图像调整+蒙板

1、菜单下“图像”下的“调整”下的（1）色阶（ctrl+L）调光，调节下面三个值例子：树叶（2）色彩平衡（ctrl+B），调整偏色的图例子：（厨房）

蔚落/ 2022年08月22日 01:13/ 0 赞/ 160 阅读

相关零点起飞学Photoshop CS6图像处理

[![Center][]][Center 1] [零点起飞学Photoshop CS6图像处理][Center 1] 本书主要讲解了Photoshop CS6

柔光的暖阳◎/ 2022年08月02日 07:29/ 0 赞/ 176 阅读

相关 photoshop第五章：图像的调整

第五章：照片图像的调整图像的调整的设置都是在：图像—>调整—>… 1.调整照片亮度/对比度（图片暗度较低时使用）素材： ![z1][] 效果：

缺乏、安全感/ 2022年07月10日 16:58/ 0 赞/ 195 阅读

相关 Photoshop将死，利用CSS编辑图像

在[CSSconf EU 2015][]上，来自意大利的前端开发大牛[Una Kravets][]做了名为《Photoshop将死，利用CSS编辑图像–Photoshop is

浅浅的花香味﹌/ 2022年05月26日 08:40/ 0 赞/ 143 阅读

相关 CSS渲染器：将Photoshop Filters效果带入网络

日期：2013-5-24 来源：[GBin1.com][] ![CSS渲染器：将Photoshop Filters效果带入网络][CSS_Photoshop Filters

谁借莪１个温暖的怀抱￠/ 2022年04月25日 01:26/ 0 赞/ 155 阅读

相关图像编辑软件Adobe Illustrator

可以打开 .ai 图像文件。 Adobe Illustrator CS5 绿色版下载 [http://www.onlinedown.net/soft/578049.ht

小鱼儿/ 2021年09月23日 00:14/ 0 赞/ 254 阅读