iCSS
iCSS copied to clipboard
chokcoco
不止于 CSS
## 6、全兼容的多列均匀布局问题 如何实现下列这种多列均匀布局：  ### 法一：`display:flex` CSS3 弹性盒子(Flexible Box 或 Flexbox)，是一种布局方式，当页面需要适应不同的屏幕大小以及设备类型时，它依然能确保元素拥有更恰当的排布行为。 当然 flex 布局应用于移动端不错，PC 端需要全兼容的话，兼容性不够，此处略过不谈。 ### 法二：借助伪元素及 `text-align:justify` 定义如下 `HTML` 样式： ``` HTML 1 2 3 4 5 ``` 我们知道，有个...
CSS 中，transition 属性用于指定为一个或多个 CSS 属性添加过渡效果。 最为常见的用法，也就是给元素添加一个 transition，让其某个属性从状态 A 变化到状态 B 时，不再是非常直接突兀，而是带有一个补间动画。 举个例子： ```HTML ``` ```CSS div { width: 140px; height: 64px; transition: .8s transform linear; } div:hover { transform: translate(120px,...
本文将介绍一个非常有意思的功能，使用纯 CSS 利用 resize 实现强大的图片切换预览功能。类似于这样：  ## 思路 首先，要实现这样一个效果如果不要求可以拖拽，其实有非常多的办法。 1. 将两张图片叠加在一起 2. 改变上层图片的宽度，或者使用 mask， 改变 mask 的透明度区间变化 两种方式都简单示意一下。 假设我们的结构如下，分别使用 `background` 展示两张图片： ```HTML ``` 方法一，改变上层图片的宽度的方式： ```CSS .g-outer { width: 650px; height:...
最近，有一则非常振奋人心的消息，CSS 即将原生支持嵌套 -- [Agenda+ to publish FPWD of Nesting](https://lists.w3.org/Archives/Public/www-style/2021Mar/0019.html)，表示 CSS 嵌套规范即将进入规范的 FWPD 阶段。 目前对应的规范为 -- [CSS Nesting Module](https://drafts.csswg.org/css-nesting/)。 随着 CSS 自定义属性（CSS Variable）的大规模兼容，到如今 CSS 即将支持嵌套，一些预处理器的核心功能已经被 CSS 原生支持，这是否表示 SASS/LESS 等预处理器已无用武之地？即将被淘汰了？ ## 规范的几个阶段...
本文将使用纯 CSS，带大家一步一步实现一个这样的科幻字符跳动背景动画。类似于这样的字符雨动画：  或者是类似于这样的：  运用在一些类似科技主题的背景之上，非常的添彩。 ## 文字的竖排 首先第一步，就是需要实现文字的竖向排列：  这一步非常的简单，可能方法也很多，这里我简单罗列一下： 1. 使用控制文本排列的属性 `writing-mode` 进行控制，可以通过 `writing-mode: vertical-lr` 等将文字进行竖向排列，但是对于数字和英文，将会旋转 90°...
在 CSS 中，我们经常会与各种方向方位打交道。 譬如 `margin`、`padding`，它们就会有 `margin-left`、`margin-right` 或者是 `padding-left`、`padding-right`。还有定位中的 `left`、`top`、`right`、`bottom`，它们表示了上下左右不同的方位。 还有一种情况是从x方位到x方位，譬如 `writing-mode`、`direction`，它代表了一种顺序，表示块流动方向，或者文字书写的方向等。 本文将捋一捋 CSS 世界中的方位与顺序，探寻其中一些有意思的点。 ## `writing-mode` & `direction` & `unicode-bidi` 在 CSS 世界中，这 3 个属性都与排版顺序相关，互有关联但作用各异。 + `writing-mode`：定义了文本水平或垂直排布以及在块级元素中文本的行进方向。 + `direction`：设置文本排列的方向。 rtl...
 通过本文，你能了解到 1. 最基本的使用 CSS `backdrop-filter` 实现磨砂玻璃(毛玻璃)的效果 2. 在至今不兼容 `backdrop-filter` 的 firefox 浏览器，如何利用一些技巧性的操作，巧妙的同样实现毛玻璃效果，让这个效果真正能运用在业务当中 ## 什么是 `backdrop-filter` `backdrop-filter` CSS 属性可以让你为一个元素后面区域添加图形效果（如模糊或颜色偏移）。 因为它适用于元素背后的所有元素，为了看到效果，必须使元素或其背景至少部分透明。 `backdrop-filter` 与 `filter` 非常类似，可以取的值都是一样的，但是一个是作用于整个元素，一个是只作用于元素后面的区域。 ### `backdrop-filter` 与 `filter` 对比 我们使用...
经常能看到有关 CSS 绘图的文章，譬如使用纯 HTML + CSS 绘制一幅哆啦 A 梦图画。实现的方式就是通过堆叠 div，一步一步实现图画中的一块一块。这种技巧本身没有什么问题，但是就是少了一些难度，只需要有耐心，很多图形还是能够被慢慢实现出来的。 基于 CSS 绘图的这个需求，逐渐又有了新的一个流派，**单标签实现图形**，也就是说，一个复杂的图形只借由一个标签完成，这个相对于能够无限使用标签，不断堆叠 div 来说，无疑难度上升了很多，也要求对 CSS 有着更深刻的理解。 譬如下面这个图形，就是由一个 div 元素完成，源自于 [A Single Div](https://a.singlediv.com/)：  本文就将介绍一些使用单标签绘图的技巧，并且使用这些技巧，借用单个标签去实现一些复杂图形~😅 ## 合理利用伪元素 虽然说是一个标签，但是几乎所有打着单标签实现图形标题的例子，其中都使用了 3 个元素。这就是单标签实现图形上最为核心的一部分：...
本文将介绍 CSS 中一个比较有意思的伪元素 `::marker`，利用它，我们可以让我们的文字序号变得更加的有意思！ ## 什么是 ::marker CSS 伪元素 `::marker` 是从 [CSS Pseudo-Elements Level 3](https://drafts.csswg.org/css-lists-3/#marker-pseudo) 开始新增，[CSS Pseudo-Elements Level 4](https://drafts.csswg.org/css-pseudo-4/#marker-pseudo) 中完善的一个比较新的伪元素，从 Chrome 86+ 开始得到浏览器的支持。 利用它，我们可以给元素添加一个伪元素，用于生成一个项目符号或者数字。 正常而言，我们有如下结构： ```HTML Contagious Stages Pages Courageous...
本文未完成，本文非常有意思~ ---- [CSS 实现斐波那契螺旋线](https://codepen.io/Chokcoco/pen/poPqgvw)