摘要：
本文主要讲讲 CSS 非常新的一个特性，CSS @property，它的出现，极大的增强的 CSS 的能力！ 根据 MDN -- CSS Property，@property CSS at-rule 是 CSS Houdini API 的一部分, 它允许开发者显式地定义他们的 CSS 自定义属性，允 阅读全文
摘要：
在一些面经中，经常能看到有关 CSS 的题目都会有一道如何使用 CSS 绘制三角形，而常见的回答通常也只有使用 border 进行绘制一种方法。 而 CSS 发展到今天，其实有很多有意思的仅仅使用 CSS 就能绘制出来的三角形的方式，本文将具体罗列讲讲。 通过本文，你能了解到 6 种使用 CSS 绘 阅读全文
摘要：
在 CSS 中，文字算是我们天天会打交道的一大类了，有了文字，则必不可少一些文字装饰。 本文将讲讲两个比较新的文字装饰的概念 text-decoration 与 text-emphasis，在最后，还会讲解使用 background 模拟文字下划线的一些有趣的动效。 text-decoration 阅读全文
摘要：
本文将介绍一些使用 SVG feTurbulence 滤镜实现的一些有趣、大胆的的动效。 系列另外两篇： 有意思！强大的 SVG 滤镜 有意思！不规则边框的生成方案 背景 今天在群里面聊天，看到有人发这个表情包： 刚好最近一直在学习 SVG，脑海中就把这个表情包的效果和 feTurbulence 滤 阅读全文
摘要：
本文将介绍一种配合 SVG 滤镜实现各种不规则图形添加边框的小技巧。 本文完整的 DEMO，你可以戳这里：transparent 配合 SVG feMorphology 滤镜生成不规则边框 需求背景，给不规则图形添加边框 在我们日常开发中，时长会遇到一些非矩形、非圆形的图案。类似下面这些： 使用纯 阅读全文
摘要：
想写一篇关于 SVG 滤镜的文章已久，SVG 滤镜的存在，让本来就非常强大的 CSS 如虎添翼。让仅仅使用 CSS/HTML/SVG 创作的效果更上一层楼。题图为袁川老师使用 SVG 滤镜实现的云彩效果 -- CodePen Demo -- Cloud (SVG filter + CSS)。 什么是 阅读全文
摘要：
今天的文章很有意思，讲一讲整块文本溢出省略打点的一些有意思的细节。 文本超长打点 我们都知道，到今天（2021/03/06），CSS 提供了两种方式便于我们进行文本超长的打点省略。 对于单行文本，使用单行省略： { width: 200px; white-space: nowrap; overflo 阅读全文
摘要：
之前有些过两篇关于字体的文章，是关于如何定义字体的： 你该知道的字体 font-family Web 字体 font-family 再探秘 本文将会和这篇 -- CSS 奇思妙想边框动画类似，讲一些文字效果，利用不同的属性搭配，实现各式各样的文字动效。 Google Font 在写各种 DEMO 的 阅读全文
摘要：
在很久之前的一篇文章，有讲到 -webkit-box-reflect 这个属性 -- 从倒影说起，谈谈 CSS 继承 inherit -webkit-box-reflect 是一个非常有意思的属性，它让 CSS 有能力像镜子一样，反射我们元素原本绘制的内容。 上一次写它，它的兼容性还非常非常的惨淡， 阅读全文
摘要：
本文其实应该叫，Web 用户体验设计提升指南。 一个 Web 页面，一个 APP，想让别人用的爽，也就是所谓的良好的用户体验，我觉得他可能包括但不限于： 急速的打开速度 眼前一亮的 UI 设计 酷炫的动画效果 丰富的个性化设置 便捷的操作 贴心的细节 关注残障人士，良好的可访问性 ... 所谓的用户 阅读全文