摘要: accent-color 是从 Chrome 93 开始被得到支持的一个不算太新属性。之前一直没有好好介绍一下这个属性。直到最近在给一些系统整体切换主题色的时候,更深入的了解了一下这个属性。 简单而言,CSS accent-color 支持使用几行简单的 CSS 为表单元素着色,是的,只需几行代码就 阅读全文
posted @ 2024-02-27 10:33 ChokCoco 阅读(1375) 评论(2) 推荐(19) 编辑
摘要: 最近,有群里在群里发了这么一个非常有意思的卡片 Hover 动效,来源于此网站 -- key-drop,效果如下: 非常有意思酷炫的效果。而本文,我们不会完全还原此效果,而是基于此效果,尝试去制作这么一个类似的卡片交互效果: 该效果的几个核心点: 卡片的 3D 旋转跟随鼠标移动效果 如何让卡片在 H 阅读全文
posted @ 2024-01-22 10:59 ChokCoco 阅读(2858) 评论(8) 推荐(58) 编辑
摘要: 在 23 年的 CSS 新特性中,有一个非常重要的功能更新 -- 相对颜色。 简单而言,相对颜色的功能,让我们在 CSS 中,对颜色有了更为强大的掌控能力。 其核心功能就是,让我们能够基于一个现有颜色 A,通过一定的转换规则,快速生成我们想要的颜色 B。 其功能能够涵盖: 精简 调暗 饱和度 降低饱 阅读全文
posted @ 2024-01-08 10:15 ChokCoco 阅读(2964) 评论(8) 推荐(32) 编辑
摘要: 今天,我们来看这么一个非常常见的切图场景,我们需要一个带圆角的虚线边框,像是这样: 这个我们使用 CSS 还是可以轻松解决的,代码也很简单,核心代码: div { border-radius: 25px; border: 2px dashed #aaa; } 但是,原生的 dashed 有一个问题, 阅读全文
posted @ 2023-12-13 10:32 ChokCoco 阅读(1783) 评论(4) 推荐(24) 编辑
摘要: 在页面布局中,我们经常会遇到/使用这么一类常见的布局,也就是列表内容水平居中于容器中,像是这样: <ul class="g-contaner"> <li></li> <li></li> </ul> ul { width: 500px; display: flex; flex-direction: r 阅读全文
posted @ 2023-12-07 10:29 ChokCoco 阅读(1692) 评论(0) 推荐(19) 编辑
摘要: 最近,相信大家一定被这么个动效给刷屏了: 以至于,基于这个效果的二次创作层出不穷,眼花缭乱。 基于跨窗口通信的弹弹球: 基于跨窗口通信的 Flippy Bird: 我也尝试制作了一个跨 Tab 窗口的 CSS 动画联动,效果如下: 代码不多,核心代码 200 行,感兴趣的可以戳这里:Github - 阅读全文
posted @ 2023-11-28 10:44 ChokCoco 阅读(3782) 评论(16) 推荐(54) 编辑
摘要: 最近在群里,有个小伙伴问了这么一道很有趣的问题: CSS 能否实现,容器再某个高度下是某种表现,一旦超出某个高度,则额外展示另外一些内容 为了简化实际效果,我们看这么一张示意效果图: 可以看到,当容器高度没有超过某一个值时,没有箭头图标。反之,箭头图标出现。 这个效果在很多场景都会出现,可以算是一个 阅读全文
posted @ 2023-11-14 10:26 ChokCoco 阅读(2612) 评论(1) 推荐(18) 编辑
摘要: 每天,我们都在和各种文档打交道,PRD、技术方案、个人笔记等等等。 其实文档排版有很多学问,就像我,对排版有强迫症,见不得英文与中文之间不加空格。 所以,最近在做这么一个谷歌扩展插件 chrome-extension-text-formatting,通过谷歌扩展,快速将选中文本,格式化为符合 中文文 阅读全文
posted @ 2023-11-08 10:05 ChokCoco 阅读(2005) 评论(3) 推荐(10) 编辑
摘要: 我的小册 《CSS 技术揭秘与实战通关》上线了,想了解更多有趣、进阶、系统化的 CSS 内容,可以猛击 - LINK。 在 CSS 还原拉斯维加斯球数字动画 - 掘金 一文中,我们利用纯 CSS,实现了一个非常 Amazing 的动画效果: 其中一个核心点就是,我们利用了如下的代码,在一个 DIV 阅读全文
posted @ 2023-10-31 10:08 ChokCoco 阅读(831) 评论(3) 推荐(4) 编辑
摘要: 我的小册 《CSS 技术揭秘与实战通关》上线了,想了解更多有趣、进阶、系统化的 CSS 内容,可以猛击 - LINK。 最近大家刷抖音,是否有刷到拉斯维加斯的新地标 「Sphere」: 场馆内部的视觉效果非常惊人,其中一个效果让我虎躯一震: 我的第一想法就是,这个看起来用 CSS 也可以实现嘛?还有 阅读全文
posted @ 2023-10-18 10:54 ChokCoco 阅读(983) 评论(1) 推荐(8) 编辑