摘要:在最新的 Chrome Canary 中,一个有意思的 CSS 语法 Container Queries 得到了支持。 Chrome Canary:开发者专用的每日构建版,站上网络科技最前沿。当然,不一定稳定~ 而在最近几个 Chrome 版本中,有一些挺有意思的属性相继得到支持,本文就将介绍一下, 阅读全文
posted @ 2021-04-20 10:08 ChokCoco 阅读(278) 评论(1) 推荐(3) 编辑
摘要:本文主要讲讲 CSS 非常新的一个特性,CSS @property,它的出现,极大的增强的 CSS 的能力! 根据 MDN -- CSS Property,@property CSS at-rule 是 CSS Houdini API 的一部分, 它允许开发者显式地定义他们的 CSS 自定义属性,允 阅读全文
posted @ 2021-04-15 10:14 ChokCoco 阅读(1230) 评论(10) 推荐(13) 编辑
摘要:在一些面经中,经常能看到有关 CSS 的题目都会有一道如何使用 CSS 绘制三角形,而常见的回答通常也只有使用 border 进行绘制一种方法。 而 CSS 发展到今天,其实有很多有意思的仅仅使用 CSS 就能绘制出来的三角形的方式,本文将具体罗列讲讲。 通过本文,你能了解到 6 种使用 CSS 绘 阅读全文
posted @ 2021-04-12 09:47 ChokCoco 阅读(1773) 评论(3) 推荐(22) 编辑
摘要:在 CSS 中,文字算是我们天天会打交道的一大类了,有了文字,则必不可少一些文字装饰。 本文将讲讲两个比较新的文字装饰的概念 text-decoration 与 text-emphasis,在最后,还会讲解使用 background 模拟文字下划线的一些有趣的动效。 text-decoration 阅读全文
posted @ 2021-04-06 10:35 ChokCoco 阅读(1629) 评论(10) 推荐(25) 编辑
摘要:本文将介绍一些使用 SVG feTurbulence 滤镜实现的一些有趣、大胆的的动效。 系列另外两篇: 有意思!强大的 SVG 滤镜 有意思!不规则边框的生成方案 背景 今天在群里面聊天,看到有人发这个表情包: 刚好最近一直在学习 SVG,脑海中就把这个表情包的效果和 feTurbulence 滤 阅读全文
posted @ 2021-03-31 10:08 ChokCoco 阅读(422) 评论(1) 推荐(8) 编辑
摘要:本文将介绍一种配合 SVG 滤镜实现各种不规则图形添加边框的小技巧。 本文完整的 DEMO,你可以戳这里:transparent 配合 SVG feMorphology 滤镜生成不规则边框 需求背景,给不规则图形添加边框 在我们日常开发中,时长会遇到一些非矩形、非圆形的图案。类似下面这些: 使用纯 阅读全文
posted @ 2021-03-29 10:15 ChokCoco 阅读(455) 评论(0) 推荐(2) 编辑
摘要:想写一篇关于 SVG 滤镜的文章已久,SVG 滤镜的存在,让本来就非常强大的 CSS 如虎添翼。让仅仅使用 CSS/HTML/SVG 创作的效果更上一层楼。题图为袁川老师使用 SVG 滤镜实现的云彩效果 -- CodePen Demo -- Cloud (SVG filter + CSS)。 什么是 阅读全文
posted @ 2021-03-25 14:57 ChokCoco 阅读(1222) 评论(0) 推荐(24) 编辑
摘要:今天的文章很有意思,讲一讲整块文本溢出省略打点的一些有意思的细节。 文本超长打点 我们都知道,到今天(2021/03/06),CSS 提供了两种方式便于我们进行文本超长的打点省略。 对于单行文本,使用单行省略: { width: 200px; white-space: nowrap; overflo 阅读全文
posted @ 2021-03-12 10:08 ChokCoco 阅读(1218) 评论(5) 推荐(23) 编辑
摘要:之前有些过两篇关于字体的文章,是关于如何定义字体的: 你该知道的字体 font-family Web 字体 font-family 再探秘 本文将会和这篇 -- CSS 奇思妙想边框动画类似,讲一些文字效果,利用不同的属性搭配,实现各式各样的文字动效。 Google Font 在写各种 DEMO 的 阅读全文
posted @ 2021-03-08 10:24 ChokCoco 阅读(3820) 评论(19) 推荐(98) 编辑
摘要:在很久之前的一篇文章,有讲到 -webkit-box-reflect 这个属性 -- 从倒影说起,谈谈 CSS 继承 inherit -webkit-box-reflect 是一个非常有意思的属性,它让 CSS 有能力像镜子一样,反射我们元素原本绘制的内容。 上一次写它,它的兼容性还非常非常的惨淡, 阅读全文
posted @ 2021-03-03 10:28 ChokCoco 阅读(1125) 评论(2) 推荐(27) 编辑