iCSS
iCSS copied to clipboard
chokcoco
不止于 CSS
## 8、纯CSS的导航栏Tab切换方案 不用 `Javascript`，使用纯 `CSS` 方案，实现类似下图的导航栏切换：  CSS 的强大之处有的时候超乎我们的想象，Tab 切换，常规而言确实需要用到一定的脚本才能实现。下面看看如何使用 CSS 完成同样的事情。 实现 Tab 切换的难点在于如何使用 CSS 接收到用户的点击事情并对相关的节点进行操作。即是： 1. 如何接收点击事件 2. 如何操作相关DOM 下面看看如何使用两种不同的方法实现需求： ### 法一：`:target` 伪类选择器 首先，我们要解决的问题是`如何接收点击事件`，这里第一种方法我们采用 `:target` 伪类接收。 > `:target`...
为了引出本文的主题，先看看这个问题，最快水平垂直居中一个元素的方法是什么？ 水平垂直居中也算是 CSS 领域最为常见的一个问题了，不同场景下的方法也各不相同，各有优劣。嗯，下面这种应该算是最便捷的了： ```HTML ``` ```CSS .g-container { display: flex; } .g-box { margin: auto; } ``` > 上面的 `display: flex` 替换成 `display: inline-flex | grid | inline-grid` 也是可以的。...
接上篇，[巧用 CSS 实现高频出现的复杂怪状按钮 - 镂空的内凹圆角边框](https://github.com/chokcoco/iCSS/issues/271)。 上篇中，我们通过渐变的高阶技巧，实现了如下的内凹圆角边框：  本文，我们将探讨另外一个非常有意思的图形 -- **_内凹平滑圆角_**：  有点类似于 Chrome Tab 按钮造型，此图形我们在 [使用 CSS 轻松实现高频出现的各类奇形怪状按钮](https://github.com/chokcoco/iCSS/issues/152) 讨论过如何解决实现。  常见于这样的设计中：  ## 内凹平滑圆角实现上的难点 上面提到的 Chrome TAB 图形，常见的解决方案如下：  但是内凹平滑圆角实现上的难点在于...
在之前，我们有些过这么一篇文章 - [使用 CSS 轻松实现高频出现的各类奇形怪状按钮](https://github.com/chokcoco/iCSS/issues/152)。 里面包含了如下这些图形：  你可以在这里看到：[CodePen Demo -- CSS Various Button Shapes | CSS 各种造型按钮](https://codepen.io/Chokcoco/pen/QWMoBGO?editors=1100) 接下来几篇文章中，将在上述基础上，额外补充一些在日常设计稿中，常见的，可能出现的更为复杂的几个按钮，本文，我们来尝试实现这个造型：  ## 不镂空的内凹圆角按钮 在文章开头的贴图中，其实是有和这个按钮非常类似的造型：  此造型如果内部无需镂空，整体还是比较简单的，利用 `background: radial-gradient()` 径向渐变或者 `mask`，都能比较轻松的实现。 我们快速回顾一下，看这样一个简单的例子： ```HTML...
在介绍新的 CSS 属性 `contain` 之前，读者首先需要了解什么是页面的重绘与重排。 之前已经描述过很多次了，还不太了解的可以先看看这个[提高 CSS 动画性能的正确姿势](https://github.com/chokcoco/iCSS/issues/11)。 OK，下面进入本文正题， ## `contain` 为何？ `contain` 属性允许我们指定特定的 DOM 元素和它的子元素，让它们能够独立于整个 DOM 树结构之外。目的是能够让浏览器有能力只对部分元素进行重绘、重排，而不必每次都针对整个页面。 > The contain property allows an author to indicate that an element...