iCSS
iCSS copied to clipboard
chokcoco
不止于 CSS
前不久，在网上看到这么一张非常有趣的图：  想必很多同学都看到这张图，是一个开发小哥被一个日间/黑夜模式切换按钮效果逼疯的视频。 其最终效果大致如下：  原完整代码在这里：[Night && Day Toggle ☀️/🌙 [Completed It!]](https://codepen.io/jh3y/pen/LYgjpYZ) 原效果用了大量 HTML 标签，大量 SVG 元素以及 350 行的 CSS 完成的上述效果。 而本文，我们将尝试优化一下代码，尝试仅仅使用一个标签，完成上述效果。 当然，首先，我们需要一个标签： ```HTML ``` 接下来，在单个标签内，我们一步一步来实现这个效果。 ## 拟态阴影 先把整个按钮的形状确定下来，我们需要这样一个整体的拟物形状： ...
本文将介绍一种基于 CSS 变量技巧，通过合理使用 CSS 变量，实现 CSS 动画 `@keyframes` 的复用。 ## CSS 变量 CSS 变量大家应该都比较熟悉了，已经不能算是新知识了，快速过一遍。 CSS 变量（CSS Variable），在之前也叫做 CSS 自定义属性，其使用方式如下： ```CSS // 声明一个变量： :root{ --bgColor: #000; } ``` > 这里我们借助了上面 `#12、结构性伪类`...
不同于传统的 PC Web 或者是移动 WEB，在客厅盒子端，接大屏显示器下，许多能流畅运行于 PC 端、移动端的 Web 动画，受限于硬件水平，在盒子端的表现的往往不尽如人意。 基于此，对于 Web 动画的性能问题，仅仅停留在**感觉已经优化的OK**之上，是不够的，想要在盒子端跑出高性能接近 60 FPS 的流畅动画，就必须要刨根问底，深挖每一处可以提升的方法。 ## 流畅动画的标准 理论上说，FPS 越高，动画会越流畅，目前大多数设备的屏幕刷新率为 60 次/秒，所以通常来讲 FPS 为 60frame/s 时动画效果最好，也就是每帧的消耗时间为 16.67ms。 ### 直观感受，不同帧率的体验 + 帧率能够达到...
关于 CSS 阴影，之前已经有写过一篇，[box-shadow 与 filter:drop-shadow 详解及奇技淫巧](https://www.cnblogs.com/coco1s/p/5592136.html)，介绍了一些关于 `box-shadow` 的用法。 最近一个新的项目，[CSS-Inspiration](https://github.com/chokcoco/CSS-Inspiration)，挖掘了其他很多有关 CSS 阴影的点子，是之前的文章没有覆盖到的新内容，而且有一些很有意思，遂打算再起一篇。 本文的题目是 CSS 阴影技巧与细节。CSS 阴影，却不一定是 ```box-shadow``` 与 ```filter:drop-shadow```，为啥？因为使用其他属性也可以模拟阴影，而且是各种各样的阴影。下面且听我娓娓道来~  ## 单侧投影 先说单侧投影，关于 ```box-shadow```，大部分时候，我们使用它都是用来生成一个两侧的投影，或者一个四侧的投影。如下：  OK，那如果要生成一个单侧的投影呢？ 我们来看看 box-shadow...
今天，收到一个很有意思的提问，如何实现类似如下的背景效果图：  嗯？核心主体是由多个六边形网格叠加形成。 那么我们该如何实现它呢？使用纯 CSS 能够实现吗？ 当然可以，下面我们就将尝试如何使用 CSS 去实现这样一个背景效果。 ## 如何绘制六边形？ 首先，看到这样一个图形，如果想要使用一个标签完成整个背景，最先想到的肯定是使用背景 background 实现，不过可惜的是，尽管 CSS 中的 background 非常之强大，但是没有特别好的方式让它足以批量生成重复的六边形背景。 因此，在这个需求中，我们可能不得不退而求其次，一个六边形实现使用一个标签完成。 那么，就拿 1 个 DIV 来说，我们有多少实现六边形的方式呢？这里简单介绍 2 种方式： + 使用 border 实现六边形...
在 CSS 中，存在许多数学函数，这些函数能够通过简单的计算操作来生成某些属性值，例如 ： + calc()：用于计算任意长度、百分比或数值型数据，并将其作为 CSS 属性值。 + min() 和 max()：用于比较一组数值中的最大值或最小值，也可以与任意长度、百分比或数值型数据一同使用。 + clamp()：用于将属性值限制在一个范围内，支持三个参数：最小值、推荐值和最大值。 在[现代 CSS 解决方案：CSS 数学函数](https://github.com/chokcoco/iCSS/issues/177)一文中，我们详细介绍了 + calc() + min() + max() + clamp() 四个数学函数。 而本文，将给大家介绍一下最近各大浏览器也逐渐开始原生支持的三角函数： + sin()...
本文为纯理论文章，可能会略微枯燥。 大家都知道，`position:fixed` 在日常的页面布局中非常常用，在许多布局中起到了关键的作用。它的作用是： **`position:fixed` 的元素将相对于屏幕视口（viewport）的位置来指定其位置。并且元素的位置在屏幕滚动时不会改变。** 但是，在许多特定的场合，指定了 `position:fixed` 的元素却无法相对于屏幕视口进行定位。这是为何呢？  ## 失效的 `position:fixed` 在许多情况下，`position:fixed` 将会失效。[MDN](https://developer.mozilla.org/zh-CN/docs/Web/CSS/position) 用一句话概括了这种情况： + 当元素祖先的 transform 属性非 none 时，容器由视口改为该祖先。 What！还有这种操作？可能有部分同学还没 get 到上面这句话的意思，通俗的讲就是指定了 `position:fixed` 的元素，如果其祖先元素存在非 none 的 transform 值...
本文将介绍一个角向渐变的一个非常有意思的小技巧！ 我们尝试使用 CSS 绘制如下图形：  在之前，类似的图案，其实我们有尝试过，在 [单标签实现复杂的棋盘布局](https://github.com/chokcoco/iCSS/issues/203) 一文中，我们用**单标签实现了这样一个棋盘布局**：  那么，本文有什么特殊之处呢？让我们一探究竟。 ## 快速实现网格布局 首先，上述的布局还是希望使用一个标签完成，这个没有问题。 利用 **渐变是可以多层的** 这个特性，我们快速完成页面的网格形状，假设我们的结构如下： ```HTML ``` ```CSS div { margin: auto; width: 500px; height: 500px; background: repeating-linear-gradient(90deg,#aec8ee 0,...
今日，群友提问，如何实现这么一个 Loading 效果：  这个确实有点意思，但是这是 CSS 能够完成的？ 没错，这个效果中的核心气泡效果，其实借助 CSS 中的滤镜，能够比较轻松的实现，就是所需的元素可能多点。参考我们之前的： + [使用纯 CSS 实现超酷炫的粘性气泡效果](https://github.com/chokcoco/iCSS/issues/188) + [巧用 CSS 实现酷炫的充电动画](https://github.com/chokcoco/iCSS/issues/75) ## 圆弧的实现 首先，我们可能需要实现这样一段圆弧：  这里需要用到的技术是： 角向渐变 `conic-gradient()` + `mask` 以及两个伪元素。图片示意如下：  核心代码如下图：...
图片资源，在我们的业务中可谓是占据了非常大头的一环，尤其是其对带宽的消耗是十分巨大的。 对图片的性能优化及体验优化在今天就显得尤为重要。本文，就将从各个方面阐述，在各种新特性满头飞的今天，我们可以如何尽可能的对我们的图片资源，进行性能优化及体验优化。 ## 图片类型的选取及 Picture 标签的使用 首先，从图片的类型上而言，除了常见的 PNG-8/PNG-24，JPEG，GIF 之外，我们更多的关注另外几个较新的图片格式： + WebP + JPEG XL + AVIF 首先，通过一张表格，快速过一下这几个图片，我们将从图片类型、透明通道、动画、编解码性能、压缩算法、颜色支持、内存占用、兼容性方面，对比它们： 图片类型 | Alpha 通道 | 动画 | 编解码性能 | 压缩算法 | 颜色支持 |...