在开发中图标跟咱们是如影随行的,在开始之前先聊一些题外话, 图标有什么作用?
- 通用图标能够代替文字说明,能更简洁地表白某个设计的用意,让用户看到图标就晓得它代表什么?有什么用处?
- LOGO 类图标能够起到品牌宣传,同时因图标更醒目,占据更大的地位,用户更容易点击。
- 看图片更合乎人的视觉需要,简洁的图片能升高人的信息焦虑。试想咱们如果看到一个满满的文字的页面,是不是经常有信息恐怖,可能就会抉择退出。
然而大多数状况下只有图标是不行的,还须要配上文字说明,如果用户看到一个图标,花很多工夫都不能了解它的意思,那图标的存在也失去了它应有的意义。
开发问题
- 是不是常常会遇到这样的场景,在导航栏的图标默认显示为一种浅色,当鼠标移到下面时图标变为深色,起到反馈用户的作用。
- 还有一些场景下应用图标来标识状态,比方红色示意谬误,黄色示意正告,绿色示意胜利。
如果是应用 png 格局的状况下,咱们会叫 UI 设计师提供给咱们不同色彩的图标。
正式开始
当初咱们就来解决下面这个麻烦的事件,应用 css
给 PNG
图标赋予任意色彩
当初 UI 设计师给了咱们一个示意状态的图标,当初咱们要应用 CSS 来扭转它的色彩
这里应用的是 CSS3 滤镜 filter
中的 drop-shadow
实现的,这个滤镜能够给元素或图片的非通明区域增加投影。
可能会有小伙伴要问了,他与 box-shadow
有什么区别,间接看成果:
通过成果能够很显著的看出区别,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);
}
}
暗藏原图标 :将原图标程度向左挪动本身的 100%,图标外层的 div 设置 overflow:hide
,这样投影影子就替换了原图标的地位:
<div class="img-wrapper">
![](./icon.png)
</div>
.img-wrapper {
display: inline-block;
border: 1px solid #ccc;
}
.img {transform: translateX(-100%);
filter: drop-shadow(120px 0 #000);
}
为了演示整个过程,我这里没有设置超出暗藏:
当初你能够将图标改成任意色彩啦,不过这种形式有个局限性,只能变成纯色图标
要害知识点:
- 还有一点要留神,
drop-shadow
不能像box-shadow
一样设置多层暗影,否则无任何成果。
给文字投影
drop-shadow
不仅能够给图片投影,还能够给元素投影。
color: red;
font-size: 40px;
filter: drop-shadow(10px 10px 3px rgb(7, 7, 7));
构想一下,如果把文字色彩设置为通明色,那投影是否会隐没?
.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;}
}
答案是会隐没,这与咱们的事实相符,阳光是能够穿过通明的物体的,因而不会产生投影。
对 png
图标改色的用途还是挺实用的,那通过它还可不可以做出一些其余有意思的事件呢?
比如说做一个小游戏,看轮廓猜一猜。点 这里 在线体验
应用多滤镜变色
是不是认为这样就完结了,下面的变色计划实现起来还是比拟麻烦的,通过 css 的其余滤镜同样能够实现变色成果。
先从简略的开始,把一个图标变为彩色或红色:
.state1 {filter: brightness(0);
}
.state2 {
background: #000;
filter: brightness(100);
}
应用到的是 brightness
滤镜,给图片利用一种线性乘法,使其看起来更亮或更暗。如果值是 0%,图像会全黑。值是 100%,则图像会变亮。
如何变成其余色彩
CSS3 filter 还有很多其余的滤镜,如 hue-rotate(色相)
、contrast(对比度)
、saturate(饱和度)
等。
CSS3 容许咱们对对立元素同时利用多种滤镜,因而咱们应用下面的滤镜,通过调整不同的参数组合,总会失去咱们想要的色彩。
当然这个计算过程和原理是比较复杂的,我也没去钻研,张鑫旭老师做了一个在线转换器,只须要输出原始色(原图标色彩)和指标色(你想要变成的色彩),会主动帮咱们生成滤镜代码:
来看下应用滤镜的变动过程:
.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 以内就能够了,轻微的差异肉眼基本上辨别不进去的。
应用混合模式变色
应用 ackground-blend-mode
实现变色有两个要求:
- 图片内容局部必须是纯彩色的
- 其余部分必须是红色的,不能是通明色
![](./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%;
}
成果如下:
原理 :
将图片和指标色作为背景,应用 lighten(变量)
混合模式,红色与任何颜色混合都为红色,彩色与任何指标色混合后都为指标色。
这里的指标是之所以要应用线性突变 linear-gradient(#f4615c, #f4615c)
的形式示意,而不间接应用 #f4615c
, 能够看下我之前的这篇文章《 奇思妙想 CSS 之“百变背景”》,你将会晓得答案。
background-blend-mode
的支持性还是很好的(IE 不是浏览器)
总结
当初大多数状况下都是应用 svg
格局的图标,解决变色很不便。如果你用的是 png
图标,当有变色需要时就能够利用下面的办法,用户自定义主题时,也能够将图标色彩的配置权交给用户,做的真正的自定义主题。
最初,可通过公众号【前端筱园】,回复“ 图标变色 ”获取本期示例全副源码;