标签: css

一个 Div 能做的事情

一个 Div 能做的事情

通过 一个 Div 用 CSS 作画

基于时间的 CSS 动画

基于时间的 CSS 动画

在着色器程序和其他各种程序中,使用时间来制作动画非常常见。CSS 无法像 JavaScript 那样启动计时器,但现在可以通过 CSS Houdini API 定义一个自定义变量,以毫秒为单位跟踪时间。

【外评】请帮助我们实现 CSS grid 布局 Level 3,又称“砌体 Masonry”布局

【外评】请帮助我们实现 CSS grid 布局 Level 3,又称“砌体 Masonry”布局

我们所说的 “Masonry布局 “是什么意思?基本上就是下图中的模式–内容像砖块或石墙一样堆积在一起。这就是 “Masonry “名称的由来。它也经常被称为 “瀑布式布局”,比喻内容像瀑布一样从页面上流下。

最漂亮的 CSS 动画背景示例及源代码

最漂亮的 CSS 动画背景示例及源代码

CSS 动画背景不仅仅是华而不实的技巧。它们是网站心脏的律动,是隐藏在一行行代码中的创意低语。

CSS Grid 网格布局中新引入的 Fr 单位用法教程

CSS Grid 网格布局中新引入的 Fr 单位用法教程

CSS grid 网格布局模块附带了一个新的 CSS 单位,名为 fr 。fr 是 “分数(fraction) “一词的缩写,简单明了。有了这个新单尾,我们就可以快速将网格按比例分割成不同的列或行

60+ CSS 搜索框代码 codepen 示例

60+ CSS 搜索框代码 codepen 示例

探查 CSS 搜索框的编写的各种方法,探索各种代码示例,并在自己的项目中定制它们。

响应式图片

响应式图片

如果你要支持多分辨率显示,但希望每个人在屏幕上看到的图片的实际尺寸是相同的,你可以使用 srcset 结合 x 语法——一种更简单的语法——而不用 sizes,来让浏览器选择合适分辨率的图片。

CSS Grid Layout 网格布局用法

CSS Grid Layout 网格布局用法

CSS 网格布局模型(CSS Grid Layout Model)可以沿水平和垂直两条轴线创建和更新布局,同时影响元素的宽度和高度。

高清 CSS 颜色指南

高清 CSS 颜色指南

CSS Color 4 为 Web 提供了广色域色彩工具和功能:更多颜色、操作函数和更出色的渐变效果。

【译文】你应该在CSS样式里明确声明长宽比 aspect ratio

【译文】你应该在CSS样式里明确声明长宽比 aspect ratio

CSS 属性 aspect-ratio 为盒子规定了首选纵横比,这个纵横比可以用于计算 auto 尺寸以及其他布局函数。

将网页漂亮的打印到纸上的CSS

将网页漂亮的打印到纸上的CSS

将网页漂亮的打印到纸上的CSS

CSS 3D 云朵效果

CSS 3D 云朵效果

利用 CSS3 3D 变换和一些 Javascript 创建类似 3D 的云朵。

2024 如何编写 CSS

2024 如何编写 CSS

我们的工具必须帮助我们创造更好的用户体验。开发人员体验固然重要,但不能凌驾于用户体验之上。

CSS 选择器的一场革命,:has() 高级使用指南

CSS 选择器的一场革命,:has() 高级使用指南

CSS 选择器的一场革命,:has()高级使用指南

CSS 的持续悲剧:2023 年 CSS Day 的思考

CSS 的持续悲剧:2023 年 CSS Day 的思考

今年感觉情况完全相反。事实上,在休息期间,我听到有人抱怨现在 CSS 的特性太多了。

Chrome 105发布,带来:modal和:has ()伪类

Chrome 105发布,带来:modal和:has ()伪类

25个新特性

CSS Houdini:用浏览器引擎实现高级CSS效果

CSS Houdini:用浏览器引擎实现高级CSS效果

CSS的任何新特性从诞生到被浏览器普遍支持,要经历漫长的周期,而CSS Houdini开放了底层接口,让开发者直接接触、开发原生的CSS效果,实现更为复杂、流畅的效果和动画。

阅读 Skeleton.css 源码,改善睡眠质量(尽管它只有 419 行代码)

阅读 Skeleton.css 源码,改善睡眠质量(尽管它只有 419 行代码)

本文介绍点赞就等于学会了!如果本文对您有帮助,建议点赞收藏(点赞就等于学会了)Skeleton源码一共只有419行(加上注释和换行),非常适合用来学习。本文是根据我的学习过程来编写的,几乎每个章节都包

如何用一行 CSS 实现 10 种现代布局?

如何用一行 CSS 实现 10 种现代布局?

周日在家看 Web.dev 的 2020 三天 live,发现不少有意思的东西,其中有一项是关于 CSS 的,主播是 Una Kravets(chrome team 成员)。虽然我已经好几个月没有深入研究 CSS 的东西了,不过以前的底子还在。

趣图:论CSS的重要性

趣图:论CSS的重要性

CSS的重要性可见一斑

搞笑视频:background-repeat: repeat; 很形象的演示这个css作用

搞笑视频:background-repeat: repeat; 很形象的演示这个css作用

很形象的演示这个css作用

趣图:HTML and CSS

趣图:HTML and CSS

CSS的作用 《权利的游戏》剧照

Firefox 70 将引入“非活跃 CSS”,快速排查 CSS 属性

Firefox 70 将引入“非活跃 CSS”,快速排查 CSS 属性

在最新的 Firefox 70 Beta 版本中,引入了一项名为“Inactive CSS”(非活跃 CSS)的功能,DevTool 新工具将为开发者展示哪些 CSS 属性不会影响所选元素以及原因,这将大大节省开发者的时间。

CSS-in-JS 是恶魔还是天使?

CSS-in-JS 是恶魔还是天使?

有些人极为讨厌 CSS-in-JS,单单提起这个名字都会让他们反感,总之就是拒绝二字。他们认为样式不属于 JavaScript,而是属于 CSS,并且 CSS 有着很长的历史,浏览器支持非常完善。关注点必须分离,其他路子都走错了,我们要以史为鉴(比如标签等)。

为什么 CSS 这么难?

为什么 CSS 这么难?

归根到底,这个快餐时代,太多人选择被流量牵着鼻子走,丢掉了打磨好剧本和服道化的本心。浮躁的人太多,耐得住寂寞去打磨的人太少。