Airen的博客

理解animation-fill-mode属性

我相信很多前端开发人员都有基于CSS @keyframes创建动画的经历。甚至其中有很多人创建了一些很复杂的动效和去实验这个特性。如果你想要全面了解这篇文章将要介绍的内容,建议你花点时间阅读我2011年在Smashing Magazine介绍的一个主题,这篇文章也是非常不错的。不过,在今天这篇文章中,我并不想介绍有关于CSS动画中所有的属性,我只想专注于CSS动画中的一个属性:animation-fill-mode属性。这个动画属性对动画影响并不很明显。例如没有人会对CSS动画中animation-nameanimation-duration等属性感到困惑。但对于animation-fill-mode呢?我们接下来通过一些简单的示例来阐述。

你真的了解background-position

background属性是CSS中最常见的属性之一,它是一个简写属性,其包含background-colorbackground-imagebackground-repeatbackground-attachmentbackground-positionbackground-clipbackground-originbackground-size。你可能会说,这些属性再简单不过了,没有可讲的。这篇文章接下来要介绍的不是所有有关于background里面的属性,而是说说background-position属性。在详细介绍background-position之前,先要问大家,你真的了解这个属性吗?言外之意,接下来介绍是你所不了解的background-position相关细节。

通过漫画阐述CSS网格布局

CSS网格布局非常擅长在线制作漫画,特别是你想要灵活的实现你想要的漫画风格。这篇文章中我们通过使用巴里猫(Barry the cat)来演示如何构建一个具有响应式的漫画效果。

【转载】CSS技巧-rgba函数的妙用

新出现的 CSS 颜色配置函数是一项非常有意思的功能,它给予我们在浏览器中直接操纵颜色的能力。例如,当鼠标悬停在按钮上时,可以使用color: color(black darkness(50%))改变颜色,而不需要使用 Sass 这类 CSS 预处理器。

如何精确控制响应式排版

2014年@Jason Pamental写了一篇博客详细介绍了Web排版的缩放。@Richard Rutter另一篇文章中介绍如何更好的表达你的排版。比如在一个Banner区,如何让文本显示的各为大气,又适合你的Web排版。

如何在限宽的容器中实现全屏效果

在Web布局中,特别是在PC端中,常常可以看到这样的设计风格:内容居中,然后Banner区全屏。这也就是标题所说的效果,限宽的容器中实现全屏效果。那么问题来了,在实际中如何实现在限宽的容器中实现全屏效果。那么实际开发中以什么方式来做更为方便灵活呢?这就是这篇文章需要介绍的内容。

初探box-decoration-break

box-decoration-break属性是CSS片段模块(CSS Fragmentation Module Level 3)中的一个属性。主要用来指定backgroundpaddingborderborder-imagebox-shadowclip在行内元素中如何使用。行内元素的盒模型是打断的,也就是内联盒子是多行的情况之下。

CSS Grid布局未来的特性

CSS Grid布局规范现在处于候选人推荐状态。这种状态也意味着规范已完成。现在在讨论的是一些实现细节,而不是新功能。规范一些细节是有必要的,以便于浏览器能更好的实现。这对于我们开发人员也是有好处,也使开会更容易。然而这并不意味着停止了工作,而新的用例和特性不能提出Grid布局的未来功能。因此,在这篇文章中我将看看我认为网格布局未来还能做些什么。我喜欢这样去思考,不只是考虑CSS Grid,还可以考虑任何CSS规范。考虑如何更好的适应你的用例。

Web布局新系统:CSS Grid,Flexbox和Box Alignment

Web布局非常困难。它如此困难的原因是自从使用CSS来完成Web布局开始就并没有真正的完成复杂的Web布局。虽然我们使用很多技术手段能实现Web的固定布局,但是这些方法在响应式设计中又出现很多局限性与不足。不过值得庆幸的是,我们有了Flexbox模块,或许还有很多读者已经开始使用CSS Grid和Box Alignment模块做Web布局。在这篇文章中,我将解释如何将这些组合在一起使用,你会发现通过对Flexbox的理解,你也能更好的理解Grid布局。

【转载】原生CSS网格布局学习笔记

以下是来自Oliver Williams的帖子。 Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权。在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习之路。我比较赞同他的想法,就是学习一门新技术的时候,把它们拆分成比较小的单元块并配上实例,一步一步的学习。这比直接学习网格布局的所有东西要好太多了。

页面

返回顶部