现代 CSS

图解CSS

图解CSS:CSS背景(Part3)

前面已经花了两篇的篇幅(《CSS背景:Part1Part2》)介绍完了除background-size之外的所有background子属性的特性以及使用。众所周之,在Web中对于<img>引入的图片,我们可以显式使用widthheightaspect-ratioobject-fit等属性来调整图片尺寸,但对于背景图片,我们只能使用background-size来进行调整。那么background-size是如何决定背景图片尺寸的计算呢?如果你感兴趣的话,这篇文章可以告诉你很多不为人知的答案。

图解CSS: CSS 背景(Part2)

第一部分主要和大家一起探讨了 CSS background属性中的background-imagebackground-repeatbackground-attachment等属性。今天接着和大家一起来探讨其另外三个子属性,即 background-positionbackground-clipbackground-origin。感兴趣的同学请继续往下阅读!

图解CSS: CSS 背景(Part1)

背景(background)是 CSS 中最常见也是最基础的一个属性,它自 CSS 1.0 版本就开始有了。最早的时候我们可以通过 background 给一个元素盒子的背景层设置背景颜色(background-color)、背景图像(background-image)。如果是背景图像的话,还可以调整背景图像的位置(background-position)、设置背景图像的平铺方式(background-repeat)以及背景图像在背景层的依附模式(background-attachment)。不过,随着 CSS 技术不断向前发展,CSS 为开发者提供了一些新特性用来控制背景图像,比如背景图像的大小(background-size)、背景图像的剪切(background-clip)、背景图像的定位区域(background-origin)以及给同一个元素盒子设置多个背景。除此之外,CSS 还为 background 的一些老属性新增了功能,比如 background-position可以指定四个值,通过方向设置背景图像的位置,background-repeat 多了几种不同的平铺方式。另外,CSS 还可以使用 background-blend-mode 属性来设置不同的混合模式,从而改变背景图像的效果。

图解CSS:CSS溢出(Part2)

第一部分主要和大家聊了CSS溢出的概念和理论相关的,在第一部分主要以实例,问题排查和常见溢出问题三个部分展开。在构建 Web 页面或应用的时候,总是避免不了给容器设置一个具有约束性的尺寸,有的时候,因为容器没有足够的空间来容纳内容,从而造成内容溢出容器,严重的会打破 Web 布局,干扰页面的美观。为了让这些现象能不干扰 Web 布局,所以需要CSS溢出特性。除此之外,我们在构建一些Web组件和实现一些UI效果,也需要依赖CSS溢出特性。那么接下来,我们来看一些溢出相关的案例。

图解CSS:CSS溢出(Part1)

溢出是CSS中的另一个重要的概念。从 图解CSS系列 的《CSS 盒模型》和《元素尺寸的设置》中可以得知,Web上的内容都是放置在一个具有一定大小的盒子中。在某些情况下,盒子大小是有限制的,有可能内容会超出这些盒子,在 CSS 中,这种现象被称为 溢出。而且 W3C 的CSS工作小组专门为溢出划为一个独立的模块。在这一章中,将和大家一起探讨 CSS 溢出模块相关的话题。比如,什么是溢出?什么情况下会导致溢出?如何使用CSS来控制溢出等等。

图解CSS:CSS阴影

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

图解CSS:Grid布局案例之构建杂志报刊类布局

一直以来,在 Web 布局中都是以方方正正的矩形向用户展示 UI 效果,而且众多 Web 开发者的意识中也是如此,Web 的布局是无法打破矩形排列的限制!但 Web 技术的发展速度是惊人的,每天都有新的东西出现在我们的眼前。就在这短短的几年时间内,用于 Web 布局的新特特别的多。换句话说,如果今天设计师跟你说:“亲,整一个类似杂志或报刊类的布局吧”!你会爽快的说 OK! 即,使用现在的新特性可以打破矩形框的限制,让你在 Web 上实现像杂志一样的排版布局。

图解CSS:Grid布局案例之构建交叉布局

前两个有关于 CSS Grid 案例,主要介绍了如何使用 CSS Grid 来构建 重叠布局Full-Bleed 布局。今天我们来一起再来看另一个由 CSS Grid 构建的网格布局,即 交叉布局。通过这个案例来更好的帮助我们更进一步理解 CSS Grid 的相关属性在实际中(Web 布局)如何使用。

图解CSS:Grid布局案例之构建 Full-Bleed 布局

Full-Bleed 是印刷界中的一个概念,被称为 全出血,即在印刷中,我们有出血量,这是纸张被修剪的地方以外的区域。正因如此,印刷设计师习惯于在设计工作中考虑出血量。我们通过设置安全区域来做到这一点。这几年,这种被称为“全出血”的概念也运用到 Web 的布局中。就是在受限宽度的一列中使用全宽元素的布局,比如在较窄的一列文本中使用一个边缘到边缘的图像。在社区中,也有人把这种布局效果称为 Full-Width 布局,也有人称为 Edge-To-Edge 布局。说实话,在Web中实现这种布局效果,已不是难事,社区中有很多种不同的技术方案,都可以达到这个布局效果。不过,今天我们以不同的角度来思考这个问题!

图解CSS:Grid布局案例之构建重叠布局

如果一直是跟着 CSS Grid 布局这个系列到这里,你应该还记得,在 CSS Grid 布局中,我们可以通过网格项目放置的方式,让不同的元素重叠在一起,并且通过 CSS 的 z-index 来控制网格项目在 z 轴上的层叠顺序。也就是说,以往需要使用 CSS 的 position 的绝对定位(absolute)来实现的布局,现在可以直接使用 CSS Grid 来解决。在这一节,我们主要来看如何使用 CSS Grid 实现元素叠加的布局效果。

页面

返回顶部