今天来看一种十分常见的交互：提示框（tooltips）。通常提示框都是纯色的。本文将介绍3种方式来实现支持渐变色的提示框，分别是 clip-path 、mask和 CSS paint，一起学习吧

本文将介绍 CSS 中一个非常有意思的属性 mask 。 顾名思义，mask 译为遮罩。在 CSS 中，mask 属性允许使用者通过遮罩或者裁切特定区域的图片的方式来隐藏一个元素的部分或者全部可见区域。 其实 mask 的出现已经有一段时间了，只是没有特别多实用的场景，在实战中…

本文是《PWA学习与实践》系列的第十篇文章。也许你还没有听说过或不了解Resource Hint，但是通过本文，你会快速学习到这一件页面加载性能利器。本系列相关demo的代码都可以在github repo中找到。 PWA作为时下最火热的技术概念之一，对提升Web应用的安全、性能…

在页面中以 symbol 引用的方式使用 SVG，已经成为目前最完美的图标解决方案。除了使用一些无版权图标网站如 Iconfont 提供的引入方式外，我们还可以在项目中使用 Webpack 来引入自己的 SVG，这就要用到 svg-sprite-loader。 安装完成以后需要…

又到了愉快的总结时刻，这次我们来看看怎么优化项目中的 Icon。 直接一句话就可以引入 Icon，这样多方便呀。 svg-sprite-loader 会把你的 svg 塞到一个个 symbol 中，合成一个大的 svg。 最后将这个大的 svg 放入 body 中。 symbo…

第一次在大佬云集的掘金里发文，自己是个菜鸟，语言组织不好、技术栈也有点旧，请各位大佬轻喷。 默认打包之后的文件，是以chunkId命名的，0、1、2、3......依次递增，对于我们分析文件十分不友好。因此需更改chunkName。 至此，前期准备工作就做好了。 可以看到图中有…

Icon，在界面设计中是指具有指代意义的图形符号。在前端开发中，图标往往由 UI 设计给出，然后经前端开发人员在 html 中使用。Icon 的设计和使用在近几年的发展中，也经历了由当初的 img 方案 到现如今的 svg 方案。下文将从 Icon 的发展历程以及到现如今的 sv

在同样的网络环境下，两个同样能满足你的需求的网站，一个“Duang”的一下就加载出来了，一个纠结了半天才出来，你会选择哪个？研究表明：用户最满意的打开网页时间是2-5秒，如果等待超过10秒，99%的用户会关闭这个网页。也许这样讲，各位还不会有太多感触，接下来我列举一组数据：Go…

我们在页面展示时，为了更好的效果，一般使用了自定义的字体 @fant-face 。 之前在开发的时候使用了一些自定义字体，这里总结下自己寻找的的一些处理办法。 本文只列出了引入本地字体，网络的字体由于实践不多，这里介绍就少一些。 一般的中文字体都要8-10M，相对于整个工程来说…