图解 CSS Grid 布局
大家好，我是 CUGGZ。,Grid（网格）布局是最强大的 CSS 布局方案，用于构建二维布局。Grid 布局将页面划分成一个个网格，可以任意组合不同的网格，实现各种各样的布局。下面就来看看 CSS ...
排序
鲜为人知的CSS实用技巧
今天来看几个鲜为人知但很实用的 CSS 技巧!,可以使用 CSS 中的 backdrop-filter 属性来实现毛玻璃特效：,实现效果如下：,backdrop-filter 属性可以为一个元素后面区...
css响应式布局如何理解
,说明,1、利用CSS3中的Media Query(媒体查询)，通过查询screen的宽度来指定一定宽度范围的网页布局。,2、响应式布局可以为不同终端的用户提供更舒适的界面和更好的用户体验。,一个网站...
css中first-line如何理解
,说明,1、first-line是针对排版之后的line，其实跟源码里面的first line没有任何的关系。,2、假如浏览器提供的渲染的宽度不同，first-line在两个环境里面它最终括住的元素数...
css中类选择器的注意事项
,注意,1、每个HTML标签都有一个属性叫做class, 也就是说每个标签都可以设置类名。,2、在同一个界面中class的名称是可以重复的。,3、在编写class选择器时一定要在class名称前面加上...
现代 CSS 指南 -- At-Rule 规则必知必会
,大部分同学都用过 CSS 的屏幕宽度媒体查询，像是这样：,这里表示的是与屏幕宽度相关的样式设置，上面的代码表示当屏幕宽度大于 900px 时，内部的样式代码块才能生效。,其实不仅仅是上面的屏幕宽度媒...
如何使用CSS和JavaScript制作自定义鼠标光标
您是否曾经访问过一个网站并被其惊人的功能所震撼？其中之一可能是一个很酷的鼠标光标，它不同于您习惯的常规箭头或指针光标。,这确实可以改善用户体验，最近我一直想知道它是如何工作的。所以我开始做一些研究...
重磅！2022年CSS新增的十个实用功能
2022 年 CSS 新增了很多特性，例如容器查询、父选择器、子网格、级联层、新视口单位等，多项期待已久的功能已集成到常青浏览器（自动升级到最新版本的浏览器，包括 Chrome、Edge、Firefo...
css子元素选择器的介绍
,说明,1、子元素选择器只会查找儿子, 不会查找其他被嵌套的标签。,2、子元素选择器之间需要用>符号连接, 并且不能有空格。,3、子元素选择器不仅仅可以使用标签名称, 还可以使用其它选择器。,子...
CSS 原生嵌套语法来了！
大家好，我是 CUGGZ。,最近在看 caniuse.com 时发现，Chrome 和 Edge 浏览器将在 109 版本实验性支持 CSS 原生嵌套语法！,,1 月 10 日，Chrome 109 ...
使用纯Css实现网站换肤和焦点图切换动画
,,通常我们实现网站换肤都基于如下方式实现:,以上几个方案都可以实现一定程度上的换肤效果,但是如果是一些基础性的换肤,比如网站的背景样式,某个按钮的样式,某块内容区域的样式等等这种局部的换肤,我们能不...
Css Grid 布局那些事儿
CSS Grid 是一种为 Web 开发创建网站布局的方式。它已经存在了很多年，随着更多浏览器的支持，它终于变得越来越流行。,接下来我们将了解下 CSS Grid 及其工作原理。了解下如何使用它。,随...
CSS 如何根据背景色自动切换黑白文字？
在项目中，经常会碰到背景色不确定的场景，为了让内容文字足够清晰可见，文字和背景之间需要有足够的对比度。换句话说，当背景是深色时，文字为白色，当背景是浅色时，文字为黑色，就像这样：,,通常这种情况，大家...
CSS渐变属性的特效，你学会了吗？
,页面中如果有两种或多种指定颜色之间的平滑过渡的渐变效果，会使得我们的视觉效果瞬间提升几个档次，在CSS3中有提供的多个渐变方式属性就能让我们轻松实现这样的渐变效果。,目前CSS渐变属性有六个，分别为...
css中outline方法的使用
,说明,1、如果只需要两层边框，可以选择先设置一层常规边框，再加上outline(描边)属性来生成外层边框。,使用outline不仅可以模拟实线边框，还可以生成虚线边框。,2、outline-offs...
2022年CSS都有哪些更新？
,大家好，我是 CUGGZ。,2022 年 CSS 新增了很多特性，例如容器查询、父选择器、子网格、级联层、新视口单位等，多项期待已久的功能已集成到常青浏览器（自动升级到最新版本的浏览器，包括 Chr...
利用噪声构建美妙的 CSS 图形
,在平时，我非常喜欢利用 CSS 去构建一些有意思的图形。,我们首先来看一个简单的例子。首先，假设我们实现一个 10x10 的格子：,,此时，我们可以利用一些随机效果，优化这个图案。譬如，我们给它随机...
用于Web开发的15种优秀编程语言
,HTML 或超文本标记语言是每个开发人员都需要熟悉的 Web 开发基础。根据 Stack Overflow 的一项调查，它是 Web 开发人员的一项流行技能，是 2020 年第二常用的语言。虽然它不...
CSS 渐变锯齿消失术，你学会了吗？
,在 CSS 中，渐变（Gradient）可谓是最为强大的一个属性之一。,但是，经常有同学在使用渐变的过程中会遇到渐变图形产生的锯齿问题。,那么，什么是渐变图形产生的锯齿呢？,简单的一个 DEMO...
妙啊！超酷炫的气泡效果
最近，在 CodePen 上看到这样一个非常有意思的效果：,这个效果的核心难点在于气泡的一种特殊融合效果。,其源代码在：CodePen Demo -- Goey footer[1]，作者主要使用的是 ...
css中first-letter是什么
,说明,1、first-letter相当于我们有一个元素把内容里面的第一个字母给括了起来。,2、first-letter是可以任意声明各种不同的属性的，但是我们是无法改变它的content的。,我们应...
神奇！探究混合模式\滤镜导致 3D 失效问题
,之前在写一个小的 CSS Demo，一个关于 3d 球的旋转动画，关于 CSS 3D，少不了会使用下面这几个属性：,这个 Demo 你可以戳这里，大概是这样：CodePen Demo - 3D ba...
函数节流，CSS也能轻松实现：CSS防止按钮重复点击
众所周知，函数节流（throttle）是 JS 中一个非常常见的优化手段，可以有效的避免函数过于频繁的执行。,举个例子：一个保存按钮，为了避免重复提交或者服务器考虑，往往需要对点击行为做一定的限制，比...
CSS背景图和HTML的标签怎么选？
Signal（信号）是一种存储应用状态的形式，类似于 React 中的 useState()。但是，有一些关键性差异使 Signal 更具优势。Vue、Preact、Solid 和 Qwik 等流行 ...
css内联样式的盒子模型
,1、内联样式是不能设置width和height的。,2、它可以设置水平内边距，会影响页面布局，会将水平方向其他元素挤开。,但是垂直内边距则不会影响页面布局，它是选择覆盖其他元素。,3、它可以设置边框...
现代 CSS 高阶技巧，像 Canvas 一样自由绘图构建样式！
在上一篇文章中 -- 现代 CSS 之高阶图片渐隐消失术[1]，我们借助了 CSS @Property 及 CSS Mask 属性，成功的实现了这样一种图片渐变消失的效果：,,CodePen Demo...
冷知识！使用 Display: Contents 实现幽灵节点？
display: contents 是一个比较陌生的属性，虽然属于 display 这个基本上是最常见的 CSS 属性，但是 contents 这个取值基本不会用到。但是它早在 201...
CSS容器查询获得主流浏览器支持，是什么？怎么用？
近期，主流浏览器终于都支持了 CSS 容器查询功能：,,在引入响应式设计之前，许多公司通过提供不同的站点来处理基于屏幕尺寸更改布局的问题。2010 年，Ethan Marcotte 引入了响应式设计的...
css中repeat()函数的用法
,说明,1、repeat()属性可以创建重复的网格轨道。这个适用于创建相等尺寸的网格项目和多个网格项目。,2、repeat()也接受两个参数：第一个参数定义网格轨道应该重复的次数，第二个参数定义每个轨...
CSS 奇思妙想之酷炫倒影
,在 CSS 中，倒影是一种比较常见的效果。今天，我们就将尝试，使用 CSS 完成各类不同的倒影效果，话不多说，直接进入主题。,首先，快速过一下在 CSS 中，实现倒影的 2 种方式。,正常而言，-w...
CSS 如何设置自动滚动定位的间距？
在平时开发中，经常会碰到需要快速定位的问题，比如常见的锚点定位。,这样，在点击a标签时会自动定位到与之相对应的内容上，如下：,,但是，这种通过锚点触发的定位默认是紧贴滚动容器边缘的，如果一些定位元素...
css中transition的四种属性
,说明,1、transition-delay。,延迟后开始动画。,2、transition-duration。,过渡动画的一个持续时间。,3、transition-property。,执行动画对应的属...
一篇文章带你用 CSS 绘制一个3D掘金 logo
尝试一下用 CSS 绘制简单的 3d 图形，比如一个掘金 logo？,,相比 2d 绘制，3d 有哪些需要注意的小细节呢？一起看看吧,除去挖空部分，整个外形其实是一个金字塔形，或者叫四棱锥形（四角锥...
深入研究 CSS 文本换行
今天来研究一下 CSS 中的文本换行。正常情况下，在固定宽度的盒子中的中文会自动换行。但是，当遇到非常长的英文单词或者很长的URL时，文本可能就不会自动换行，而会溢出所在容器。幸运的是，CSS 为我们...
十个适合Web开发的最佳 CSS 生成器工具
在写CSS的时候，我们可以手写CSS，也可以直接使用一些CSS生成器来完成，今天我就跟大家分享10个好用的CSS生成器工具，帮助你提升工作效率。,,网址：https://stripesgenerato...
每个Web开发人员都应该知道的七个CSS核心概念
到目前为止，很多人不知道 CSS 是如何工作的，不过这已经不是什么秘密了，尤其是当你第一次接触 CSS 时。很难弄清楚为什么一个元素位于某个位置，或者为什么该元素具有红色，尽管使用了重要的覆盖它。,在...
CSS中motion path模块的介绍
,说明,1、利用这个规范规定的属性，我们可以控制元素按照特定的路径进行位置变换的动画。并且，这个路径可以是非常复杂的一条路径。,2、CSS传统方式可以实现直线路径动画。,实例,将一个物体从A点直线运动...
十个CSS实现元素居中的方法汇总
,在前端开发工程师的日常生活中，使用 CSS 使元素居中是很常见的，这也是面试中经常被问到的问题。,也许你已经使用 flex 或 absolute + transform 来实现它，但你知道至少有 1...
CSS 一步一步实现烟花动画
,之前项目上需要做一个烟花动画，要求是随机大小，不同地方出现，先看一下效果：,,进一步，还能实现彩色的效果，如下,,什么样的场景决定使用什么样的动画。比如一些比较轻量、装饰性的动画，CSS 动画就足够...
css浮动元素的重叠问题
,说明,1、行内元素与浮动元素重叠，其边框、背景和内容将显示在浮动元素之上。,2、块级元素与浮动元素重叠时，边框和背景将显示在浮动元素下，内容将显示在浮动元素上。,实例,以上就是css浮动元素的重叠问...
中后台 CSS Modules 优秀实践
工作中发现前端 CSS 的使用五花八门，有用 Sass，Less 这种预处理语言，还有 CSS in JS 这种奇葩玩法，还有 TailWindCSS 这种原子化的 CSS 方案，还有 CSS Mod...
css清除浮动的原因
,原因分析,1、清除浮动是为了清除使用浮动元素的影响。高度塌陷的父元素。,如果一个块级元素没有设置height，它的height是由子元素打开的。,2、使用浮动后，子元素会脱离标准文档流，也就是说，父...
20 个超级实用的 CSS 技巧，帮助你成为更好的开发者
在开发项目中，修改输入占位符样式，多行文本溢出，隐藏滚动条，修改光标颜色，水平和垂直居中等等，这些都是我们非常熟悉的开发场景！前端开发者几乎每天都会和它们打交道，因此，我在这里给大家总结了20个超级实...
为什么我要含泪挥别 CSS-in-JS？
这篇文章将深入探讨最初吸引我使用CSS-in-JS以及后来又决定放弃的原因。如果你对CSS-in-JS背后的逻辑感兴趣，建议耐心看完本文。,顾名思义，CSS-in-JS允许你通过在JavaScript...
探究 CSS 选择器的性能真相
大家好，我是 CUGGZ。,在 CSS 中，有些选择器会比其他选择器执行速度更快。下面就来深入研究 CSS 选择器的性能真相，看看如何编写 CSS 选择器才能更快地执行！,编写 CSS 选择器的方式会...
一篇带你了解全新的的 CSS 选择器 ：Has()
大家好，我是 CUGGZ。,你有没有想过使用CSS选择器来检查父元素中是否存在特定的元素？例如，如果一个卡片组件中有图片，就给它添加一个display:flex。这以前在CSS中是无法实现的，而全新的...
最精简 CSS 学习路线，十分钟全部掌握！让你轻松成为"大神"！
最近有网友私信我，学CSS总是觉得很难，跟着网站指南一个一个学，前面学后面忘；哪些是必须要用的也分不清。,这份最精简的CSS学习路线，十分钟让你快速掌握CSS；学完之后你就是前端小达人！,本指南罗列了...
CSS Houdini：用浏览器引擎实现高级CSS效果
作者 ｜ vivo 互联网前端团队-Wei Xing,Houdini被称之为Magic of styling and layout on the web，看起来十分神秘，但实际上，Houdini并非什...
为什么和 CSS-in-JS 说拜拜
,本文是由 Emotion 的第二大活跃维护者 Sam 分享，本文第一人称都指的是 Sam。Emotion 是一个广泛流行的 CSS-in-JS 库，用于React。文章 Sam 会带大家深入探讨 C...
CSS 伪类没有生效？探索 content 属性！
问题就是 CSS 伪类没有生效，具体表现如下，可见 demo[1]:,可以看到，伪类并没有生效。,解决的方法很简单，设置 content 属性，而且要具有一定的宽高，可以设置 display 为 in...
巧用 Transition 实现短视频 APP 点赞动画
,在各种短视频界面上，我们经常会看到类似这样的点赞动画：,,非常的有意思，有意思的交互会让用户更愿意进行互动。,那么，这么有趣的点赞动画，有没有可能使用纯 CSS 实现呢？那当然是必须的，本文，就将巧...
CSS层级小技巧！如何在滚动时自动添加头部阴影？
在网页中，经常会用阴影来突出层级关系，特别是顶部导航，但有时候设计觉得没必要一开始就显示阴影，只有滚动后才出现。比如下面这个例子，注意观察头部阴影。,作家专区,可以看到，只有滚动以后才出现阴影。一般情...
优化 CSS 代码的12个小技巧
,大家好，我是 CUGGZ。,今天来分享 12 个优化 CSS 代码小技巧！,分析表明，一些CSS属性的渲染速度比其他属性慢，因此应该谨慎使用。包括以下属性：,上述属性都是对性能要求比较高的。如果这些...
用 JavaScript 实现一个简单的笔记应用程序
本文将提供有关如何使用 HTML5、CSS3 和 JavaScript 构建笔记应用程序的信息。,本文适用于熟悉 HTML5、CSS3 和 JavaScript 基础知识的人。本文不包括对 HTML5...
一文读懂 CSS 单位
,大家好，我是 CUGGZ。,说起 CSS 单位，我们最常用的可能就是像素单位（px），它是一个绝对单位，也就是说一个10px的文字，放在哪里都是一样大的。单位可以影响颜色、距离、尺寸等一系列的属性...
还在使用定时器吗？有点离谱的 CSS 电子时钟
通常要做一个时钟，肯定离不开 JS 定时器。今天换一种思路，用 CSS 来实现一个时钟，如下：,你也可以访问这个CSS time (codepen.io)[1]查看实际效果。,当然借用了一点点 JS ...
CSS、SVG、Canvas对特殊字体的绘制与导出
,最近在项目中需要对特殊字体进行绘制与导出，如下：,,简单解释一下：所谓绘制，就是视觉上可以看到就行（预览状态），导出呢，就是将看到的转换成图片（或者Canvas），以便于后续处理。,这里总结了 3 ...
聊聊CSS选择器，最后两种你可能都没见过
顾名思义，CSS选择器就是通过某些规则选中页面上的HTML元素，并且把样式应用到选中的元素上。,通用选择器就是选中所有元素，代码如下：意思就是选中页面上所有元素，并且把它们的文字都设置为红色。,,ID...
浅谈逻辑选择器 Is、Where、Not、Has
在 CSS 选择器家族中，新增这样一类比较新的选择器 -- 逻辑选择器，目前共有 4 名成员：,本文将带领大家了解、深入它们。做到学以致用，写出更现代化的选择器。,:is() CSS伪类函数将选择器列...
24个关于设备视窗口的 CSS 单位
,过去CSS 有 4 个你必须知道的识别视窗口的单位，并且它们能够很好地处理每个可以想象的用例。然而，随着时间的推移和时代的变化，这 4 种视口单位现在不足以解决所有用例。于是，CSS 提供了 20 ...
2022 最受欢迎的 CSS 变量、属性、函数以及颜色分别是什么
,自定义属性（也称为CSS变量）的使用量大增，2021年和2022年之间的增长也不例外。43%的页面，包括桌面和移动端，都在使用自定义属性，并且至少有一个var()函数。,,正如去年所看到的，Word...