css

基于CSS自定义网格已发布第一部分和第二部分，本文将开始第三部分探讨更多的奇特自定义形状，与之前的文章一样，核心还是基于CSS grid，clip 和 mask来自定义网格形状布局。,三部分文章不一定...

通常情况下，hover 是无法保存状态的。鼠标移入触发额外样式，一旦移出就还原了。,这就意味着，如果需要保留hover的状态，可能就不得不借助JS了，比如下面是[1]的首页排行榜效果。,,这里的主要交...

SVG 不仅仅是图标和插图，它还有很多我们开发人员有时会忘记的隐藏力量。与 CSS 相比，使用 SVG 有很多用途。例如，构建循环加载动画，或在图像上应用蒙版，在这种情况下，这并不意味着无法使用 CS...

文章首先解释了CSS网格是什么以及为什么它在现代网页设计中非常重要。它强调了响应式设计的重要性，这是使网站在各种设备和屏幕尺寸上都能良好呈现的关键。,接下来，文章列举了9个最佳的响应式CSS网格生成器...

四年一度的世界杯正在火热进行中，有没有熬夜看你喜欢的队伍比赛呢。在这欢庆的氛围中，我决定用代码参与一把世界杯，擦边参与，那就是用CSS画一个足球场，正常的用CSS布局肯定是非常easy的，所以决定只用...

(目录),,大家好，我是翼同学。,前几天刚学完CSS选择器，有位大佬分享了一个有关 CSS选择器用法的小游戏，共32关，如果你全都通关了，那么你的选择器算是初步入门了。,下面是游戏链接：,欢度国庆，在...

在今天的文章中，我们将一起来学习如何用 HTML 和 CSS 制作响应式导航栏效果。 这篇文章主要是面向初学者的，如果你是有经验的开发者，请直接跳过或者忽略。 在这篇文章中，我们将一起来实现一个响应式...

,大家好，我是 CUGGZ。,2022 年 CSS 新增了很多特性，例如容器查询、父选择器、子网格、级联层、新视口单位等，多项期待已久的功能已集成到常青浏览器（自动升级到最新版本的浏览器，包括 Chr...

作为 Web 开发人员，我们经常遇到需要隐藏网页上的元素的情况。在本文中，我们将分享8 种在 CSS 中隐藏元素的方法，每种方法都有优点和注意事项。,,隐藏元素最简单的方法之一是调整其不透明度。opa...

最近，在 CodePen 上看到这样一个非常有意思的效果：,这个效果的核心难点在于气泡的一种特殊融合效果。,其源代码在：CodePen Demo -- Goey footer[1]，作者主要使用的是 ...

2022年将成为 CSS 最伟大的一年。无论是在功能还是合作浏览器的功能发布方面，合作目标是实现 14 个功能。,本文是在 Google IO 2022上发表的演讲的文字形式。这里不会对每个功能进行深...

大家好，我是 CUGGZ。,自 Web 诞生以来，我们编写和思考 CSS 的方式发生了巨大变化。从基于 table 的布局到响应式网页设计，已经走过了漫长的道路，现在进入了由现代 CSS 功能提供支持...

不知不觉已经迈入2023年，今年是兔年，想到兔子就会联想到玉兔，中秋，胡萝卜，兔子不吃窝边草，这就越扯越远了，今天的主题是用纯CSS来实现各种不错的文字效果，文字则摘录古诗词中有关《兔》相关的诗词，让...

,今天，要介绍一种基于 CSS mask-composite 的高级技巧。,通过掌握它，我们可以通过一张 图片，得到关于它的各种变换，甚至乎，得到各种不同颜色的变换。,事情的经过是这样的，某天，我们拿...

如今，网络上的每个网站或 Web 应用程序都需要大量的 CSS 代码来使事物看起来既漂亮又出众。 我认为如果不使用 CSS，我们将永远不会有一个可以脱颖而出的优秀网页设计。,CSS 是一种非常有用的样...

华为手表开发：WATCH 3 Pro（14）传感器订阅陀螺仪 初 环境与设备 传感器介绍与说明 鸿蒙开发 文件夹： 文件 重点 新增展示的文本标记 index.hml index.css index...

今天才想起来端午这回事，没办法就急急忙忙的赶工一下，接下来我就画一下这个海报试试手了：,,先给整个网页制作一个布局吧，直接 flex 搞定，并且使其居中 justify-content、align-i...

,说明,1、CSS Modules指的是像import js一样去引入css代码。,代码中的每一个类名都是引入对象的一个属性，通过这种方式，即可在使用时明确指定所引用的css样式。,2、Modules...

介绍一个 CSS 动画合成小技巧。先看效果：,,Kapture 2022-06-26 at 16.57.42,这是一个非常“动感”的倒计时效果，在一些活动开场中比较常见，分析一下整个动画过程，不难发现...

,响应式设计指的是根据屏幕视口尺寸的不同，对 Web 页面的布局、外观进行调整，以便更加有效地进行信息的展示。我们日常生活中接触的很多应用都遵循响应式的设计。,响应式设计如今也成为 web 应用的基本...

本文将继续更新那些炫酷交互效果系列文章，今天带来的是有关 toggle 开关相关的组件。以下是本次文章涉及到的开关组件总览图，总计收集12款不同交互效果，相信总有一款适合你。 ,那些你不知道的炫酷交互...

很多页面布局，特别是那种工具类的、比如编辑器、可视化平台等，为了充分的利用屏幕空间，都会提供拖拽调节各个分栏尺寸的功能，比如像 vscode。,vscode,抽象开来，其实就是这样一个布局，左右、上下...

大家好。我是 CUGGZ。,12 月 7 日，一年一度的 State of CSS 调查结果正式公布！2022 年 CSS 状况调查于 2022 年 10 月 1 日至 11 月 1 日进行，共收到了...

,CSS 中的 Flex 布局是一种一维的布局模型，一次只能处理一个维度上的元素布局，一行或者一列。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。下面就来看看如何在 CSS 中使用...

,说明,1、流式布局使用非固定像素来定义网页内容，即百分比布局。,2、通过将盒子的宽度设置为百分比根据屏幕的宽度进行伸缩，不受固定像素的限制，内容向两侧填充。,分类,左侧固定,右侧自适应,右侧固定左侧...

CSS 是现代 Web 开发的重要组成部分！,编写高效的 CSS 代码可以帮助提高网页的性能和可维护性。,今天，将介绍编写高效 CSS 代码的5个技巧。,,使用缩短的十六进制颜色代码可以帮助减小 CS...

,不知道有没有这样的兄弟，学习 Vite 的时候，官网上各种配置看的是眼花缭乱。不知道哪些需要掌握，哪些只用简单了解一下。为了提高大家的效率，我把项目中常用的配置梳理了一下分享给大家，希望对你上手 V...

,之前项目上需要做一个烟花动画，要求是随机大小，不同地方出现，先看一下效果：,,进一步，还能实现彩色的效果，如下,,什么样的场景决定使用什么样的动画。比如一些比较轻量、装饰性的动画，CSS 动画就足够...

,介绍一个比较前沿但是非常有用的新特性：一个浏览器原生支持的 CSS​ 文本高亮高亮功能，官方名称叫做 CSS Custom Highlight API[1]，有了它，可以在不改变 dom 结构的情况...

,说明,1、通过display属性设置属性值为grid或inline-grid或者是subgrid就可以了。,2、当元素设置了网格布局，column、float、clear、vertical-alig...

这篇文章介绍了一种名为CSS层叠的技术，用于优化CSS重置过程。它解释了CSS重置的概念，即通过删除浏览器默认样式来确保在不同浏览器上呈现一致的外观。然后，它引入了CSS层叠技术，以更好地控制样式的层...

提及噪点效果，首先想到的就是以前的旧电视机信号不稳定时或者画面不稳定时的效果。如果你没有看过那种旧电视，可以看下面的gif动图，真实的情况噪点的变化速度会快很多，这里为了gif的大小，截取的时间较短供...

工作中发现前端 CSS 的使用五花八门，有用 Sass，Less 这种预处理语言，还有 CSS in JS 这种奇葩玩法，还有 TailWindCSS 这种原子化的 CSS 方案，还有 CSS Mod...

为了便于更好的理解本文，下面对像素相关概念进行梳理。,简单来说就是像素单位基本分为三种：设备像素(物理像素)、设备独立像素(逻辑像素)、CSS 像素。下文将会围绕相关概念展开讨论。,话不多说，正文开始...

这篇文章将深入探讨最初吸引我使用CSS-in-JS以及后来又决定放弃的原因。如果你对CSS-in-JS背后的逻辑感兴趣，建议耐心看完本文。,顾名思义，CSS-in-JS允许你通过在JavaScript...

calc calc()函数支持加减乘除四种运算，很多类型都可以使用calc()函数，例如​​angle​​、​​length​​、​​frequency​​、​​time​​，​​percentage...

,大家都知道，当一些重大事件发生的时候，我们的网站，可能需要置灰，像是这样：,,当然，通常而言，全站置灰是非常简单的事情，大部分前端同学都知道，仅仅需要使用一行 CSS，就能实现全站置灰的方式。,像是...

,说明,1、position的新属性sticky，在屏幕范围内(viewport)设置sticky元素时，该元素的位置不会受到定位的影响。,(设置为top、left等属性无效)，当该元素的位置将移出偏...

,世界杯正在进行中，也不要忘记学习 CSS（得想办法蹭一波热度）。比如，用 CSS 绘制一个足球场？,,CSS 足球场,一眼望去，这里的形状只有圆形和矩形，在不借助其他标签的情况下（包括伪元素），其实...

​您是否曾经访问过一个网站并被其惊人的功能所震撼？其中之一可能是一个很酷的鼠标光标，它不同于您习惯的常规箭头或指针光标。,这确实可以改善用户体验，最近我一直想知道它是如何工作的。所以我开始做一些研究...

Signal（信号）是一种存储应用状态的形式，类似于 React 中的 useState()。但是，有一些关键性差异使 Signal 更具优势。Vue、Preact、Solid 和 Qwik 等流行 ...

,在各种短视频界面上，我们经常会看到类似这样的点赞动画：,,非常的有意思，有意思的交互会让用户更愿意进行互动。,那么，这么有趣的点赞动画，有没有可能使用纯 CSS 实现呢？那当然是必须的，本文，就将巧...

我们最近使用 CSS mask属性创建花哨的边框，本文将使用 CSS mask和 clip-path来切元素的四个角！使用多种技巧可以从任何元素的角切割不同的形状。在本文中，我们将考虑创建独特角落形状...

,说明,1、为低版本浏览器构建页面，保证最基本的功能，然后对高级浏览器进行效果、交互等改进，增加功能。,达到更好的用户体验。,2、渐进增强认为应该关注内容本身。,请注意区别，连浏览器这个词都没提。内容...

​译者 | 陈峻,审校 | 孙淑娟,如果您一直在使用CSS，那么很可能会遇到一些布局或跨浏览器兼容性等问题。例如，CSS3的样式不太适用于IE的某些旧版本。而有时候，当我们准备使用某项功能时，却发现它...

,原理其实很简单，content​虽然本身不支持 CSS 变量直接渲染，但是可以支持counter-reset。,通过一次中转，就可以让content也能支持CSS变量作为字符展示了。,,但是，这个方...

,说明,1、值越大，定位元素在层叠元素中越高。,z-index的默认属性值为0。,2、若取值相同，则按书写顺序，后来居上。,3、后面的数字一定不能加单位。,4、定位盒子才有z-index属性。,只有相...

随着CSS的不断发展，一些很酷且有用的属性要么完全被忽视，要么由于某种原因不像其他常见属性那样被开发者熟练应用。这篇文章我们将一起学习那些CSS中陌生但非常有用的CSS属性，这些属性你可能听说过，也可...

,本文，将向大家介绍一种将多个 CSS 技巧运用到极致的技巧，利用纯 CSS 实现拼图游戏。,本技巧源自于 Temani Afif[1] 的 CodePen CSS Only Puzzle game...

在如今SPA应用流行的情况下，页面上的所有东西都是通过javascript进行加载，本文将带你一步一步截获用户请求，并修改请求地址。,我们主要使用的方法为Hook原生接口进行接口调用拦截；在拦截前，先...

,HTML 或超文本标记语言是每个开发人员都需要熟悉的 Web 开发基础。根据 Stack Overflow 的一项调查，它是 Web 开发人员的一项流行技能，是 2020 年第二常用的语言。虽然它不...

大家好，我是 CUGGZ。,在 CSS 中，有些选择器会比其他选择器执行速度更快。下面就来深入研究 CSS 选择器的性能真相，看看如何编写 CSS 选择器才能更快地执行！,编写 CSS 选择器的方式会...

2022 年 CSS 新增了很多特性，例如容器查询、父选择器、子网格、级联层、新视口单位等，多项期待已久的功能已集成到常青浏览器（自动升级到最新版本的浏览器，包括 Chrome、Edge、Firefo...

之前在这篇文章（CSS 实现树状结构目录[1]）中实现了一个树状结构，效果是这样的,图片,整个实现没有用到任何 JavaScript，非常巧妙，有兴趣可以回顾一下。,不过有时候还需要那种带连接线的样式...

本文将提供有关如何使用 HTML5、CSS3 和 JavaScript 构建笔记应用程序的信息。,本文适用于熟悉 HTML5、CSS3 和 JavaScript 基础知识的人。本文不包括对 HTML5...

box-shadow box-shadow表示盒阴影，可以给元素设置阴影效果，如果我们设置向下的阴影效果: .wrapper { position: fixed; left: 0; top: 0, b...

Sass 是一个 CSS 预处理器，完全兼容所有版本的 CSS。实际上，Sass 并没有真正为 CSS 语言添加任何新功能。只是在许多情况下可以可以帮助我们减少 CSS 重复的代码，节省开发时间。下面...

理由如下：,以上是我认为最大的便捷之处。当然它还有更多好处：自带了Prettier、ESLint便于规范代码风格，自带了JEST方便做测试，提供了一些项目模版等。当然这些你不用也可，对我们的开发完全没...

, 大家好，我是前端西瓜哥。今天来看看前端工程化是什么。,工程化，可以理解为使用一些方式，去改良然后提高行业中现有的步骤、设计、应用方式。前端工程化，就是指对前端进行一些流程的标准化，让开发变得更有效...

,移动优先的设计方法很棒——它专注于对用户真正重要的东西，它被很好地实践，并且多年来一直是一种常见的设计模式。所以开发你的 CSS 移动优先也应该很棒……对吧？,嗯，不一定。经典的移动优先 CSS 开...

作者 | 李光毅,虽然开发工具早已经从 preprocessor 进化到了 styled component 甚至是 functional css，但在我看来新的工具并没有让我们的样式代码写的更好，只...

最近在项目中碰到一个这样的角标设计，如下：,设计稿,像这种可以文字可变化，自适应大小的布局，自然首选 CSS 了~下面看看如何实现的（两分钟读完）,从设计上可以拆分成两部分，一个圆角矩形和一个三角形...

,看到封面这张图，是不是如同艺术品一般，第一次看到这张图时，是比较震惊的，迫不及待的研究其源码是如何实现的，最后更为惊奇的是只需要纯 CSS 即可实现，接下来就展开说明实现过程。,实现此效果需要了解 ...

,在上一篇 CSS 如何根据背景色自动切换黑白文字？中，讲述了文本自适应背景色的一些小技巧，不过还存在一定局限性，比如：如果是背景是渐变色该怎么办？,,很容易想到的思路是将两个渐变色取过渡中间色，然后...

​​display: contents​​ 是一个比较陌生的属性，虽然属于 display 这个基本上是最常见的 CSS 属性，但是 ​​contents​​ 这个取值基本不会用到。但是它早在 201...

在 CSS 选择器家族中，新增这样一类比较新的选择器 -- 逻辑选择器，目前共有 4 名成员：,本文将带领大家了解、深入它们。做到学以致用，写出更现代化的选择器。,:is() CSS伪类函数将选择器列...

大家好，我是 ​​ConardLi​​，今天给大家分享 CSS 中一个神奇的属性：filter[1]，为什么说它神奇？正如我标题所说的，我突然发现它能帮我们轻松实现 穿墙特效，类似这种的,gif录制略...

今天从前端的角度看看网页变灰是如何实现的，以及相关使用技巧。,先来看看一些主流网站是如何实现置灰的：,,,,可以看到，这些网站实现置灰的方式不太一样，但是大同小异。本质上都是使用了 CSS 中的 fi...

众所周知，函数节流（throttle）是 JS 中一个非常常见的优化手段，可以有效的避免函数过于频繁的执行。,举个例子：一个保存按钮，为了避免重复提交或者服务器考虑，往往需要对点击行为做一定的限制，比...

,大部分同学都用过 CSS 的屏幕宽度媒体查询，像是这样：,这里表示的是与屏幕宽度相关的样式设置，上面的代码表示当屏幕宽度大于 900px 时，内部的样式代码块才能生效。,其实不仅仅是上面的屏幕宽度媒...

作者 ｜ vivo 互联网前端团队-Wei Xing,Houdini被称之为Magic of styling and layout on the web，看起来十分神秘，但实际上，Houdini并非什...

如下示例，是使用VUE 打造的本地小说阅读网站 ​编辑 一、本地小说网站总体组织框架 1、所需的VUE库和elementLib以及JQ库 ​编辑 2、本地目录设计 编辑 编辑 藏书库下，是HTML...

,1、直接给元素添加pointer-events:none;样式来禁止触发事件，实现不可点击。,2、先给元素添加“cursor:not-allowed;”样式；然后使用js代码阻止点击事件的触发，实现...

,1、从属关系区别,@import是 CSS 提供的语法规则，只有导入样式表的作用；,link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。,2、加载顺序区...

,在 CSS 中，倒影是一种比较常见的效果。今天，我们就将尝试，使用 CSS 完成各类不同的倒影效果，话不多说，直接进入主题。,首先，快速过一下在 CSS 中，实现倒影的 2 种方式。,正常而言，-w...

,本文是由 Emotion 的第二大活跃维护者 Sam 分享，本文第一人称都指的是 Sam。Emotion 是一个广泛流行的 CSS-in-JS 库，用于React。文章 Sam 会带大家深入探讨 C...

今天分享一个炫酷的文本过渡动画效果，如下面GIF所示，曾经是否有见过这种动画呢，想想是不是感觉挺复杂呢，通常这个过渡效果通过较为复杂的可用WebGl实现，本文通过另一种方式实现，文章尾部有神奇的代码...

今日是农历六月初一。不知不觉地又是一年夏天来临了，面对烈日炎炎，夏天要吃的水果那是必不可少，今天就用CSS来给大家带来一个水果拼盘，提前给大家解解暑~,,以上15种水果你能看出都是什么水果吗？相对不够...

混合 react提供了组件的目的是为了复用虚拟DOM，所以react提供了混合的技术是为了复用组件的功能 在ES5中，我们可以通过mixins使用，继承对象中的属性和方法 但是ES6中，提供了exte...

,在 WeGame[1] 的 PC 端官网首页，有着非常多制作精良的基于滚动的动画效果。,这里我简单截取其中 2 个比较有意思的转场动画，大家感受感受。转场动画 1：,,转场动画 2：,,是不是挺有意...

大家好，我是 CUGGZ。,在 CSS 中颜色无处不在，它们可以作为文字、背景、阴影、表格、边框、链接等属性。我们在 CSS 中使用的大多数颜色都是 hex 和 RGB，其实表示颜色的方式有很多，下面...

最近，Chrome团队发布了对一个新的CSS规范的实验性支持，即样式查询。简而言之，它让我们查询容器的样式，而不是只查询尺寸。在查询容器尺寸不够的情况下，这可能很有帮助。,介绍样式查询之前，我们先来回...

如果你关注我的话，你可能知道我已经做了好几年网络开发人员，在那段时间里，我创建了多个网站，卖掉了大部分网站，并赚钱了。,我不想吹牛，但这就是现实。,之前，我与你分享了很多Web 开发资源，随着时间的推...

大家好，我是 CUGGZ。,你有没有想过使用CSS选择器来检查父元素中是否存在特定的元素？例如，如果一个卡片组件中有图片，就给它添加一个display:flex。这以前在CSS中是无法实现的，而全新的...

,大家好，我是 CUGGZ。,今天来分享 12 个优化 CSS 代码小技巧！,分析表明，一些CSS属性的渲染速度比其他属性慢，因此应该谨慎使用。包括以下属性：,上述属性都是对性能要求比较高的。如果这些...

,在平时开发中，经常会碰到一些需要判断高度的场景，比如当超过一定高度后，需要自动出现展开折叠按钮，如下：,,传统的思路肯定是通过JS去动态计算容器的高度，但这样就涉及到加载时机的问题，获取早了可能元素...

大家好，我是 CUGGZ。,CSS 中的 Flex 布局​和 Grid 布局都是非常强大的布局方案，那什么情况下应该使用 Grid 布局，什么情况下应该使用 Flex 布局呢？本文就来通过一些示例看看...

练习 CSS 有一个比较有趣的方式，就是发挥想象，绘制各式各样的图案，比如来绘制一只思否猫？,思否猫，SegmentFault 思否[1]的吉祥物，是一只独一无二、特立独行、热爱自由的(>^ω...

,说明,1、transition-delay。,延迟后开始动画。,2、transition-duration。,过渡动画的一个持续时间。,3、transition-property。,执行动画对应的属...

在正常的开发中，我们会遇到很多元素块排列对齐的需求，如九宫格抽奖，多张图片上传后等分布局预览，微信朋友圈多张图片展示等。这都是正常的正方形很规整的布局。,如下所示，如果图像不是完全正方形，而是形状像六...

(目录),上面的代码，就是最典型的例子。 其中 style 标签的内容，就是一个 CSS的代码。,,,,,CSS 是不区分大小写，但是我们开发时统一使用小写。,,这个类选择器，可以说是我们最常使用的一...

,CSS是用来布局和格式化网页和其他媒体的语言。它是 Web 的三种主要语言之一，与HTML(用于结构)和JavaScript(用于行为)并列。每一年，我们都看到CSS的规模在增长，2022年也不例外...

通常要做一个时钟，肯定离不开 JS 定时器。今天换一种思路，用 CSS 来实现一个时钟，如下：,你也可以访问这个CSS time (codepen.io)[1]查看实际效果。,当然借用了一点点 JS ...

这篇文章介绍了15个重要的CSS属性，旨在提高读者的CSS知识和技能。文章以清晰的方式解释了每个属性的作用和用法，并提供了相应的示例代码。通过这篇文章，读者可以了解到一些有趣且实用的CSS属性。,CS...

随着 Web 开发的发展，新的 CSS 趋势正在出现，以帮助开发人员创建更具视觉效果的网站。从响应式设计和动画到新技术和样式，CSS 趋势不断变化和适应，以满足现代网页设计的需求。由于 CSS 趋势是...

,说明,1、repeat()属性可以创建重复的网格轨道。这个适用于创建相等尺寸的网格项目和多个网格项目。,2、repeat()也接受两个参数：第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨...

,如上图所示，文字随着界面的交互变化会修改文字的颜色形成反差色，让平平无奇的文字产生了眼前一亮的效果。如果你关注设计和动画效果，这样的效果肯定见过不少，在一些比较注重设计的网站都有类似的交互效果出现...

大家好，我是 CoderBin,在介绍BFC之前，需要先给大家介绍一下文档流。,我们常说的文档流其实分为 定位流、 浮动流、 普通流三种。,如果元素的属性 position 为 absolute ...

之前看到coco[1]的这样一篇文章：纯 CSS 实现波浪效果！[2]，非常巧妙，通过改变border-radius和不断旋转实现的波浪效果，有兴趣的可以去研究一下。 这次尝试一下使用 CSS 渐变来...

,鼠标拖拽元素移动，算是一个稍微有点点复杂的交互。,而在本文，我们就将打破常规，向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果。,在之前的这篇文章中 -- [1]，我们介绍了非常...