用CSS也可以任意改变PNG图标颜色?

馒头老爸 等级 501 1 1

在开发中图标跟我们是形影不离的,在开始之前先聊一些题外话,图标有什么作用?

  • 通用图标可以代替文字说明,能更简洁地表达某个设计的意图,让用户看到图标就知道它代表什么?有什么用途?

  • LOGO类图标可以起到品牌宣传,同时因图标更醒目,占据更大的位置,用户更容易点击。

  • 看图片更符合人的视觉需求,简洁的图片能降低人的信息焦虑。试想我们如果看到一个满满的文字的页面,是不是常常有信息恐惧,可能就会选择退出。

但是大多数情况下只有图标是不行的,还需要配上文字说明,如果用户看到一个图标,花很多时间都不能理解它的意思,那图标的存在也失去了它应有的意义。

开发问题

  1. 是不是经常会遇到这样的场景,在导航栏的图标默认显示为一种浅色,当鼠标移到上面时图标变为深色,起到反馈用户的作用。

  2. 还有一些场景下使用图标来标识状态,比如红色表示错误,黄色表示警告,绿色表示成功。

如果是使用 png 格式的情况下,我们会叫UI设计师提供给我们不同颜色的图标。

正式开始

现在我们就来解决上面这个麻烦的事情,使用 cssPNG 图标赋予任意颜色

用CSS也可以任意改变PNG图标颜色?

现在UI设计师给了我们一个表示状态的图标,现在我们要使用CSS来改变它的颜色

用CSS也可以任意改变PNG图标颜色?

这里使用的是CSS3滤镜 filter 中的 drop-shadow 实现的,这个滤镜可以给元素或图片的非透明区域添加投影。

可能会有小伙伴要问了,他与 box-shadow 有什么区别,直接看效果:

用CSS也可以任意改变PNG图标颜色?

通过效果可以很明显的看出区别,box-shadow 是对 box 进行投影,而drop-shadow 是对内容进行投影,只有有内容的地方才会产生投影,这更符合我们现实生活中的现象。

它的参数形式为:drop-shadow(h-shadow v-shadow blur spread color),与 boxshadow 参数的唯一区别就是无法指定为内投影。

投影变色

有了上面的了解后,现在加大在水平方向的投影距离,不设置阴影大小和颜色:

img {
    animation: move 3s linear forwards;
}
@keyframes move {
    0% {
        filter: drop-shadow(0 0 #000);
    }
    100% {
        filter: drop-shadow(150px 0 #000);
    }
}

用CSS也可以任意改变PNG图标颜色?

隐藏原图标:将原图标水平向左移动自身的100%,图标外层的 div 设置 overflow:hide,这样投影影子就替换了原图标的位置:

<div class="img-wrapper">
    <img class="img" src="./icon.png" alt="">
</div>
.img-wrapper {
    display: inline-block;
    border: 1px solid #ccc;
}
.img {
    transform: translateX(-100%);
    filter: drop-shadow(120px 0 #000);
}

为了演示整个过程,我这里没有设置超出隐藏:

用CSS也可以任意改变PNG图标颜色?

现在你可以将图标改成任意颜色啦,不过这种方式有个局限性,只能变成纯色图标

关键知识点:

  • 还有一点要注意, drop-shadow 不能像 box-shadow 一样设置多层阴影,否则无任何效果。

用CSS也可以任意改变PNG图标颜色?

给文字投影

drop-shadow 不仅可以给图片投影,还可以给元素投影。

color: red;
font-size: 40px;
filter: drop-shadow(10px 10px 3px rgb(7, 7, 7));

用CSS也可以任意改变PNG图标颜色?

设想一下,如果把文字颜色设置为透明色,那投影是否会消失?

.text-wrapper {
    color: red;
    font-size: 40px;
    filter: drop-shadow(10px 10px 3px rgb(7, 7, 7));
    animation: changeColor 3s linear;
}
@keyframes changeColor {
    0% {
        color: red;
    }
    100% {
        color: transparent;
    }
}

答案是会消失,这与我们的现实相符,阳光是可以穿过透明的物体的,因此不会产生投影。

用CSS也可以任意改变PNG图标颜色?

png 图标改色的用处还是挺实用的,那通过它还可不可以做出一些其他有意思的事情呢?

比如说做一个小游戏,看轮廓猜一猜。点 这里 在线体验

用CSS也可以任意改变PNG图标颜色?

使用多滤镜变色

是不是以为这样就结束了,上面的变色方案实现起来还是比较麻烦的,通过 css 的其他滤镜同样可以实现变色效果。

先从简单的开始,把一个图标变为黑色或白色:

用CSS也可以任意改变PNG图标颜色?

.state1 {
    filter: brightness(0);
}
.state2 {
    background: #000;
    filter: brightness(100);
}

使用到的是 brightness 滤镜,给图片应用一种线性乘法,使其看起来更亮或更暗。如果值是0%,图像会全黑。值是100%,则图像会变亮。

如何变成其他颜色

CSS3 filter还有很多其他的滤镜,如 hue-rotate(色相)contrast(对比度)saturate(饱和度) 等。

CSS3 允许我们对统一元素同时应用多种滤镜,因此我们使用上面的滤镜,通过调整不同的参数组合,总会得到我们想要的颜色。

当然这个计算过程和原理是比较复杂的,我也没去研究,张鑫旭老师做了一个在线转换器 ,只需要输入原始色(原图标颜色)和目标色(你想要变成的颜色),会自动帮我们生成滤镜代码:

用CSS也可以任意改变PNG图标颜色?

来看下使用滤镜的变化过程:

用CSS也可以任意改变PNG图标颜色?

.png {
    animation: change 3s linear forwards;
}
@keyframes change {
    0% {
        filter: none;
    }
    100% {
        filter: invert(52%) sepia(83%) saturate(839%) hue-rotate(78deg) brightness(111%) contrast(133%);
    }
}

这个在线转换器并不能保证每次都可以100%转换成目标颜色,它会存在一定的误差,误差值在2以内就可以了,细微的差别肉眼基本上区分不出来的。

用CSS也可以任意改变PNG图标颜色?

使用混合模式变色

使用 ackground-blend-mode 实现变色有两个要求:

  • 图片内容部分必须是纯黑色的
  • 其余部分必须是白色的,不能是透明色
<img src="./state.jpg">
<span class="colorful"></span>
.colorful  {
    display: inline-block;
    width: 120px; height: 120px;
    background-image: url(./state.jpg), linear-gradient(#f4615c, #f4615c);
    background-blend-mode: lighten;
    background-size: 100%;
}

效果如下:

用CSS也可以任意改变PNG图标颜色?

原理

​ 将图片和目标色作为背景,使用 lighten(变量) 混合模式,白色与任何颜色混合都为白色,黑色与任何目标色混合后都为目标色。

​ 这里的目标是之所以要使用线性渐变 linear-gradient(#f4615c, #f4615c) 的方式表示,而不直接使用 #f4615c ,可以看下我之前的这篇文章奇思妙想CSS之“百变背景”,你将会知道答案。

background-blend-mode 的支持性还是很好的(IE不是浏览器)

用CSS也可以任意改变PNG图标颜色?

总结

​ 现在大多数情况下都是使用 svg 格式的图标,处理变色很方便。如果你用的是 png 图标,当有变色需求时就可以利用上面的方法,用户自定义主题时,也可以将图标颜色的配置权交给用户,做的真正的自定义主题。

最后,可通过公众号【前端筱园】,回复“图标变色” 获取本期示例全部源码;

用CSS也可以任意改变PNG图标颜色?

收藏
评论区

相关推荐

css3实战汇总(附源码)
本文是继上一篇文章用css3实现惊艳面试官的背景即背景动画(高级附源码)(https://juejin.im/post/6844903950123188237)的续篇也是本人最后一篇介绍css3技巧的文章,因为css这块知识难点不是很多,更多的在于去熟悉css3的新特性和基础理论知识。所以写这篇文章的目的一方面是对自己工作中一些css高级技巧的总结,另一
《前端实战总结》之使用纯css实现网站换肤和焦点图切换动画
今天我们来继续复盘一些工作中常用的css技巧和知识,以便我们可以更加优雅的用css实现富有动感的网站. 你将收获 网站换肤设计方案介绍 :target伪类介绍和用法以及如何使用css实现网站换肤 transition动画以及如何用纯css实现焦点图动画 效果展示 1.网站换肤 (https://imghelloworld.ossc
巧用css圆角实现有点意思的加载动画
作为一名前端工程师, 需要对css技巧有充分的研究和了解, 接下来笔者将会带大家一起掌握如何用css的圆角属性来实现有点意思的加载动画. 如果想学习更多css实用技巧, 可以参考笔者以下的文章: <div style"display:flex; flexwrap:wrap; alignitems: center;" <a href"https:/
2. web前端开发分享-css,js进阶篇
2. web前端开发分享css,js进阶篇 一,css进阶篇:   等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后
CSS Modules 解决 react 项目 css 样式互相影响的问题
CSS Modules 解决 react 项目 css 样式互相影响的问题 CSS Modules 解决 react 项目 css 样式互相影响的问题 (http
一篇文章带你了解css z-index(重叠顺序)
div csszindex层重叠顺序 div层、span层等html标签层重叠顺序样式zindex,平时CSS使用较少,但也会难免会碰到CSS zindex使用。 从基础语法到应用案例教程讲解学习zindex。 一、zindex语法与结构 zindex 跟具体数字 div{ zindex:100 } 注意:zindex的
用CSS也可以任意改变PNG图标颜色?
在开发中图标跟我们是形影不离的,在开始之前先聊一些题外话,图标有什么作用? 通用图标可以代替文字说明,能更简洁地表达某个设计的意图,让用户看到图标就知道它代表什么?有什么用途? LOGO类图标可以起到品牌宣传,同时因图标更醒目,占据更大的位置,用户更容易点击。 看图片更符合人的视觉需求,简洁的图片能降低人的信息焦虑。试想我们如果看到一个满满
Android Service 流程分析
启动Service过程 Android Service启动时序图 (https://imghelloworld.osscnbeijing.aliyuncs.com/039313fdaaf1e7dea3bde222b3ec9934.png) Android Service启动时序图.png 上图就是Android
30个前端开发人员必备的顶级工具
在本文中,我为前端Web开发人员汇总了30种顶级工具,从代码编辑器和代码游乐场到CSS生成器,JS库等等。 (https://imghelloworld.osscnbeijing.aliyuncs.com/2e7966318084a45d05a0926cbd749a02.png) 目录 CSS代码生成器 CSS3 Generator
Vue进阶(幺柒陆):CSS预编译语言Sass、Scss、Less和Stylus
什么是CSS预处理器CSS预处理器定义了一种新的语言,它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。开发者只需要使用这种语言进行编码工作,减少枯燥无味的CSS代码
只听说过CSS in JS,怎么还有JS in CSS?
CSS in JS是一种解决css问题想法的集合,而不是一个指定的库。从CSS in JS的字面意思可以看出,它是将css样式写在JavaScript文件中,而不需要独立出.css、.less之类的文件。将css放在js中使我们更方便的使用js的变量、模块化、treeshaking。还解决了css中的一些问题,譬如:更方便解决基于状态的样式,更容易追溯依赖关
你可能不知道的10个CSS新功能(2021版)
多年来,CSS已经超越了背景颜色、边框、文本样式、边距和盒模型。现代CSS能够提供一系列的功能,而在过去,您需要JavaScript或变通方法来实现这些功能。 为了庆祝它在2021年取得的成就,在这篇文章中,我们想看看一些你可能不知道的令人惊叹的CSS新特性。我们将强调web设计人员和开发人员可以用现代CSS做的很酷的事情,讨论用例,浏览器支持,并给你一个
如何提高CSS性能
结合现代网站的复杂性和浏览器处理 CSS 的方式,即使是适量的CSS也会成为设备受限、网络延迟、带宽或数据限制的瓶颈。因为性能是用户体验的一个至关重要的部分,所以必须确保在各种形状和尺寸的设备上提供一致的高质量体验,这也需要优化你的CSS。本篇文章将涵盖CSS会导致哪些性能问题,以及如何制作不妨碍人们使用的CSS的最佳实践。 目录 CSS是如何工作的?
前端性能优化
前端性能优化1、减少资源的请求次数和大小压缩合并 js 和 css 文件,减少 http 请求次数和请求资源的大小;在项目中使用 webpack glup 等打包编译工具 2、尽量使用字体图标或者 svg 图标代替传统的 png(jpg)图渲染更快,减少代码体积,且放大不会出现变形等3、使用图片懒加载目的是减少页面第一次加载的 http 请求次数,实现思路:
小白怎么成为一个黑客?按照这个路线来!
大家好,我是周杰伦。接下来我会写系列的文章,给大家整理下网络安全的详细的学习步骤和学习资源推荐。今天的主题是——Web安全。Web安全是网络渗透中很重要的一个组成部分,今天跟大家聊一下,如何在三个月内从零基础掌握Web安全。 第一个月第一周:HTML+CSS,学会网页基本格式,学会编写基本网页,表单,学会用浏览器F12检查元素,查看源码 推荐学习地址: H

热门文章

原来CSS的background还可以这么玩

最新文章

原来CSS的background还可以这么玩