使用CSS Shapse创建非矩形布局

我把文章标题的”Exclusions”部分移除,因为CSS的形状和CSS的“Exclusions”是两个单独规范

这些天我们使用CSS的变形制造各种CSS形状,但所有这些形状不影响内容或让内容围绕他们。也就是说,如果你用CSS创建的三角形或梯形,例如,创建的形状没有影响文档流或是文本无法围绕它们。

通过在Web页面引入CSS形状,内容围绕自定义形状或印刷中的非矩形布局再现网页中,这或许都是大家期待的。

在本文中我们将复习基本的CSS形状,并使用这些新的CSS技术创建一些简单的布局。当更多的CSS形状的特性实现,我们就可以实现更多的复杂的,可怕的布局,现在我们可以通过一些实验创建一些很有趣很有创造力的布局。

这篇文章中讨论的是CSS的前沿技术,并不支持所有的浏览器。如果你想看到有这些效果,你需要确保你的浏览器支持这些技术。你不需要一个支持的浏览器来理解这些特性和演示。因为这里有一些演示的截图,这样你可以看到最终你想看到的效果。

在撰写本文的时候,只有Chrome Canary支持带有前缀的CSS形状,但仍需要通过chrome://flags/进行设置。确保你开启了CSS形状特性

你可以点击每个演示的截图来查看每个DEMO效果。

请注意,当更多的规范实现的时候,文中提到的信息可能改变当前支持的CSS形状。

##声明变形

所有HTML元素都有一个矩形的盒模形,用来管理文档流以及文档围绕在元素的四周。为了给一个元素自定义一个非矩形的形状,可以使用shape-insideshape-outside属性。在撰写这篇文章的时候,shape-outside属性只可以应用于浮动元素,而shape-outside属性不能完全支持,所以你现在使用的时候会发生一些错误。而且shape-*属性只能适用于块级元素。如果你想将变形属性必须将元素转换为块元素。

shape-*属性采有三个值中的一个:auto,一个基本的形状或一个图像的URL。如果将其值设置为auto,元素浮动区域使用正常的margin。(如果你不熟悉CSS盒模型,你必须得先阅读它,因为你得知道它是如何工作的)。

如果要给变形函数设置一个值,可以选择期中的一个值:rectangle,inset-rectangle,circle,ellipse或者polygon。通过Adobe团队的这篇文章你可以了解更多关于变形函数的功能。

最后,如果该值被设置为一个图像的URI,浏览器会基于图像的alpha通道提取和计算出形状。计算机计算形状的路径包含的图片指定的透明度大于shape-image-threshold值。如果没有指定shape-image-threshold的值,那么其默认值为0.5。图像应该是CORS-same-origin,否则,它不会工作,计算机计算形状的默认值为auto

如果使用shape-outside属性定义的形状不会围绕一个元素,而使用shape-inside属性定义的形状会围绕一个元素。我们将在下面的例子中了解每种方法的使用。

通过shape-*属性定义的变形可以通过shape-marginshape-padding属性来修改。变形的marginpadding都是不言而喻的。

##在元素上建立一个坐标系统

对于CSS形状实际应用在元素上,我们通过一个坐标他信息来绘制形状。

坐标系统是必要的,在坐标系统上,形状将被定义成一组点(通过半径画员或椭圆)和使用X,Y坐标定义坐标。

shape-*属性使用元素的内容盒子来定义他们的坐标系统,所以为了让他们工作,你需要给元素定义一个固定的宽度和高度,这也是用来给你绘制形状建立坐标系统。如果没有显式指定宽度和高度,shape-*属性不能正常工作。

坐标系统的原点定义在元素边框的左上角。

所以,要给一个元素绘制一个形状,必须要先做到:

- 为了使用形状,指定元素尺寸(记住:使用shape-outside元素是浮动在周边)
- 使用shpae-*属性决定元素的形状

##使用背景来自定义形状

虽然边界用于包装内联内容外的浮动可以定义形状,实际的盒模型模式并没有改变。如果元素有指定的marginpaddingborder,他们将根据CSS3盒模型进行计算和渲染。——W3C CSS Shapes Module Level 1

换句话说,使用shape-*属性定义元素形状仅影响元素的浮动区域,即这个元素内/外的流动的内容,但元素其他属性不受影响。

例如,假设你只想画一个圆形,喜欢的内容浮动在其侧,如下图所示,你必须首先声明元素的圆形形状(再一次,记住浮动元素,并给它一个高度和宽度)。然后,你给圆形应用一个背景颜色,看起来更像一个图像。

使用CSS Shapse创建非矩形布局

你会想只是给一个包含元素添加一个背景颜色,然后最终有上面的结果(这是我第一次做),但这样做不会做这项工作。原因是,元素的所有属性,除了围绕在外面的内容流,不会影响你的形状,而且们他们的内部定义将根据元素的盒模型(矩形)呈现,我们已经看到了规范。所以如果你定义一个背景颜色,你就会有下面这样的效果。

使用CSS Shapse创建非矩形布局

所以,我们能只给形状运用颜色而不是整个元素?这就需要CSS朦板规范clip-path属性帮忙。

这个clip-path属性将被运用元素的剪切部分,我们不需要和保持定义的内部形状那部分。这显然意味着我们实际上不应用有颜色的形状,我们只需要他们微调元素,只留下完整的形状。这样,你就会有一个浮罢的圆外面被文本包含。

究竟如何?clip-path属性的什么值可以做这些呢?

用户通过clip-path属性定义的图形来定义坐标系统确定剪切路径包围元素,所以shape-*属性具有相同的坐标系统。

正因为如此,我们在剪切路径上使用shape-*属性定义相同的形状,元素内容夹在形状的周围。我们最终会得到一个自定义形状与背景。

你可以在pen测试这个概念,只要确保你测试在浏览器能运行(目前只有Chrome Canary)。