CSS3

CSS秘密花园: 闪烁动画

您还记得<blink>标签吗?当然,你可能做过这样的事情。它在我们行业已成为一个历史,也成为一种方化的符号。但全世界的人都鄙视他,因为它违反了样式和结构的分离原则,但最主要的是原因是国灰在90年代末网页是过度的使用它,使用大家感到很痛苦(那时候的网页都有大量的<blink>制作的闪烁效果,闪得让你头晕)。甚至发明这个标签的人Montulli也给示:"发明<blink>标签是为互联网做过最糟糕的一件事情"。

CSS秘密花园: 逐帧动画

通常,我们需要一个动画效果是比较难的或者说使用CSS的transition是不可能实现的。例如,一个卡通移动或一个复杂的进度条。在这种情况下,基于图像的逐帧动画是完美的,但是实现这种效果是具有挑战性的。在这一点上,你可能会说:难道我们不能使用gif动画?很多情况下,答案是肯定的,gif动画是完美的。

CSS秘密花园: 灵活的过渡

灵活的过渡和动画效果(如bounce的过渡效果)一直是一个流行的效果,给人有一个更好的感觉——在现实生活中,物体从A位置移动到B位置,很少是不灵活的移动。这篇文章详细介绍介绍了有关于CSS3动画的制作细节,让Web的动画效果更佳灵活。

CSS秘密花园: Sticky footers

在网页设计中,Sticky footers设计是最古老和最常见的效果之一,大多数人都曾经经历过。它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部;如果内容足够长时,页脚块会被内容向下推送。这种效果不仅是无处不在,很受欢迎,而且实现起来看上去也非常容易。但实际上实现起来要比预期花的时间更多。此外,在CSS2.1中的解决方案中几乎都要给页脚设置一个固定高度。这是很脆弱的,很少是可行的。实际上实现这个效果过于复杂,而且还需要增加特定的标记和一些Hack手段。在CSS2.1中受到一些限制,但使用现代CSS,我们能把这个效果做得更好,那要如何做呢?

CSS秘密花园: 垂直居中

让一个元素水平居中对于CSS来说非常简单:如果是一个内联元素,我们可以在他的父元素上设置text-align:center;;如果是一个块元素,我们可以使用margin:auto;。然而,只要一想到让一个元素垂直居中,让人死的心都有了。多年来,垂直居中已成为CSS的不朽神话,也是伟德19463331专业人士群体中的一个内部笑话。

CSS秘密花园: 流体背景,固定内容

在过去的几年中,有种网页设计趋热是越来越受欢迎:这就是我所说的“自适应的背景,固定宽度的内容”。让我们思考一下这个例子中使用的margin:auto。这个margin的值等于视窗一半的宽度减去页面内容一半宽度值。因为视窗宽度我们不知道他具体有多大的值,所以他的一半宽度只能用百分比来计算(假设其祖先元素没有显式的设置宽度),在这个示例中,可以使用50% - 450px来表达。在CSS Values and Units Level 3定义了一个calc()函数,允许我们做一些简单的数学表达式运算。

CSS秘密花园: 相邻元素样式

在很多情况下,我们需要给元素的兄弟元素以不同的样式风格呈现。主要的用例是提高用户体验和在大屏幕中不断增加列表荐。以前也介绍过有关于Quantity Queries相关的技术,那么这篇文章再次通过实例阐述这方面的知识。

CSS秘密花园: 驾驭列表宽度

虽然我们很久以前就停止使用表格来布局,但在网页中还是占有一席之地,比如表格数据统计、电子邮件,列表清单等等。同时,我们使用display属性,可以让元素渲染的形式和表格相似。然而,有时候看起来很方便,但有很多内容是动态的,这让布局非常难以预测。

CSS秘密花园: 内容尺寸

大家都知道,如果不显式的给一个元素设置height值,它将会根据元素的内容自动调整。如果我们要想要给元素的宽度也有一个类似的行为呢?一个相对较新的规范 CSS Intrinsic & Extrinsic Sizing Module Level 3widthheight定义了一些新的关键词,其中一个非常有用的是min-content

Web Animation 制作指南

Web Animation (Web动画)在Web中的运用越来越广泛,但共制作(开发)并不是件易事。这里将主要总结一下有关于Web Animation制作相关的知识,以供给初次接触动画制作的同学有所帮助。

页面

返回顶部