博客

图解CSS:CSS阴影

在现代 Web 中,阴影已经成为主要设计要素之一,甚至是随处可见。 阴影增加了质感、透视、并强调物体的尺寸。在 Web 设计中,使用光和影子可以增加物理上的真实感,并且可以用来制作丰富的、可触摸的 UI 界面。从 CSS 技术角度来说,在 Web 中给 UI 添加阴影效果有多种不同的技术方案,但从实现阴影效果的 CSS 属性来说,常见的主要有 text-shadow(文本阴影)、box-shadow(盒子阴影)和 filterdrop-shadow()(不规则阴影)。今天,我们就一起来聊聊 CSS 这方面的特性。

2022 年的 CSS

虽然近些年 CSS 变化很快,但我认为 2021 年是 CSS 的元年。在即将过去的 2021 年,CSS 变化非常地大,其中新增了很多特性,比如 CSS 容器查询CSS 父选择器CSS 层叠控制规则CSS 子网格等等。而且这些特性已经在个别,甚至是在大部分主流浏览器已经可以看到了。几大主流浏览器(Chrome、Firefox、Safari和Edge)还专注于修复浏览器兼容性痛点,让 Web 开发者的工作变得更轻松。 ​

CSS 选择器:is() 和 :where() 与 :has() 有什么功能

对于 CSSer 而言,CSS 选择器是 CSS 领域最基础不过的知识了,他虽基础,但在给元素设置样式,选择器是不可或缺的。正所谓,“众里寻他千百度,蓦然回首,那人却在灯火阑珊处”!在 Web 开发中,我们需要通过选择器的能力,在众人中找到想找到的人。话又说回来,选择器虽然简单,但它却很重要,就从 W3C 规范中有关于选择器版本的迭代中也能说明这一点(现在已经是 Level 4 版本了)。事实上,早在2018年年底我就在《初探CSS 选择器Level 4》一文中和大家一起探讨了在选择器 Level 4 中新增的选择器。

CSS 中的条件圆角技巧

CSS 的 border-radius 技术已经是非常成熟的技术了,在现代 Web 开发的过程中,实现圆角的效果都是使用 border-radius 来实现。使用 border-radius 来给一个盒子添加圆角效果已经是最为常见,最简单的技术了,但前段时间在 Twitter 上看到 @Ahmad Shadeed 发的一条推特信息说:“Facebook 应用在border-radius上使用了 CSS 的比较函数(比如 min()max())来实现按条件给元素设置圆角效果”。这一说法并得到了 Facebook 的工程师 @Frank Yan的确认。Facebook 的工程师使用了一种被称为 “Fab Four” 技术,可以让圆角根据一定的条件来设置不同的值。不知道你是否对该技术感到好奇呢?CSS 是如何有条件地将border-radius设置不同的值。如果您感兴趣的话,请继续往下阅读。

响应式图片使用指南(Part4)

前面我们花了较多的篇幅围绕着 HTML 的 <img> <picture> 元素是如何构建响应式图片。在 <img> 标签元素上可以使用 srcsetsizes 属性大不同环境下提供不同尺寸的图片;在 <picture> 中使用 <source> ,并且结合mediasrcsetsizestype等属性可以为用户提供不同图片(环境不同提供不同的图片)和不同类型图片(type指定图片类型)等。但在 Web 开发中,很多时候还会使用背景图片(background-image)、边框图片(border-image)和蒙板图片(mask-image)等。我们接下来围绕着 CSS 中的背景图片(background-image)来展开,换句话说,在background-image中是否也可以像 <img><picture> 一样,根据用户环境来提供不同的图片。

响应式图片使用指南(Part3)

这是有关于响应式图片使用的第三部分,在第一部分中主要和大家一起聊了些和响应式布局相关的概念和术语;第二部分主要和大家聊的是<img>新增属性srcsetsizes如何让我们根据用户代理环境加载不同尺寸的图片。而今天将和大家一起探讨 HTML5中的<picture>元素又是如何帮助我们根据用户代理的环境加载不同的图片。如果你对这方面感兴趣的话,请继续往下阅读。

2022年不能再错过 CSS 网格布局了

时至今日,可用于现代 Web 布局的特性非常的多,可能大家最为熟知的还是 Flexbox,都觉得 Flexbox 布局可以一把梭。虽然说 Flexbox 布局已非常强大了,但他始终还是一维布局,对于一些二维布局的场景,他还是有很大的极限性。这也从侧面说明现代Web布局中或未来的布局方案中还是离不开 CSS Grid,毕竟到目前为止,他是唯一一个支持二维布局的技术。在 2021 年我花了几个月的时间,涉及到 CSS Grid 的都理了个遍,通过二十多篇文章来阐述 CSS Grid。可以说,这个系列算得上是全网较为系统介绍 CSS Grid 的了。如果我还未接触过,或对 CSS Grid 有一定的恐惧,那么这个系列值得你花时间阅读。

使用 CSS 自定义属性构建一个色彩方案

最近在团队内搞Design Token 输出 CSS 或 JavaScript 变量的一些事情,希望使用 Design Tokens 来描述一个组件的可变参数,从而基于一个 UI 设计能动态输出多个 UI 效果。为此从颜色系统这一块着手,希望使用 Design Token 和 CSS 变量能构建一个具有可访问性的颜色系统。在这篇文章中想和大家一起聊聊这方面的话题,希望大家感兴趣。

容器查询给设计带来的变化

前段时间我们花了几篇篇幅的内容来介绍 CSS 容器查询特性的使用,并且介绍了现代 Web 布局技术让我们离 CSS 容器查询更近一步,但这些内容都只是和大家聊的是如何使用,以及其对 Web 开发者带来的变化。在介绍 CSS 容器查询特性的时候,也提到过,CSS 容器查询特性除了给 Web 开发者带来变化的同时也给 Web 设计者带来变化。那么,今天我们来和大家一起聊聊 CSS 容器查询给设计将带来什么样的变化。感兴趣的同学,请继续往下阅读。

现代Web技术让我们离容器查询更近一步

十年前的 CSS 媒体查询 特性给 Web设计和开发带来新的变革,十年后的今天,CSS的容器查询 给 Web 设计和开发又进一步的带来质的变革。虽然CSS容器查询特性很强大,但它还只是部分主流浏览器的实验属性。因此要用到生产中还有要能要走一段漫长的路。不过,庆幸的是,现代的一些 Web 技术(比如,FlexboxGrid媒体查询比较函数等)让我们离容器查询特性更近一步。今天我们来看看,这些现代Web技术是如何让我们离容器查询更近一步。

页面

返回顶部