Web设计中的CSS混合模式

本文由大漠根据的《CSS Blend Modes could be the next big thing in Web Design》所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:https://medium.com/p/6b51bf53743a,以及作者相关信息

——作者:

——译者:大漠

使用过Photoshop或Illustrator的人都清楚里面有一个图层的混合模式。

Web设计中的CSS混合模式

例如:Multiply, screen, overlay 和 soft light等等,使用这些混合模式,配上一定的透明度,让你的效果更佳。然而,Web设计师能掌握好“混合模式”就能制作出好的页面吗?对的,透明度opacity,就是他。

酷的东西并不难,如果要将这些效果用CSS实现出来还是有难度的,或者是有点不可能。如下图效果,第一行从左到右依次是:Doublenaut, Graham Hicks, Jonathan QuintinGeoff Teehan。第二行从左向右依次是:Ben Johnson, Claire Morales, Alan DefibaughJess Barlow

2014年前端将会发生什么

混合模式和Web页面

值得可惜的是,不能有更多的混合模式像opacity属性得到众多浏览器的支持,事实也证明,要让浏览器实现类似于Photoshop中图层混合模式的效果还是一件难以完成的任务。有一些混合模式通过滤镜在SVG中是可用的,但这些都是有限的,在实际项目中用到并不多见。

尽管这样,事情正在快速往好的方面发展,现在在制定有关于CSS混合模式规范的草案Adobe Web平台团队正在大力推广CSS混合模式。(这个团队还在推广其他一些有兴趣的CSS特性,如RegionsShaders)。

眼下,有关于CSS混合模式规范草案中提供了三个属性:background-blend-modemix-blend-modeisolation。让我们一起来探索他们。

Canvas 2D: 他会有混合模式?

Web设计中的CSS混合模式

首先,这里有一个小秘密。混合模式在HTML5的Canvas中的应用除了在IE浏览器的其他所有最新浏览器都得到支持。甚至在移动端的Chrome和Safari的浏览器上也得到支持。但是我们为什么要停止呢?混合模式在CSS中非常有用。

CSS的混合模式:background-blend-mode

Web设计中的CSS混合模式

background-blend-mode属性允许指定一个元素背景层的混合模式。无论是元素的背景颜色background-color、背景图像background-image或者用渐变实现的背景图片,都可以通过background-blend-mode来指定混合模式。

Web设计中的CSS混合模式

不要认为这个属性会得到多大用处?不要让你的页面走得更远。当你为一篇文章从后台上传了一张大图,给背景使用混合模式的Medium值,让你的标题显得更突出。但是,浏览器还不支持CSS混合模式,要让浏览器支持还有很漫长的路要走。上传六张不同颜色的图像适应每个人,后端服务器完成需要一定的过程。这对于读者来说,比直接使用CSS混合模式要慢一些。这个属性也可以运用于其他一些地方:

Web设计中的CSS混合模式

背景混合模式可能会被用来制造这些类似的效果甚至更好。

mix-blend-mode属性

虽然background-blend-mode属性对于背景的混合非常严格,但我们还是非常喜欢在HTML和SVG元素上像PSD中的图层一样混合背景层。这也就是mix-blend-mode属性强大之处。

mix-blend-mode可以将元素和他的背景混合在一起。也许你可以尝试,在背景上使用混合模式中的screen,要强过于使用背景颜色中的rgba()。你也可以在加载动画和混合模式上使用一个无穷数。isolation属性可以隔离元素上使用mix-blend-mode属性,用于隔离元素与背景图像的混合。

使用mix-blend-mode要比background-blend-mode更复杂,所以讨论他也更费时间,但并不会让你失望。因为CSS的混合模式即将就要到来。

我们现在可以使用CSS混合模式吗?

现在还不行,但希望今年可以得到支持。该规范已得到SVG规范小组的支持,现在就等CSS规范小组支持,也成为候选推荐标准。一旦发生这样的情况,步子就很快了,可以期望浏览器支持CSS混合模式。

至于浏览器的支持,这里有一个简短的总结:(结止于2014年1月份)

  • Firefox:在版本29中开始支持background-blend-mode属性,但还有一个Bug(如Demo),他们还在研究当中。而且使用mix-blend-mode属性需要在“about:config”中开启。
  • Safari:在"Webkit Nightly"中可以支持background-blend-mode,但并不支持mix-blend-mode
  • Chrome和Opera:使用mix-blend-modebackground-blend-mode需要在“chrome://flags”或“opera://flags”中开启“Experimental Web Platform Features”。
  • Internet Explorer:在Canvas中不支持CSS混合模式,并且目前还找不到任何发展信息。

扩展阅读

译者手语:整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

如需转载,烦请注明出处:

英文原文:https://medium.com/p/6b51bf53743a

中文译文:http://www.w3cplus.com/css3/css-blend-modes-could-be-the-next-big-thing-in-web-design.html

返回顶部