柴桑文远

众所周知，macOS 的滚动容器中默认会有一个“触底反弹”效果，也就是常说的“橡皮筋”效果，如下 通常情况下，反弹效果可以反映出是否滚动到了边界，让滚动体验更加丝滑，算是一...

练习 CSS 有一个比较有趣的方式，就是发挥想象，绘制各式各样的图案，比如来绘制一只猫咪？一起来看看如何实现的吧，有超级多的 CSS 绘制小技巧~...

Ant-design 中有一个这样的头像组件，当字符串较长时，字体大小可以根据头像宽度自动调整，效果如下 当然，这里是通过JS根据字符数量自动缩放文本实现的 而现在，仅仅通...

介绍两个和滚动定位相关的 CSS 属性：scroll-padding和 scroll-margin 在平时开发中，经常会碰到需要快速定位的问题，比如常见的锚点定位 这样，在...

本文正在参加「金石计划 . 瓜分6万现金大奖」。 聊一聊关于transform的一些事以及CSS复杂属性的处理方式 一、transform 很容易被占用 众所周知，CSS ...

本文正在参加「金石计划 . 瓜分6万现金大奖」。 众所周知，函数节流（throttle）是 JS 中一个非常常见的优化手段，可以有效的避免函数过于频繁的执行。 举个例子：一...

众所周知，高度在设置成auto关键词时是不会触发transition过渡动画的，下面是伪代码 效果如下 如果希望展开时有过渡动画，例如这样 通常是借助 JS 动态去获取元素...

介绍一个比较前沿但是非常有用的新特性：一个浏览器原生支持的 CSS 文本高亮高亮功能，官方名称叫做 CSS Custom Highlight API，有了它，可以在不改变 ...

在平时开发中，经常会碰到一些需要判断高度的场景，比如当超过一定高度后，需要自动出现展开折叠按钮，如下 传统的思路肯定是通过JS去动态计算容器的高度，但这样就涉及到加载时机的...

分享一个关于绝对定位的实战开发经验。在使用绝对定位时并不一定需要`left`或者`top`这样的偏移量，不仅代码更加精简，有时还能达到意想不到的效果...

在项目中经常会碰到需要邻近色的场景，比如将一个颜色变深（浅）一点，下面是一个按钮的选中态 如果出现一种颜色就定义一个变量，每次都要维护多个颜色变量太麻烦了。有没有办法只用一...

Safari不愧是新时代的 IE，各种 bug 层出不穷。比如有这样一个多行省略打点的布局 这样在文本超过三行的时候就会出现省略号 没啥问题，和正常浏览器一样。但是这样有个...

提到锥形渐变conic-gradient（也有的称“角向渐变”），很多人都被这个名称给迷惑了，以为就是用来画圆锥的，比如 这样可以得到锥形的放射性图案 当然，再进一步，可以...

之前写过这样一篇文章：CSS 实现多行文本“展开收起”，介绍了一些纯 CSS 实现多行文本展开收起的小技巧，特别是右下角的“展开收起”按钮，用到了浮动布局，非常巧妙，有兴趣...

今天来用 CSS 实现一个带圆角的环形 loading 动画，效果是这样的 先不考虑动画，其实就是这样一个图形 那么，如何来绘制呢？下面花两分钟一起看看吧 一、CSS实现思...

介绍一个关于CSS :nth-child 选择器的新特性。 不知道大家有没有碰到过这样的问题或者需求，从一个特殊的、不可更改的HTML结构中选择出你想要的元素，比如 请问，...

CSS现在可不仅仅只是改一个颜色这么简单，还可以做很多交互，比如做一个功能齐全的计时器？ 样式上并不复杂，主要是几个交互的地方 数字时钟的变化 开始、暂停操作 重置操作 如...

介绍一个在Chrome 112上刚刚正式推出的 CSS 动画合成属性：animation-composition 日后非常有用的一个特性，快来了解一下吧 一、从 CSS 抛...

今天学习一下利用 CSS 渐变来绘制一个 Chrome 图标，如下 如何仅使用渐变而不借助其他标签呢？一起看看如何实现的吧 一、图形拆解 乍一看好像没法直接通过渐变写出来，...

今天来分享一个比较有意思的图片 hover 效果，如下 你也可以在这里抢先体验 jcode 仔细观察，这个效果主要有两个要点 图片被切割成多个矩形 每个矩形会旋转 90 度...