PNG格式小图标的CSS任意颜色赋色技术,png图片制作任意颜色的小图标

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

2016/06/08 · CSS · 1
评论 ·
PNG

原文出处:
张鑫旭(@张鑫旭)   

一、眼见为实

本内容一经是对张鑫旭PNG格式小图标的CSS任意颜色赋色技术的这篇小说举办详尽表达。

CSS3 filter:drop-shadow滤镜与box-shadow分裂应用

2016/05/19 · CSS ·
box-shadow,
drop-shadow

原稿出处: 张鑫旭(@张鑫旭
)   

要运用正式的CSS3贯彻某成分的黑影效果,有两个套路,第二个就是使用大规模的box-shadowPNG格式小图标的CSS任意颜色赋色技术,png图片制作任意颜色的小图标。,
第四个就是利用CSS3的filter阴影滤镜drop-shadow,那那七个黑影完毕有如何具体的距离呢?

一、眼见为实

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

地点的不是很黑的是原来图标,是个PNG图片,上面那一个是足以赋色的:

澳门葡京 1

上面,大家随便选拔一个颜料,例如青黄,然后:
澳门葡京 2

澳门葡京 3

是或不是深感很厉害!以往设计师就不须求在提供几套颜色的图样了。

SVG, icon fonts等技术就好像也不是那么耀眼了。

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

 

一、包容性不一

CSS3 box-shadow从IE9浏览器初叶就辅助了,如下表示意:

澳门葡京 4

filter中的drop-shadowIE13才开端协助,移动端Android4.4才起来帮助,细想转手,其实离在活动端欢跃使用就差一口气,前日的前些天,大家兴许就在歌舞了:

澳门葡京 5

二、原理其实很简短

规律其实很粗略,使用了CSS3滤镜filter中的drop-shadowdrop-shadow滤镜可以给成分或图表非透明区域丰硕投影。

如果对drop-shadow不是很掌握,提议先看看前些日子写的“CSS3
filter:drop-shadow滤镜与box-shadow分歧应用”一文!

对此背景透明的png小图标而言,假若我们施加一个不带模糊的黑影,不就同样生成了其余一个颜色的小图标了吗?

下一场,大家把原有图标隐藏在容器外面,投影图标在容器中间,不见给人倍感是赋色效果了?

比方说本文的demo,假如把icon父级的的overflow:hidden去掉,原始的图标就展揭示来呀!

澳门葡京 6

地方的不是很黑的是土生土长图标,是个PNG图片,下边那个是能够赋色的:

HTML:

二、同样的参数值,表现效果有异样

filter中的drop-shadow语法如下:

filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);

1
filter: drop-shadow(x偏移, y偏移, 模糊大小, 色值);

例如:

filter:drop-shadow(5px 5px 10px black)

1
filter:drop-shadow(5px 5px 10px black)

代表右下5像素偏移,10像素模糊的冰雪蓝阴影。眼见为实,看上边的图样示意(实时成效,请使用Chrome或手机浏览器查看):

澳门葡京 7

只是,假若拔取相同参数值的box-shadow,例如:

box-shadow: 5px 5px 10px black;

1
box-shadow: 5px 5px 10px black;

会发现,box-shadow的黑影距离更小,色值要更深:

澳门葡京 8

三、达成的时候其实有难度

规律如上边,我一起首完毕的时候,以为很简短,因为分分钟可以兑现和谐的想法,后来察觉有些天真了,Chrome浏览器怎么都显得不出去;FireFox浏览器却得以!咦,终究发生了怎么。

在Chrome浏览器下,drop-shadow有一个之类的变现特性:

在Chrome浏览器下,就算一个因素的侧重点部分,无论以何种措施,只要在页面中不可知,其drop-shadow是不可见的;实体部分就是有1像素可知,则drop-shadow完全可见。

所以,我试过:

  • text-indent负值隐藏原始图,无投影,战败!
  • clip剪裁隐藏,无投影,战败!
  • margin负值隐藏原始图,无投影,失败!
  • left负值隐藏原始图,无投影,战败!

清一色不行,落成遭逢了赫赫的阻止。

新生,灵光一现,借使本人实体部分也在可视区域内,可是是晶莹剔透的,会怎样呢(反正不会有影子出来)?

于是,我就试了下已经立下过多军功的晶莹边框,卧槽,又立功了,成了!

因而,上边这个CSS申明是相对不能少的:

border-right: 20px solid transparent;

1
border-right: 20px solid transparent;

澳门葡京 9

<i class=”icon”><i class=”icon
icon-del”></i></i>

三、drop-shadow没有内阴影效果

box-shadow支持inset内阴影,如:

box-shadow: inset 5px 5px 10px black;

1
box-shadow: inset 5px 5px 10px black;

但是,drop-shadow却没有。

四、关于包容性

IE13+协助,Chrome和FireFox浏览器帮忙,移动端iOS扶助,Android4.4+帮助。相当于,基本上,移动端以往得以运用那种技术了。

既省去了流量,也让大家的支付更容易,维护更便宜了。

上边,大家随便选用一个颜料,例如松石绿,然后:

CSS:

四、drop-shadow无法阴影叠加

box-shadow有个超屌的特色,就是影子可以随便累加,由此,理论上大家得以选拔box-shadow变迁任意的图样,包蕴张含韵妹子年轻时候的写实,具体可出席“CSS3
box-shadow盒阴影图形生成技术”一文。

但是filter中的drop-shadow就只好抱歉了,我就是一锤子买卖。没钱也如此随便!

说到方今,显示的尽是drop-shadow的不好,包容性不够,内阴影不扶助,多阴影也不辅助;感觉就好像小蚯蚓,失恋了,工作也没了,存在的含义好像就成了白富美的谈资。

诚然是那样呢?明显非也!所谓存在既有道理。

drop-shadow有一个很厉害的特色,也就这个特点,让其日后有充足的机遇大放异彩!那就是,drop-shadow才是真的含义上的黑影,而box-shadow只是盒阴影而已。

何以看头呢?

五、结语碎碎念

实则,本文的技能注解(紧即使晶莹剔透border的拍卖)在“drop-shadow vs
box-shaow”那篇小说达成后就商讨出来了。本来想写个小专利,蹭点早饭钱。结果,新工厂写专利没费用,而且周期要3年。

3年我外孙子都可以打酱油了。所以,罢了,直接分享出去。

昨日8号,本月早就6篇文章了,写小说暴走了下。就是为了腾出大段且三番五次的业余时间,要秘密举办其余大门类。

时光机
如果您是3~5年过后看到此文,而且你是2016年上大学的,那么,我在写那篇文章的时候,你可能正在翻来覆去睡不着,还在担忧后天的考试。由此可见,不要担心,我给大家找了一个不行硬的后台,保障你们本次高考无忧,放心睡觉吧!哟,你在惊叹是哪位后台。嘻嘻嘻嘻,说出来怕吓着您————观世音菩萨!

2 赞 6 收藏 1
评论

澳门葡京 10

澳门葡京 11

.icon{
  display: inline-block;
  width: 20px;
  height: 20px;
  overflow: hidden;
}
.icon-del{
  background:url(delete.png) no-repeat center;
}
.icon>.icon{
  position:relative;
  left:-100%;
  border-right: 20px solid transparent;
  -webkit-filter: drop-shadow(blue 20px 0);
  filter: drop-shadow(blue 20px 0);
}

五、阴影 vs 盒阴影

执行出真知,下边大家用CSS border写一个虚线框,例如:

border: 10px dashed #beceeb;

1
border: 10px dashed #beceeb;

结果长相如下:

 澳门葡京 12

然后,我们分别接纳box-shadowdrop-shadow滤镜:

border: 10px dashed #beceeb; box-shadow: 5px 5px 10px black;

1
border: 10px dashed #beceeb; box-shadow: 5px 5px 10px black;

border: 10px dashed #beceeb; filter: drop-shadow(5px 5px 10px black);

1
border: 10px dashed #beceeb; filter: drop-shadow(5px 5px 10px black);

结果:

 澳门葡京 13

哪些?是还是不是个性揭露了!

box-shadow顾名思意“盒阴影”,只是盒子的黑影;你想啊,这盒子中间肯定是透明的,结果,阴影的时候,居然光线没有穿透;不过drop-shadow就符合真实世界的黑影,非透明的颜料,我就有影子;透明部分,光线穿过,没投影,而哪些盒子不盒子的,跟我尚未其他涉及。

drop-shadow不独可以穿透代码创设的因素的晶莹部分,PNG图片的透明部分也是足以穿透的,如下图:

澳门葡京 14

于是乎,曾经干扰我们的片段困难的题材就有了很好的消除思路了!

澳门葡京 15

效果:

六、drop-shadow的莫过于使用

俺们贯彻带有箭头指向的浮层面板的时候,考虑到包容性,三角基本上都是选拔border绘制的,没法box-shadow,然而,矩形部分设计师希望是有影子的,于是,就会产出下图所示的景色:
澳门葡京 16

箭头没有影子,蒙混过关。

后来,又捣腾了一个措施,就选取矩形举办45deg旋转,多个box-shadow合体,可是,会存在阴影重叠的一局地,说穿了,依然作用不健全。

现在,有了drop-shadow,阴影就真正成为了影子了。

澳门葡京 ,你可以狠狠地点击那里:filter:drop-shadow落成尖角带阴影的唤起面板demo

整个尽在截图中:
澳门葡京 17

是否深感很厉害!未来设计师就不要求在提供几套颜色的图样了。

澳门葡京 18

七、结束语

低版本IE浏览器下,其实也有Shadow滤镜,可是是IE的民用滤镜。如若想要完毕包容IE9+的影子效果,揣度要借助SVG来促成了。

drop-shadow特征实在是不行,我前天一度有无数丰盛棒的想法,比方说完结位图的情调渐变动画,以及任何可以减去设计师和前端同学工作资金的技术完毕思路,先保密等自我先实施实践,等思路成熟再一并交换交换。

可想而知,尽管drop-shadow滤镜亮点单一,然则那几个优点可以照亮整个北半球。

2 赞 1 收藏
评论

澳门葡京 19

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

  当然仍可以弄成其他颜色,只需求变更一下filter: drop-shadow(blue 20px
0); 里面的blue那几个颜色。

二、原理其实很简短

 

规律其实很简短,使用了CSS3滤镜filter中的drop-shadow,drop-shadow滤镜能够给成分或图片非透明区域拉长投影。

  那么些原理就是使用filter过滤器的drop-shadow投影,约等于生成一个新的图标,然后大家给这一个新图标添加颜色。

一经对drop-shadow不是很了然,提议先看看前些时日写的“CSS3
filter:drop-shadow滤镜与box-shadow不一致应用”一文!

  我们给父成分设置宽和高以及overflow:hidden,然后让那一个子成分正常的图样left:100%让它隐藏,再经过border-right来设置一个涨幅为图片宽度的transparent透明边框,最终给它加投影就好了。

对于背景透明的png小图标而言,如若大家施加一个不带模糊的影子,不就同样生成了此外一个颜料的小图标了吧?

然后,大家把原来图标隐藏在容器外面,投影图标在容器中间,不见给人感到是赋色效果了?

比方说本文的demo,假若把icon父级的的overflow:hidden去掉,原始的图标就揭表露来啊!

澳门葡京 20

三、完成的时候其实有难度

规律如下边,我一起始兑现的时候,以为很粗略,因为分分钟可以兑现协调的想法,后来发现有些天真了,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+支持。也等于,基本上,移动端未来得以接纳那种技能了。

既省去了流量,也让我们的开发更简便,维护更便民了

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website