纯CSS实现小图标变色的一些研究

栏目: CSS · 发布时间: 5年前

内容简介:byzhangxinxu from本文可全文转载,个人网站无需授权,只要保留原作者、出处以及文中链接即可,任何网站均可摘要聚合,商用请联系授权。上周写了篇文章,利用

byzhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8187

本文可全文转载,个人网站无需授权,只要保留原作者、出处以及文中链接即可,任何网站均可摘要聚合,商用请联系授权。

一、开始,关于图标变色,引言

上周写了篇文章,利用 filter:hue-rotate色调旋转滤镜改变按钮颜色 进行复制,后来我就一想,利用滤镜岂不是可以很方便改变小图标的颜色,这样,SVG图标作为背景图使用也没有任何问题了。

其实以前写过一篇文章——“ PNG格式小图标的CSS任意颜色赋色技术 ”,用的是 drop-shadow ,优点是可以任意颜色,不足就是有些小啰嗦。

所以,我要研究下,有没有使用简单的的赋色技术;以及研究下有没有滤镜以外的其它技术可以修改小图标颜色!

结果,还真发现了不少好玩的东西。

二、图标变成黑色或白色的技巧

先从简单的说起。

有下面这个图标:

纯CSS实现小图标变色的一些研究

如果要变成纯黑色,或者纯白色,则可以这样:

/* 图标变黑色 */
.black {
    filter: brightness(0);
}
/* 图标变白色 */
.white {
    filter: brightness(100);
}

也就是使用亮度滤镜,要想变成黑色,很简单,设置亮度为0即可,保证黑如焦炭;如果想要变成白色,则亮度设成很大很大的值就好了,例如100,保证白如奶昔。

实现后的效果如下截图:

纯CSS实现小图标变色的一些研究

眼见为实,您可以狠狠地点击这里: CSS让图标变成白色或黑色demo

三、图标变色为任意指定颜色

黑白色确实简单,但实际开发时候,往往是黑色图标变成彩色,那可该怎么办呢?

可以实现!

CSS3 filter滤镜有调整色调的hue-rotate,有调整饱和度的saturate滤镜,有调整亮度的brightness滤镜,有调整对比对的contrast滤镜等,把这些滤镜进行组合,进行色值变换,总会得到我们希望的颜色的。

关键如何变呢?

纯CSS实现小图标变色的一些研究 嘿嘿!我花了2晚上时间学习、探索与研究,终于弄出了一个任意色值通过filter滤镜进行转换的在线工具。

您可以狠狠地点击这里: CSS filter滤镜任意色值转换在线工具

使用和转换示意如下GIF:

纯CSS实现小图标变色的一些研究

第一个输入框输入原始的图标颜色,下面输入框输入图片目标颜色,点击“转换”按钮,对应的filter CSS代码就生成了。

注意注意注意

由于部分滤镜渲染并非是线性的,因此最终转化后的颜色并非100%完全一致,可能会出现误差。

请不要担心,再次点击“转换”按钮,尝试其他的滤镜组合 ,找到最精确的那个filter代码。

举例说明

例如,原始色是: #000000

,目标色非web安全色,是

#f4615c

填入到 工具 对应输入框,点击“转换”按钮,结果如下:

纯CSS实现小图标变色的一些研究

可以看到色值误差较大,请不要担心,再多点几次“转换”按钮,尽量找到误差值在2以内的色值,如下GIF示意:

纯CSS实现小图标变色的一些研究

虽然最终色值会有偏差(越远离安全色出现偏差概率越大),但对于用户而言,根本没有影响,华为手机边缘蓝光不也照样使用。对于设计师,也完全不要担心,放心使用,他们是根本无法区分屏幕上 #f5615c 和设计稿中 #f4615c 和的差别的。即使是全球几个罕见4色视觉人也无法区分,毕竟是不同设备的显示器。

同一色值可以有多种滤镜组合呈现的,例如黑色转白色,可以亮度滤镜,也可以直接反相滤镜。每次点击工具页的“转换”按钮,都会会尝试一种匹配。其底层是不同视觉系数的计算值的相互组合,类似计算灰度有下面两种算法:

  • sRGB Luma (ITU Rec. 709) L = (red * 0.2126 + green * 0.7152 + blue * 0.0722) / 255
  • W3C方法 (工作草案) L = (red * 0.299 + green * 0.587 + blue * 0.114) / 255

三、使用滤镜让图标变彩色实战

还是这个图标:

纯CSS实现小图标变色的一些研究

下面要变成 #f4615c 色值图标。

原始值是 #2486ff ,目标值是 #f4615c ,借助工具,得到如下CSS:

filter: invert(52%) sepia(82%) saturate(2494%) hue-rotate(327deg) brightness(104%) contrast(92%);

结果如下截图:

纯CSS实现小图标变色的一些研究

您可以狠狠地点击这里: CSS filter让图标变成指定红色值demo

四、CSS遮罩实现任意颜色图标

这个是相比上面的滤镜更好的实现方法,性能要比滤镜好,色值定义也更简单。

一例胜千图

还是这个图标:

纯CSS实现小图标变色的一些研究

下面要变成 #f4615c 色值图标。

如下HTML和CSS代码就好了:

<span class="colorful"></span>
.colorful {
    display: inline-block;
    width: 32px; height: 32px;
    background-color: #f4615c;
    -webkit-mask: url(./xin.svg) no-repeat;
    mask: url(./xin.svg) no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

CSS3 mask默认是基于透明度实现遮罩效果的。也就是实色区域显示,透明区域隐藏。因此,我们只需要把目标图标颜色 #f4615c 作为背景色,然后原始图标(无论什么颜色都可以)作为遮罩图片,效果就出来了。

眼见为实,您可以狠狠地点击这里: CSS mask遮罩实现任意颜色的小图标demo

效果如下截图:

纯CSS实现小图标变色的一些研究

CSS mask学习

CSS3遮罩非常好用,熟练掌握事半功倍,其知识点很多,包含的属性值也很多,有兴趣可以参考我之前的文章:“ CSS遮罩CSS3 mask/masks详细介绍 ”,非常系统的介绍了相关知识点。

五、最后,关于转换工具,结语

正文部分结束,下面可以安心地东扯西扯了。

filter色值转换工具我一开始想得比较天真,颜色值不是可以HSB表示嘛(web中是HSL,PS中是HSB,两者有差别,),不正好对应filter的色调,饱和度和亮度滤镜嘛,我想计算出前后颜色的HSB值,再一比较,设置在filter上,色值不就转换好了。

一番实践下来发现,设计偏差还相当明显,根本不能拿出来用。因为S和B可以大于100%,且没有上限,具体如何渲染并不是一种线性的关系,只通过简单线性计算是很难实现准确的转换的,需要对矩阵比较了解。于是我自己又尝试去研究 feColorMatrix 的算法,发现自己的积累还不够,数学不是很强,图形领域也未深入,无法驾驭。

纯CSS实现小图标变色的一些研究

后来,在stackoverflow上找到 纯filter滤镜转换黑色为其它颜色 的问题,其中提供了一些解决方案。

还是得站在巨人的肩膀上,对原算法进行了一些优化,包括支持任意颜色filter转换,原算法是仅黑色;优化了误差的算法,原算法有较大问题,有时候明明视觉差异明显,却显示误差很小;增加了滤镜转换之后的渲染颜色的输出。就这样一个纯filter变色的在线小工具诞生了。

虽然这个filter变色工具很有技术含量,但是,并不表示使用filter是最好的图标变色方法。如果条件允许(有HTML操作权限),我建议优先使用mask遮罩实现任意图标的变色,兼容性更好,性能更好,颜色100%精准,可以在移动端项目中使用,如果对于一些杂牌Android不在意的话。

如果我们的图标是用的 <img> 或者 <svg> 标签直连的,则此时,使用filter变色要更合适。

没有无用的技术,只是适用场景宽窄有别而已!

SVG图标和PNG图标

如果是SVG图标,更好的变色处理是SVG Sprites技术,直接fill或color属性控制颜色,兼容性直达IE9。

如果是PNG图标,则多半就要考虑使用本文提供的方法了。

好,扯完了。

感谢阅读,欢迎纠错!欢迎交流!

纯CSS实现小图标变色的一些研究

本文为原创文章,会经常更新知识点以及修正一些错误,因此转载请保留原出处,方便溯源,避免陈旧错误知识的误导,同时有更好的阅读体验。

本文地址: https://www.zhangxinxu.com/wordpress/?p=8187

(本篇完)


以上所述就是小编给大家介绍的《纯CSS实现小图标变色的一些研究》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

HTML5+CSS3精致范例辞典

HTML5+CSS3精致范例辞典

杨东昱 / 清华大学出版社 / 2013-1 / 48.00元

《HTML5+CSS3精致范例辞典(全彩印刷)》是专为希望成为网页设计师的学习者打造的工具书,书中详细说明了设计网页所需的HTML标记语言,对HTML5的网页标签规范作了完整说明,如元素标签的功能、属性以及如何使用等。有了基本网页制作能力,如何让网页更出色,版面更富变化、更易维护管理,那就得靠CSS帮忙了。《HTML5+CSS3精致范例辞典(全彩印刷)》还详细解说了最新CSS3的样式元素,除了说明......一起来看看 《HTML5+CSS3精致范例辞典》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

html转js在线工具
html转js在线工具

html转js在线工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具