图解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 实现元素叠加的布局效果。

图解CSS: Grid布局(Part19)

CSS Grid 模块的出现以及浏览器对其支持,为 Web 布局提供了前所未有的可能性。我们可以用更少的元素(更简洁的 HTML 结构)构建更复杂的设计。这比我们一直认为非常强大的 Flexbox 要更强很多。但是,当你想到 CSS Grid 时,你一般会想到是我们平时习以为常的方块布局,对吗?@Andy Barefoot他的个人网站Codepen 上提供了很多有创意的响应式布局效果,让你会对 Web 布局有一种焕然一新的感觉,感觉与你的经典 Web 设计(规规矩矩方块布局),而且他使用了 CSS Grid 布局来做到这一点。

图解CSS: Grid布局(Part17)

自从多列布局、Flexbox布局和Grid布局得到浏览器支持之后,就可以使用这些特性来实现 瀑布流的布局 ,但这些技术实现的瀑布流布局都或多或少存有一定的缺陷。不过,值得庆幸的是,CSS 网格布局的第3级(CSS Grid Layout Module Level 3) 将真正的瀑布流布局纳入了 W3C 规范中,称得上真正的瀑布流布局。不过遗憾的是,支持该规范草案的主流浏览器并不多,只有Firefox 和 Firefox Nightly。虽然这个功能还不能用于实际生产中,但你的试用以及使用之后的反馈是很有价值的,这有助于确保它满足你对这种布局的要求。

图解CSS: Grid布局(Part16)

subgrid 进入 CSS Grid 布局模块的 Level 2 规范之前,嵌套网格、subgriddisplay: contents 就有深度的讨论,最终 subgrid 得到更多的支持,也最终成为规范中的一部分。也就是说,嵌套网格 和 display: contents 都可以实现类似 subgrid 的布局。那这一节中,和大家来探讨 display: contentssubgrid 有何差异?

图解CSS: Grid布局(Part15)

当 CSS Grid 布局在 2017 年最初发布时,设计师和开发人员为二维布局和优化布局系统而设计时感到非常兴奋。 通过前面的学习,我们也领略到了网格布局的魅力,CSS 网格让我们可以轻松地做许多以前做不到的事情。其中一个较大的限制是,嵌套的网格不能参与其父网格的大小调整。这也是一个从一开始就被认为很重要的功能,然而,由于其复杂性,一度曾被废弃的子网格被推迟到 CSS Grid布局模块的 Level 2 中。一段时间以来,关于subgrid的使用情况、如何实现它的问题有很多讨论,甚至还有一些关于是否需要它的辩论。很多讨论都是围绕着另外两种可以处理许多与subgrid相同问题的方法:嵌套网格display: contents。接下来,我们将花一些篇幅来阐述嵌套网格和subgrid,即我们将了解哪些是相似的,哪些是subgrid与嵌套网格区别?以及阐述在一些非常有效的情况下,子网格是真正需要的,而在另一些情况下,它并不是严格需要的,但会带来一个更简洁的解决方案。那我们先从嵌套网格开始。

图解CSS:奇妙的CSS计数器世界(Part3)

奇妙的CSS计数器世界主要分为三个部分,在第一部分中介绍了 list-style 的基本使用之外,主要是向大家阐述了如何使用 @counter-style 实现自定义的列表项标记符(list-style-type);在第二部分中介绍列表标记框,即伪元素 ::marker的使用以及可用于::marker上的CSS属性。至此,我们可以在::marker::before::after三个伪元素上的content生成内容,来构建更具个性化的列表项标记符。虽然如此,要实现具有计数(或者说编号)的列表项符号样式,还是需要CSS的计数器来助力,即counter-resetcounter-incrementcounter()counters()函数。在接下来的内容,主要围绕着这几个属性展开。感兴趣的请继续往下阅读。

页面

返回顶部