Coco
对 Chrome 扩展功能熟悉的小伙伴，可能都有用过 Chrome 的 3D 展示页面层级关系这个功能。 可以通过 **控制台 --> 右边的三个小点 --> More Tools --> Layers** 打开。即可以看到页面的一个 3D 层级关系，像是这样：  这个功能有几个不错的作用： 0. 页面层级概览 1. 快速厘清页面 z-index 层级之间的关系 2. 用于排查一些重绘过程（滚动过程）页面卡顿 当然，也会存在一些问题，譬如当页面的...
大家都知道，当一些重大事件发生的时候，我们的网站，可能需要置灰，像是这样： 当然，通常而言，全站置灰是非常简单的事情，大部分前端同学都知道，仅仅需要使用一行 CSS，就能实现全站置灰的方式。 像是这样，我们仅仅需要给 HTML 添加一个统一的滤镜即可： ```CSS html { filter: grayscale(.95); -webkit-filter: grayscale(.95); } ``` 又或者，使用 SVG 滤镜，也可以快速实现网站的置灰： ```HTML // ... ``` ```CSS html { filter: url(#grayscale); } ``` 大部分时候，这样都可以解决大部分问题。不过，也有一些例外。譬如，如果我们仅仅需要置灰网站的首屏，而当用户开始滚动页面的时候，非首屏部分不需要置灰，像是如下动图所示，该怎么办呢？...
在上一篇文章中 -- [现代 CSS 之高阶图片渐隐消失术](https://github.com/chokcoco/cococss/issues/23)，我们借助了 CSS @Property 及 CSS Mask 属性，成功的实现了这样一种图片渐变消失的效果：  [CodePen Demo -- 基于 @property 和 mask 的文本渐隐消失术](https://codepen.io/Chokcoco/pen/qBKPgZY) 但是，这个效果的缺陷也非常明显，虽然借助了 SCSS 简化了非常多的代码，但是，如果我们查看编译后的 CSS 文件，会发现，在利用 SCSS 只有 80 的代码的情况下，编译后的 CSS...
最近群里有这样一个有意思的问题，大家在讨论，使用 CSS 3D 能否实现如下所示的效果：  这里的核心难点在于，如何利用 CSS 实现一个立体的数字？CSS 能做到吗？ 不是特别好实现，但是，如果仅仅只是在一定角度内，利用视觉障眼法，我们还是可以比较完美的还原上述效果的。 ## 利用距离、角度及光影构建不一样的 3D 效果 这是一种很有意思的技巧，在 [奇思妙想 CSS 3D 动画 | 仅使用 CSS 能制作出多惊艳的动画？](https://github.com/chokcoco/iCSS/issues/132) 我们曾经介绍过，当然，制作的过程需要比较多的调试。 合理的利用距离、角度及光影构建出不一样的 3D 效果。看看下面这个例子，只是简单是设置了三层字符，让它们在 Z 轴上相距一定的距离。 简单的伪代码如下：...
本文是 CSS Houdini 之 CSS Painting API 系列第三篇。 + [现代 CSS 之高阶图片渐隐消失术](https://github.com/chokcoco/cococss/issues/23) + [现代 CSS 高阶技巧，像 Canvas 一样自由绘图构建样式！](https://github.com/chokcoco/cococss/issues/21) 在上两篇中，我们详细介绍了 CSS Painting API 是如何一步一步，实现自定义图案甚至实现动画效果的！ 在这一篇中，我们将继续探索，尝试使用 CSS Painting API，去实现一些过往纯 CSS 无法实现的效果。 ##...
本文是 CSS Houdini 之 CSS Painting API 系列第四篇。 + [现代 CSS 之高阶图片渐隐消失术](https://github.com/chokcoco/cococss/issues/23) + [现代 CSS 高阶技巧，像 Canvas 一样自由绘图构建样式！](https://github.com/chokcoco/cococss/issues/21) + [现代 CSS 高阶技巧，完美的波浪进度条效果！](https://github.com/chokcoco/cococss/issues/24) 在上三篇中，我们详细介绍了 CSS Painting API 是如何一步一步，实现自定义图案甚至实现动画效果的！ 在这一篇中，我们将继续探索，尝试使用 CSS Painting...
通过本文，你能了解到 4 种不一样的，使用纯 CSS 制作的渐变背景的过渡动画的方式。 有的时候，我们可能需要下面这样的动画效果，渐变背景色的过渡动画：  假设我们渐变的写法如下： ```CSS div { background: linear-gradient(90deg, #ffc700 0%, #e91e1e 100%); } ``` 按照常规想法，配合 `animation` ，我们首先会想到在 `animation` 的步骤中通过改变颜色实现颜色渐变动画，那么我们的 CSS 代码可能是： ```CSS div { background:...
在日常布局当中，肯定经常会遇到文本内容超过容器的情况。非常常见的一种解决方案是超出省略。 但是，有的时候，由于场景的限制，可能会出现在一些无法使用超出打点省略的方法的场景，譬如在导航栏中：  这种情况下，在容器定宽但是文本又溢出且不能换行的情况下，我们就需要寻求另外的解决方案。 ## hover 时弹出框提示 一种可行的方案是在 hover 的时候，弹出一个文本框展示全文，最简单的就是在文本标签下添加 title 属性，填充我们需要的内容： ``` 溢出文本1 溢出文本2 溢出文本3 溢出文本4 ```  当然，这种方法简单但是可能缺乏点用户体验。 ------ 本文将简单介绍在文本长度不确定，容器长度也不确定的情况下，任意长度的文本实现 hover 状态下，从左向右，滚动到文本末端，再滚动回初始位置，如此反复，像是这样：  ## 容器定宽，文本不定宽 我们先假设一下，我们的容器的宽度如果是固定的，但是不确定每条文本的宽度。 像是这样： ```HTML...
https://chokcoco.github.io/CSS-Inspiration/#/./filter/filter-mix csc inspiration guide online
https://chokcoco.github.io/CSS-Inspiration/#/./pesudo/pesudo-focus-target csc inspiration guide online