PNG格式小图标的CSS任意颜色赋色技术

2018-2-5 释然 前端技术资源

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里


前言

这是一个可以让你在不找设计师的情况下随心所欲更换小图标颜色的黑科技!今日早读文章由@张鑫旭授权分享。

本文由@仙人掌推荐编辑

正文从这里开始~

一、眼见为实


CSS可以修改图片的颜色,没错,可以,眼见为实!您可以狠狠地点击这里:png小图标CSS赋色demo

上面的不是很黑的是原始图标,是个PNG图片,下面这个是可以赋色的:

640?wx_fmt=png&wxfrom=5&wx_lazy=1


可以变色的图标


下面,我们随意选择一个颜色,例如紫色,然后:

640?wx_fmt=png&wxfrom=5&wx_lazy=1


紫色赋色

0?wx_fmt=png


红色赋色


是不是感觉很厉害!以后设计师就不需要在提供几套颜色的图片了。

SVG, icon fonts等技术似乎也不是那么耀眼了。


二、原理其实很简单


原理其实很简单,使用了CSS3滤镜filter中的drop-shadowdrop-shadow滤镜可以给元素或图片非透明区域添加投影。

如果对drop-shadow不是很了解,建议先看看前些时间写的“CSS3 filter:drop-shadow滤镜与box-shadow区别应用”一文!

对于背景透明的png小图标而言,如果我们施加一个不带模糊的投影,不就等同于生成了另外一个颜色的小图标了吗?

然后,我们把原始图标隐藏在容器外面,投影图标在容器中间,不见给人感觉是赋色效果了?

比方说本文的demo,如果把icon父级的的overflow:hidden去掉,原始的图标就暴露出来啦!

0?wx_fmt=png


去掉overflow:hidden之后

三、实现的时候实际有难度


原理如上面,我一开始实现的时候,以为很简单,因为分分钟可以实现自己的想法,后来发现有些天真了,Chrome浏览器怎么都显示不出来;FireFox浏览器却可以!咦,究竟发生了什么。

在Chrome浏览器下,drop-shadow有一个如下的呈现特性:

在Chrome浏览器下,如果一个元素的主体部分,无论以何种方式,只要在页面中不可见,其drop-shadow是不可见的;实体部分哪怕有1像素可见,则drop-shadow完全可见。

所以,我试过:

  • text-indent负值隐藏原始图,无投影,失败!

  • clip剪裁隐藏,无投影,失败!

  • margin负值隐藏原始图,无投影,失败!

  • left负值隐藏原始图,无投影,失败!

通通不行,实现遇到了巨大的阻碍。

后来,灵光一现,如果我实体部分也在可视区域内,但是是透明的,会怎样呢(反正不会有投影出来)?

于是,我就试了下曾经立下无数战功的透明边框,卧槽,又立功了,成了!

因此,下面这一个CSS声明是千万不能少的:

border-right: 20px solid transparent;

四、关于兼容性

IE13+支持,Chrome和FireFox浏览器支持,移动端iOS支持,Android4.4+支持。也就是,基本上,移动端现在可以使用这种技术了。

既节约了流量,也让我们的开发更简单,维护更方便了。


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务


标签: PNG格式小图标的CSS任意颜色赋色技术


Powered by emlog 京ICP备12006971号-1 sitemap