ChokCoco

摘要： 在上篇文章 -- 一行 CSS 代码的魅力 的最后，提到了两种快速实现水平垂直居中的方式。 当然，CSS 中实现水平垂直居中的方式很多。别看到水平垂直居中就准备右上角 x 掉，本文的重点不是罗列有多少种方式实现水平垂直居中方式，而是探讨一下常见的几种水平垂直居中的方式的利弊。 嗯哼？也就是： 那么多 阅读全文

摘要： 之前在知乎看到一个很有意思的讨论 一行代码可以做什么？ 那么，一行 CSS 代码又能不能搞点事情呢？ CSS Battle 首先，这让我想到了，年初的时候沉迷的一个网站 CSS Battle 。这个网站是核心玩法就是： 官方给出一张图形，在给定的 400 x 300 的画布上，能够用越短的代码实现它 阅读全文

摘要： 开门见山，有这样一种非常常见的情况，对于一些可滚动的元素而言。通常在滚动的时候会给垂直于滚动的一侧添加一个阴影，用于表明当前有元素被滚动给该滚出了可视区域，类似这样： 可以看到，在滚动的过程中，会出现一条阴影： 对于两侧的列在滚动的过程中，静止不动，吸附在边界的问题，通常 CSS 使用 positi 阅读全文

摘要： CSS 的 position 值中，有一个非常有用的值 -- position: sticky，通常会被用于各种吸顶，吸底，吸边的效果中。 如果你对 sticky 还不太熟悉，可以先看看我的这篇文章：使用 position:sticky 实现粘性布局，当然，这篇文章里面有稍微探讨 position: 阅读全文

摘要： 本文将介绍一个不太实用的小技巧，使用 tabindex 配合 :focus-within 巧妙实现父选择器。 CSS 中是否存在父选择器？ 这是一个非常经典的问题，到目前为止，CSS 没有真正意义上被广泛实现的父选择器，这和浏览器的渲染机制有关。 如果你对 CSS 中是否存在父选择器有疑惑，可以去看 阅读全文

摘要： 在日常布局当中，肯定经常会遇到文本内容超过容器的情况。非常常见的一种解决方案是超出省略。 但是，有的时候，由于场景的限制，可能会出现在一些无法使用超出打点省略的方法的场景，譬如在导航栏中： 这种情况下，在容器定宽但是文本又溢出且不能换行的情况下，我们就需要寻求另外的解决方案。 hover 时弹出框提 阅读全文

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

摘要： display: contents 是一个比较陌生的属性，虽然属于 display 这个基本上是最常见的 CSS 属性，但是 contents 这个取值基本不会用到。但是它早在 2016 年就已经得到了 Firefox 的支持。 本文将深入一下这个有意思的属性值。 基本用法 根据 W3C 对 dis 阅读全文

摘要： 如何实现下面这个渐变的边框效果： 这个问题本身不难，实现的方法也有一些，主要是有一些细节需要注意。 border-image border-image 是 CSS 规范 CSS Backgrounds and Borders Module Level 3 (最新一版的关于 background 和 阅读全文

摘要： 本文的主题是 Glitch Art，故障艺术。 什么是故障艺术？我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式。它有一种魔幻的感觉，看起来具有闪烁、震动的效果，很吸引人眼球。 故障艺术它模拟了画面信号出现故障导致成像错误的感觉。青色色块与红色色块无法重合就是这种故障的体现。从胶片时代开始到 阅读全文