CSS之filter的使用
有天收到这个需求,视觉想要实现下面的效果,但是视觉只会提供圆圈里面的图片,圆圈以及图片的那种阴影效果需要前端自己实现。我一开始是拒绝的,这灯关效果没搞过呀?最后耐不住视觉请喝了一杯奶茶,我开心地说好好,这效果容易实现。(OS:人呐,这么容易就被说服了~)
1、开始搜索
对于CSS没那么精通的我,开始搜索这种效果的实现,诸如”css 蒙蒙的效果“、”css 灯关效果“之类的关键词搜索,但是并没有给我带来太多实质性的结论。这阴影效果和box-shadow
还不一样,它的阴影投影都带有一点那个图片的色泽,就是很像灯关打到了图片上留下的彩色阴影。
既然搜索不成,那我就去看看css的一些高级特性,这效果肯定跟什么shadow
有关,于是我在css文档中搜索相关的关键词,最后,功夫不负有心人,终于找到了一个很像的drop-shadow
。于是我赶紧拿过来应用一下:
1&:nth-child(1) .left .circle img { 2 /* px-to-viewport-ignore-next */ 3 filter: drop-shadow(0 18px 6px rgba(219, 112, 198, 0.5)); 4 width: 40px; 5 height: 41px; 6}
哈哈,经过一番调整,果然实现了和视觉稿一样的效果了。
这里题外话,我们用的蓝湖,但其实蓝湖在这种效果的识别上弱鸡的不行,完全没能够检测出来,包括我们待会讲的另外一篇文章,也是识别出错误的css样式,简直太差劲了的。
2、drop-shadow是啥?
顾名思义,含有shadow那肯定是阴影的意思,一个drop
形象地描述了灯光掉落的感觉,所以drop-shadow
可以理解为一束光照到元素上掉落下来的光效果。而我们常见的box-shadow
、text-shadow
从字面上也能够理解一二了,box
主打的是盒子模型的阴影,text
主打的则是文本的阴影。
按照鑫旭大神的这篇文章:## CSS3 filter:drop-shadow滤镜与box-shadow区别应用讲解,drop-shadow
有如下特性:
- 不支持内阴影效果
不能阴影叠加(后面有人留言说现在的CSS已经支持了)- 真正实现了一个元素的阴影效果,无论是DOM元素还是图片
实际的效果可以对比一下就看出来了,(图片引自上述文章)
1filter:drop-shadow(5px 5px 10px black)
1box-shadow: 5px 5px 10px black;
3、filter到底有多少宝贝?
那么css3的filter
这个特性,到底还有多少我们可以去探索的呢?
filter
的MDN官网解释是:
CSS
filter
属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。
这里有对应的效果体验的demo:尝试一下
那我们可以在平时的视觉还原中用到filter
的哪些能力呢?
比如刚才开题说到的阴影投影效果,用到了box-shadow
再比如图片的灰度(灰度图片蛮有用的,比如黑白照片处理,比如一些公祭日网站全灰的处理),用到了gray-scale
:
更多用途可以参考掘金的这篇文章:# CSS filter 有哪些神奇用途
公众号关注一波~
![微信公众号](https://blogimage.5udou.cn/homePage/%E5%85%AC%E4%BC%97%E5%8F%B7-%E7%99%BD%E8%89%B2%E7%89%88.png?x-oss-process=style/addWaterMarkBottom)
网站源码:linxiaowu66 · 豆米的博客
Follow:linxiaowu66 · Github
关于评论和留言
如果对本文 CSS之filter的使用 的内容有疑问,请在下面的评论系统中留言,谢谢。