iCSS
iCSS copied to clipboard
chokcoco
不止于 CSS
之前在知乎看到一个很有意思的讨论 [**一行代码可以做什么？**](https://www.zhihu.com/question/285586045/answer/754139603) 那么，一行 CSS 代码又能不能搞点事情呢？ ## CSS Battle 首先，这让我想到了，年初的时候沉迷的一个网站 [CSS Battle](cssbattle.dev) 。这个网站是核心玩法就是： 官方给出一张图形，在给定的 400 x 300 的画布上，能够用越短的代码实现它，分数就越高。 **注意是，完全一模一样还原**。 其中，[第一题](https://cssbattle.dev/play/1)就非常有趣，看看题目：  嗯，想一想，如果给定这样一张图形，告诉你 HTML 的大小是 `400px` x `300px`，图片中使用到的颜色是 `#5D3A3A, #B5E0BA`，你会怎么用 CSS 去实现它呢？...
最近，群里聊到了一个很有意思的布局效果。大致效果如下所示，希望使用 CSS 实现如下所示的布局效果：  正常而言，我们的 HTML 结构大致是如下所示： ```HTML Tab 1 Tab 2 Tab 3 Tab 4 ... ... ... ... ``` 对于 Hover 导航 Tab 时候的内容切换，暂且不谈。本文，我们核心想探讨的是两个点： 1. 一是对于如下所示的不规则布局，应该如何实现：  并且，这里我们可能还需要给它加上阴影效果：...
CSS 属性选择器，可以通过已经存在的属性名或属性值匹配元素。 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展。本文将会比较全面的介绍属性选择器，尽可能的去挖掘这个选择器在不同场景下的不同用法。 ## 简单的语法介绍 + [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。 + [attr=val]：该选择器仅选择 attr 属性被赋值为 val 的所有元素。 + [attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一个。 ####...
今天我们来学习一个有意思的多行文本输入打字效果，像是这样：  这个效果其实本身并非特别困难，实现的方式也很多，在本文中，**我们更多的会聚焦于整个多行打字效果最后的动态光标的实现**。 也就是如何在文本不断变长，在不确定行数的情况下，让文字的最末行右侧处，一直有一个不断闪烁的光标效果：  ## 单行文本打字效果 在此之前，我们快速看一个之前在 [【Web动画】科技感十足的暗黑字符雨动画](https://github.com/chokcoco/iCSS/issues/129) 分享过的，非常简单的单行打字效果动画。 在这里的单行打字效果，其核心就是就是让字符一个一个的出现，像是这样：  这里借助了 animation 的 `steps` 的特性实现，也就是逐帧动画。 从左向右和从上向下原理是一样的，以从左向右为例，假设我们有 26 个英文字符，我们已知 26 个英文字符组成的字符串的长度，那么我们只需要设定一个动画，让它的宽度变化从 `0 - 100%` 经历 26 帧即可，配合...
Chrome 在 121 版本开始，原生支持了两个滚动条样式相关的样式 scrollbar-color 和 scrollbar-width。 要知道，在此前，虽然有 [::-webkit-scrollbar](https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar) 规范可以控制滚动条，可是，`::-webkit-scrollbar` 是非标准特性，在 MDN 文档中都明确了不应该在生产环境使用它。 > MDN - ::-webkit-scrollbar > Non-standard: This feature is non-standard and is not on a standards track....
最近，群里在讨论一个很有意思的线条动画效果，效果大致如下：  简单而言，就是线条沿着不规则路径的行进动画，其中的线条动画可以理解为是特殊的光效。 本文，我们将一起探索，看看在不使用 JavaScript/Canvas 的基础上，使用纯 CSS/SVG 的方式，我们可以如何大致的还原上述的线条动画效果。 ## 基于 SVG 的线条动画效果 谈到线条动画，尤其是不规则路径或者是复杂路径，我们第一时间应该想到的就是 SVG 中的 stroke-dasharray 和 stroke-dashoffset。 这两个属性，我们在多篇文章中都有提及，也是非常有意思的线条动画效果，感兴趣的可以一并拓展阅读： + [CSS 奇技淫巧 | 妙用 drop-shadow 实现线条光影效果](https://github.com/chokcoco/iCSS/issues/142) + [巧用 CSS 实现动态线条...
## 4、从倒影说起，谈谈 CSS 继承 **inherit** 给定一张有如下背景图的 div： 制作如下的倒影效果： 方法很多，但是我们当然要寻找最快最便捷的方法，至少得是无论图片怎么变化，`div` 大小怎么变化，我们都不用去改我们的代码。 ### 法一：-webkit-box-reflect 这是一个十分新的 CSS 属性，使用起来十分简单，可以从各个方向反射我们内容。不过兼容性过于惨淡： > 基本上是只有 -webkit- 内核的浏览器才支持。  不过使用起来真的是方便，解题如下： ``` css div{ -webkit-box-reflect: below; } ``` [-webkit- 内核下查看Demo](http://codepen.io/Chokcoco/pen/ORbvxJ)...
今天逛[博客网站 -- shoptalkshow](https://shoptalkshow.com/)，看到这样一个界面，非常有意思：  觉得它的风格很独特，尤其是其中一些边框。 嘿嘿，所以来一篇边框特辑，看看运用 CSS，可以在边框上整些什么花样。 ## border 属性 谈到边框，首先会想到 `border`，我们最常用的莫过于 `solid`，`dashed`，上图中便出现了 `dashed`。 除了最常见的 `solid`，`dashed`，CSS border 还支持 `none`，`hidden`， `dotted`， `double`， `groove`， `ridge`， `inset`， `outset` 等样式。除去 `none`，`hidden`，看看所有原生支持的 border 的样式： ...
## 12、几个特殊且实用的伪类选择器（`:root`,`:target`,`:empty`,`:not`） 每一个 CSS 伪类及伪元素的出现，肯定都是为了解决某些先前难以解决的问题而应运而生的。 学习了解它们，是解决许多其他复杂 CSS 问题或者前沿技术的基础。 这里是 4 个基本的结构性伪类选择器，结构性伪类选择器的共同特征是允许开发者根据文档树中的结构来指定元素的样式。 ### `:root` 伪类 `:root` 伪类匹配文档树的根元素。应用到HTML，`:root` 即表示为``元素，除了优先级更高外，相当于html标签选择器。 #### 语法样式 ````CSS :root { 样式属性 } ```` 譬如，`:root{background:#000}` ，即可将页面背景色设置为黑色。 由于属于 CSS3 新增的伪类，所以也可以作为一种...
今天群里讨论了一个非常有意思与 CSS 选择器相关的题目。题目如下： 假设我们如下的 HTML 结构： ```HTML aaaaaaaaaaaa bbbbbbbbbbbb cccccccccccc aaaaaaaaaaaa bbbbbbbbbbbb cccccccccccc aaaaaaaaaaaa bbbbbbbbbbbb cccccccccccc ``` 效果如下：  **如何在不添加类名的情况下，快速的选取第一个 class 为 `.cc` 的元素**？ 当然，上面的结构示意图只是一种可能的情况，这里想表述的场景的意思是： 1. 我们希望选取的 `.cc` 元素，在其父元素下，存在多个 `.cc`，**所以需要精准定位第一个**；...