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

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

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

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

一、眼见为实

本内容如果是对张鑫旭png图片制作任意颜色的小图标,PNG格式小图标的CSS任意颜色赋色技术。PNG格式小图标的CSS任意颜色赋色技术的那篇小说进行详细说明。

CSS3 filter:drop-shadow滤镜与box-shadow不一样应用

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

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

要运用标准的CSS3完成某元素的阴影效果,有多少个套路,第二个就是运用大规模的box-shadow,
第四个就是接纳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年之后看到此文,而且你是二〇一六年上高校的,那么,我在写那篇小说的时候,你恐怕正在翻来覆去睡不着,还在焦虑今天的试验。同理可得,不要顾虑,我给我们找了一个更加硬的后台,保障你们这一次高考无忧,放心睡觉吧!哟,你在好奇是哪些后台。嘻嘻嘻嘻,说出来怕吓着您————观世音菩萨!

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+支持。也就是,基本上,移动端现在可以利用那种技术了。

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

网站地图xml地图