CSS Shapes

CSS中的基本图形和路径

在CSS中有些属性是允许CSS绘制图形形状,比如常见的是使用border或者box-shadow来绘制图形或者形状。除此之外,在CSS中还有类似circle()函数也可以绘制圆形。除此之外,在CSS中有一些形状是为CSS其它属性服务,比如clip-pathmask服务和在shape-outside让文本围绕形状排版。还有一些CSS属性使用像SVG中的图形做一些事情,比如offset-path中使用path()函数实现路径动画。而其中path()是一个非常棒的功能,可以绘制任何图形。在接下来的内容中,来介绍一下CSS中的基本图形和路径。希望对大家有所帮助。

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

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

如何在Web中使用CSS Shapes

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

CSS Shapes有哪些让人兴奋之处

我最近听了JEN Simmons在 Boagworld播客的关于CSS Shapes的采访,虽然我之前已经听说过CSS Shapes好久了,但是我还没有亲自尝试过。因为某些原因,这个采访强迫我坐下来好好看一下CSS Shapes的出色之处(好吧,很大一部分原因是我认为Jen Simmons太帅了,我已经收听她的The Web Ahead一年多了,真的太精彩了)。

理解CSS Shapes的引用框

CSS Shapes是用来定义内容环绕的路径,这些路径都是通过形状函数来定义,比如:circle()ellipse()inset()polygon(),他们都被定位在一个虚拟盒子(virtual box)中,也就是引用框(reference box)。引用框定义了形状的坐标系统,因此它影响了形状如何绘制和定位。他有四种引用框可供选择:margin-box, padding-box, border-boxcontent-box。每种引用框都会产生不同的结果。请继续往下阅读,了解他们是如何工作。

CSS Shapes:打破矩形设计的限制

HTML5和CSS3的功能完全超越5年前我们在web上所能做的事。CSS Shapes Module Level 1(CSS形状模块标准1)规范有可能打破web中矩形盒模型的限制而且将网页设计提升到新的高度。它允许元素设计成不同的形状(圆形或五边形的div),并且用更自然的方式让文字环绕着元素(文字可以环绕着你的曲线设计而不一定要有直角边界)。本文将通过一些小演示来检测CSS Shapes的可能性,并且帮助你开始探索之旅!

CSS Shapes 101

方块套方块:这是我们网页一直以来的样子。通过使用CSS,我们一直试图摆脱这种创建几何形状的限制,但这些形状没有影响形状内的内容,或者与页面其他元素相互影响。由Adobe在2012年中期提出的新的CSS shapes 规范 改变了这一现状。它的目标是为web设计人员提供一种新的方式,来使内容流入或者环绕在任意复杂的形状上——除了使用javascript,我们从来不曾做到这点。

使用CSS Shapes的Regions创建更好的阅读体验

使用CSS shape我们可以使内容“流向”非矩形区域。有时我们希望能够把内容填充到一个元素中的多个不同形状的区域内。如果你读过我之前的文章,您会知道,这可以用CSS形状,使用一个图像,这个图像用alpha透明度定义了多个形状,让浏览器提取内容并浮动到区域上。我们可以发挥创意定义形状,使文本流入多个区域,不过这样很容易地使内容几乎完全丧失可读性。

当CSSshape会造成一个严重的可访问性问题时,不推荐使用。我们乐于使用各种创造性的布局与自定义形状,但最应该让我们铭记的是,内容是可读的,所以设计师设计吸引人的布局时,必须考虑可访问性和可读性。

为了更好地说明这一点,我们看一个例子,这个例子中CSS shape会导致非常糟糕的阅读体验。事实上,这不是CSS shape造成的,这是设计师的决定。

返回顶部