CSS3

聊聊CSS Shapes规范的下一个版本

在前面的教程中,看到了怎么创建CSS Shapes,即在元素定认一个规则图形。里面都是些基础的知识,比如说创建一个圆,然后多行文本围绕这个圆。在这篇文章中,我们将探索一些更复杂的图形,让你的布局不在局限于四四方方的图形中。

CSS制作首字下沉

在杂志排版中,常常能看到首字下沉的效果。在Web的排版中,也常常能看到上图这样的效果。并且常常看到的是首段首字下沉。那么今天这篇文章咱们来聊聊如何使用CSS实现首字下沉效果。早期中,实现首字下沉都是能过伪元素::first-letter来实现。不过值得庆幸的是,在CSS Inline Layout Module Level 3提供了一个新的思路和方案:采用initial-letter

理解animation-fill-mode属性

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

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网格布局学习之路。我比较赞同他的想法,就是学习一门新技术的时候,把它们拆分成比较小的单元块并配上实例,一步一步的学习。这比直接学习网格布局的所有东西要好太多了。

前端的学习

思考许久才动笔写这篇文章。那么问题来了?为什么要写这篇文章呢?其实有一定的原因。自从录制前端视频上线之后,也有一些同学问我类似的问题,而且也有同学问,应不应该购买视频,或者说参加线下前端培训班,或者说还是自己自学等等。那么今天来聊聊这些个话题。

如何在Web中使用CSS Shapes

布局一般都是遵循按行和列等线性原则,Web网站的布局到今天为止很大程度上受到这些原则的影响。虽然CSS Grid的出现让布局变得更好,更灵活,但相对于印刷媒体而言,Web布局总体上还是受到很好的限制,特别是内容流上。杂志和报纸一直有很好的办法来安排内容。比如文本绕着非矩形排列。

CSS变量创建网格系统

今天要聊的网格系统不是CSS Grid Layout,而要聊的是类似960gs。到止前为止类似于960gs的网格系统成熟的系统有很多套了。

深入学习CSS自定义属性(CSS变量)

我本来觉得应该从介绍CSS中引入变量的用途开始讲起,但事实上,很多流行的CSS预处理/后处理程序已经做了很好的诠释。当然,手动地去搜索或者查找/替换依然能满足你的需求,但这就像是不在JS中使用变量一样--很痛苦。事实上,CSS变量的动态性和作用域能够为你的实践和应用提供更加强大的能力--你可以非常高效的读取、设置和更新这些变量!同时,就像Webkit的小伙伴们在审查工具中做的那样,你也可以避免在你的代码中出现重复的代码片段(冗余)。

页面

返回顶部