会员专栏

图解CSS:CSS阴影

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

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>元素又是如何帮助我们根据用户代理的环境加载不同的图片。如果你对这方面感兴趣的话,请继续往下阅读。

使用 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技术是如何让我们离容器查询更近一步。

容器查询中的 container 和 @container

从《初探CSS容器查询》一文中我们知道了容器查询是是什么以及它的作用。使用 contain来创建一个包含上下文,同时使用 @container 规则,可以在符合条件下为查询容器的后代单独指定样式规则。简单地说,可以使用 CSS 容器查询,让同一个组件根据其容器的不同尺寸向用户呈现不同的UI效果。该特性目前是 CSS Containment Level 3 中的一个特性,这个功能模块中除了 contain@container 之外,还新增了一个容器属性 container,也可以使用 container@container 结合实现容器查询效果。在这篇文章中,我们就来看看 container@container 是如何工作的,它们可能会有哪些功能!感兴趣的同学,请继续往下阅读!

初探CSS容器查询

CSS的原生嵌套、作用域(@scope)、级联层(@layer和容器查询(@container)被称为 下一代 CSS,并且在整个社区得到热议。比如,刚举办的 W3C TPAC 会议就专门有一个这方面的话题。尤其是容器查询(@container),更令人兴奋。从基于页面的响应式设计到基于容器的响应式设计的转变,将对Web设计生态系统的发展产生巨大的影响。因为,容器查询将使单个元素有可能根据局部的环境进行调整,而不是依赖整个视窗的尺寸。从今天开始,我将和大家一起进入容器查询的世界,和大家一起了解为什么需要容器查询,它们将来何使Web设计和开发变得更轻松,最重要的是,容器查询将现更强大的组件和布局,尤其是响应式的布局。

页面

返回顶部