现代 CSS

被大家遗忘的 hr 标签元素

我们在 UI 还原的过程中,难免会碰到水平或垂直方向的分隔线。在现代 Web 的开发中,大部分前端开发者首先的方案是使用非 <hr> 标签元素,通过 CSS 或 SVG 来制作分隔线,即使在使用 React 或 Vue 构建 Separator (或 Divier)组件,也是采用非 <hr> 标签。可以说,时至今日,<hr> 标签元素已被大部分开发者给遗忘了。既然如此,为什么我要用一篇文章的篇幅来聊 <hr> 元素呢?这主要是出于 Web 的可读性(无障碍)出发点。希望阅读文这篇文章之后,你会有一个更好的选择。

CSS Houdini自定义属性@property给动效带来的扩展

Web中制作动效姿势有很多种,比如说纯CSS制作动效,JavaScript制作动效等。但话又说回来,如果你使用CSS来制作动效的时候会有不少的限制,虽然说CSS自定义属性的到来给CSS制作动效带来不少的变化,但还是有一定的缺陷在这里面。不过,CSS Houdini的到来,不说其自身的Animation API,就说他的自定义属性的出现,就可以帮助我们弥补CSS开发动效带来的缺陷和限制。换句话说,CSS Houdini的自定义属性 @property 可以扩展CSS的动效,也可以帮助我们提高CSS开发动效的能力。这篇文章,主要就是和大家一起来探讨,CSS Houdini的自定义属性是如何扩展动效开发的能力。

仅使用CSS提高页面渲染速度

用户在访问一个Web网站(页面)或应用时,总是希望它的加载速度快,功能流畅。如果过于慢,用户就很有可能失去耐心而离开你的Web网站或应用。作为开发人员,给自己应用提供更快的访问速度,提供很好的用户体验是必备的基础技能,而且Web开发者在开发中也可以做很多事情来改善用户体验。那我们今天就来和大家聊聊,在CSS方面有哪些技巧可以帮助我们来提高Web页面的渲染速度。

纯CSS实现随机效果

最近在Codepen上看到了@Adir写的随机翻牌找蛋蛋(可以想象是砸金蛋)效果,让我再次刷新了对CSS的认知。看到这两个效果之后我才知道,在CSS中除了可以实现 动态计算逻辑运算状态切换 之外,也可以使用纯CSS实现随机效果。你是否和我一样,听到纯CSS实现随机效果有点不可思议,但这是事实,在CSS中,我们可以借助CSS动画的能力来模拟部分随机效果。如果你也想了解CSS如何实现随机效果的话,那阅读这篇文章你将知道其中的原委。

Flexbox布局中不为人知的细节

Flexbox布局 已是目前最为流行的Web布局方式之一,它给Web开发者在完成页面或组件的UI布局带来了极大的灵活性和便利性。但也是因为它有极大的灵活性,里面隐藏了一些不为人知的细节,如果不是对Flexbox极为熟悉或者对其规范极为了解的话,其中有很多细节将会被遗漏,而这些细节又会让你在使用的感到困惑,甚至是带来一定的麻烦。这次在优化imgcook的Flexbox布局时,重新阅读了一次Flexbox的规范,发现自己曾忽略了部分重要信息。为此在这篇文章中,将Flexbox布局CSS的书写模式逻辑属性,对齐方式结合在一起整理了一篇笔记,希望对于想了解或使用Flexbox碰到痛楚的同学有所帮助。

在CSS自定义属性中有效使用无效变量

CSS自定义属性已是CSS中非常成熟的特性了,也是近两年非常受欢迎的特性。它的到来让CSS像其他编程语言一样,可以在编写CSS的时候变量,而且还可以在CSS具备动态计算逻辑运算状态切换等特性。特别是CSS Houdini的CSS自定义属性更进一步的扩展了CSS的能力。就我个人而言,在几年前CSS自定义属性就进入我的世界,而且相关的规范也阅读过好几次。但自从阅读了@Lea Verou的《The -​-var: ; hack to toggle multiple values with one custom property》一文之后,我才发现自己遗漏了CSS自定义属性中一个非常关键,而且非常强大的特性。那就是CSS自定义属性中的无效变量,即var()函数中使用了一个无效的变量。如果我们在使用CSS自定义属性的时候,要是有效的使用了无效变量,它可以帮助我们实现一些非常有意思的功能。比如说状态切换,主题切换等。在接下来,我们就一起来探讨这方面的话题。

CSS中的动态计算

自从CSS的calc()函数得到浏览器的支持起,在CSS中就可以做一些简单的数学运算。如果你阅读过 图解CSS系列 中的 《CSS函数》一文的话,你会发现现在或将来有更多的函数可以直接帮助我们在CSS做一些计算,比如颜色计算、三角函数的计算等。尤其是CSS的min()max()clamp()以及CSS Grid布局模块中的minmax()出现之后网页布局带来了革命性的变化。除此之外,在一些特定的环境之下,还有一些其他的CSS函数可以帮助我们做一些动态计数和计算。今天在这篇文章中就来和大家聊聊这方面的话题。

使用Framer Motion初体验

一直以来我都热衷于使用CSS来制作动效,特别是随着CSS Houdini的到来,能更轻易的帮助我们实现一些优秀的动画效果。但不管怎么样,她在制作动效,特别是创建引人注目的动画有时也非常的棘手。即使你对CSS制作动效非常的了解,但很难避免制作动效带来的高开发成本,也因此,开始探讨Lottie Web来快速帮助我们还原Web动画效果,提高效率,提升效果。不过是哪一种,都需要开发者对其有较深的了解,才能在开发动效的时候不会感到棘手。特别是在一些框架开发体系下(比如React)开发动效,更令大家感到困惑,不过幸运的是,Framer 为大家带来一个开源的React动画库,即 Framer Motion

开发者基于Framer Motion可以制作出漂亮的动效,而且开发过程非常简单,甚至可以说是傻瓜式开发。这是因为Framer Motion为开发者提供了可用于开发动效的API。这些API都是声明式的,通过props来驱动的。在这篇文章中,我们将仔细看看如何使用Framer Motion帮助我们快速地创建令人敬畏的动效。如果你也对此感兴趣的话,请继续往下阅读。

Lottie Web动效基本原理

前段时间在《Lottie Web动效在React中的构建》一文中和大家聊了如何通过lottie-web将AE导出来的JSON文件自动生成动效。在该文中,聊的主要是设计软件Figma、Sketch和AE软件之间如何通过相关的插件完成设计资源的互通,并从AE导出动效相关的JSON文件。这些都是最基本的操作链路,但在使用lottie-web还有相应的API可用来控制Lottie动效。今天这篇文章我们主要来聊聊Lottie Web动效的基本原理。

使用CSS构建Glassmorphism UI效果

最近看了一些设计相关的教程,看到几个有关于设计效果相关的专业术语,比如微软的 Fluent设计系统 中的亚克力效果(Acrylic Material),Mac OS的磨砂玻璃效果(Frosted Glass)。另外,记得去年 @Michal Malewicz的《Neumorphism in user interfaces》一文掀起了围绕“Neumorphism”设计风格的讨论,当时一度认为该设计风格将会是2020年的设计趋势,事实上去年并没有以这种设计风格为主流,而且很多人认为“Neumorphism”的UI风格是一种可怕的设计风格。不过,最近在Codepen上看到另一种设计风格,这种风格同样是@Michal Malewicz 提出来,并称之为“ 玻璃变形(Glassmorphism) ” 的UI风格,这种风格已在一些产品中出现,比如三星的一些广告和MKBHD的介绍视频。在设计圈很多设计师提出“玻璃变形(Glassmorphism)”设计风格运用得当,可以起到引人注目的效果。

页面

返回顶部