内容简介:碎片化时间如何利用?几分钟get常用技能点!这次分享两个小知识点:4月4日,沉痛悼念逝去的同胞,各大网站基本都下掉了娱乐板块,并且网站色调调整为灰色。
碎片化时间如何利用?几分钟get常用技能点!
这次分享两个小知识点: CSS3的filter滤镜
以及 JSON.parse
使用小建议。
1:实现网站的灰度
4月4日,沉痛悼念逝去的同胞,各大网站基本都下掉了娱乐板块,并且网站色调调整为灰色。
怎么实现的呢?全部图片以及文本背景色设置为灰色?这样的话成本是巨大的。其实只需要加上一行css即可:
filter: grayscale(100%);
ps:可以找个网站看下效果,给html元素加上上述代码即可。
至于兼容性,对于不支持filter的浏览器,有两种解决方案:
1)使用SVG( 可缩放矢量图形
)
举例:在SVG中声明滤镜:
<svg xmlns="http://www.w3.org/2000/svg" width=0 height=0> //<filter>标签用来定义SVG滤镜;id属性可为滤镜定义一个唯一的名称 <filter id="grayscale"> <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/> </filter> </svg>
如何使用:(利用了 url()
属性)
img{ //用来把元素链接到滤镜。当链接滤镜id锚点时,必须使用#字符 filter:url('#grayscale'); //当然也可以使用DataUrl将其内联到url }
Tips:当然也可以使用 DataUrl
将svg内联到url中
img{ filter:url("data:image/svg+xml;utf8,<svg%20xmlns='http://www.w3.org/2000/svg'><filter%20id='grayscale'><feColorMatrix%20type='matrix'%20values='0.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200.3333%200.3333%200.3333%200%200%200%200%200%201%200'/></filter></svg>#grayscale") }
2)JS实现
这里有个实现案例,有需要自行研究: https://j11y.io/demos/graysca...
fiter常用属性:
filter: none | blur()
| brightness()
| contrast() | drop-shadow()
| grayscale()
| hue-rotate() | invert() | opacity()
| saturate() | sepia() | url()
;
这里举个例子: filter:blur(15px)
的使用效果:
2.JSON反序列化建议
有些童鞋可能习惯使用下面的写法:
//假设flag获得的是被序列化后的值 let flag = 'true'; JSON.parse(flag) ? 1 :2;
虽然上例的影响微乎其微,但好的编程习惯从小处做起,推荐下面写法:
flag === 'true' ? 1 : 2;
时间就像海绵,挤挤总会有的; 【3分钟技能get系列】
丰富你的碎片化时间~
更多技术分享,欢迎【扫码关注】~
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 能够自动感知背景主色调的按钮
- CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产
- 图像灰度化
- 服务灰度发布设计
- iOS APP 灰度发布方案
- Istio,灰度发布从未如此轻松!!!
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
趣学Python编程
Jason Briggs / 尹哲 / 人民邮电出版社 / 2014-3 / 45.00元
python是一款解释型、面向对象、动态数据类型的高级程序设计语言。python语法简捷而清晰,具有丰富和强大的类库,因而在各种行业中得到广泛的应用。对于初学者来讲,python是一款既容易学又相当有用的编程语言,国内外很多大学开设这款语言课程,将python作为一门编程语言学习。 《趣学python编程》是一本轻松、快速掌握python编程的入门读物。全书分为3部分,共18章。第1部分是第......一起来看看 《趣学Python编程》 这本书的介绍吧!
RGB转16进制工具
RGB HEX 互转工具
MD5 加密
MD5 加密工具