【css灵感】渐变圆角边框

直接上效果

阅读全文

【css灵感】渐变字

直接上效果

【css灵感】渐变字

方法一:借助mask-image属性

阅读全文

【vscode高级玩家】设置酷炫字体Fira Code

Fira Code字体是一种适用于编程的等宽字体。使用它可以减少我们在编程时处理逻辑标记的脑力消耗。

问题

Fira Code字体的作者认为开发者们在编程时使用的->,>=,:=,===这些字体其实是一个单一的逻辑标记,虽然它们只使用了两到三个字符,但时我们在阅读的时候一九要花费一部分脑力去阅读,将多个字符理解为一个逻辑字符。理想情况下所有的编程语言的操作符都可以设计为Unicode符号,不过目前并不是这样。

解决方案

Fira Code字体时一种免费的等宽字体,其中包含用于编程中逻辑标记的连体,它只是字体的一种呈现特征,底层的代码一九与ascii兼容,这有助于更快阅读和理解代码,对于频繁的序列,比如..//连字体可以帮我们纠正字体之间的间距。

直接看效果

image

实际运用效果

image

安装方式

step1 下载字体文件

下载字体文件 或者前往github下载

然后根据你的需要安装字体文件

step2 在vscode中开启

参考如下内容

1
2
3
4
"editor.fontSize": 16,
"editor.lineHeight": 22,
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true,

step3 重启vscode查看效果

重启即可

关于vscode的所有内容看这里

系列文章

推荐

js读取zip文件

简介

因为最近的一些业务上的需求,希望将项目中的一部分文件压缩(其实服务器开启gzip就行了,但是不知道为啥这个gzip时不时的抽风,只好作罢使用zip.js),这些文件内容重复率高,体积大,有些文件压缩前30m压缩后只有300k,平时经常使用的json文件,压缩前987k压缩后也只有280k。

阅读全文

多种形式实现屏幕暗角遮罩

实现屏幕暗角遮罩的方式很多,可以直接上图片,可以拿css做一个,也可以通过webgl生成。每种方式都各有利弊,也要看具体场景的具体需求来做。

通过后处理或css的形式实现简单流畅的可控遮罩,可以利用这个来实现转场的效果

阅读全文