Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. CSS
Webdesign

CSS形状进阶

by
Difficulty:IntermediateLength:ShortLanguages:

Chinese (Simplified) (中文(简体)) translation by Wentao Wang (王文涛) (you can also view the original English article)

在前一个教程中,我们了解了如何生成CSS形状,从此我们就可以定义一个元素的真正形状了。 我们接触了一些基础知识;生成一个圆,并让几行文字环绕于它。 现在,我们可以探索更复杂的形状了,让我们的页面布局更加丰富,让呆板的盒子更少一些。

生成一个多边形

除了圆和矩形之类的简单形状,我们也可以生成多边形:一种由多个边(一般至少有五个边)构成的形状,比如五边形和六边形。 要生成一个多边形,我们使用CSS的polygon()函数,它授受多个逗号分隔的值,它们定义了此形状的坐标:

在上面的代码中,我们添加了五对坐标,因此得到了一个五边形。 给这个函数再加一对坐标会得到六边形,再加一对得到七边形,然后是八边形,依此类推。

手动生成一个多边形没有圆或椭圆那么简单,特别是当多边形比较复杂且涉及到几十个坐标时尤其如此。 幸运的是,我们有一个好用的工具,可以让生成CSS形状过程更加直观。

使用CSS形状编辑器

CSS形状编辑器是一个Chrome扩展。 装上它宾,DevTools的Elements标签页下会多一个名为Shapes的标签,再下面有一些其它子标签(比如StylesComputer等)。

Shapes标签包含一个shape-outside属性和一个+号,以便我们添加CSS形状函数。 选择polygon(),以及页面上的元素,然后我们就可以开始在浏览器中绘制形状了,就像一个图形应用一样。

在我们画的同时,此浏览器扩展会根据正在绘制的形状坐标来更新多边形函数,并将它们添加到元素的内联属性中去。 完成之后,我们就可以将生成的代码复制拷贝到样式表中。

generated polygon coordinates
生成的多边形坐标

利用同样的技术,我们可以在网页中画出和应用任意形状,比如:

图来自于:如何用Adobe的Photoshop将剧本台词添加到雨中场景上

提取图片中的形状

Shape-outside属性中可利用的另一个值是url()函数;在CSS其它场合中我们用它来添加一个背景图片。 在此例中,url()函数让shape-outside属性基于图片来定义一个元素形状。

当你有一个复杂的图形,比如有许多曲线和拐角,你想让文字内容平滑地环绕在它周围,此时你可能会选择url()函数,而不是polygon()。 又或者,在用户生成的内容中定义形状比较难办时。

我们将使用来自于Unsplash的金刚鹦鹉。 首先,你需要生成一个带透明度的版本,比如:

the shape of our macaw
我们的金刚鹦鹉的形状

原始的parrot图像被作为背景图片加入到容器中:

透明度阈值

对于形状本身,我们将添加其到容器中的另一个元素上,这一次,我们要用另外一个称为shape-image-threshold的CSS形状属性。

这种特殊属性设置了定义图片形状时的最小透明度的阈值;它在01之间取值。 所以,如果你有稍微透明一点的图片,不妨将透明度设置为0.80.5。 我们将其设置为0,因为环绕在鹦鹉形状周围的区域是完全透明的。

结果应该如下图所示:

提供回退 (fallback)

浏览器对CSS形状的支持是最近才有的;所以不要对Firefox,Internet Explore或Edge期望太高。 另外,关于Stephen在前一个教程中所提的问题,我们可有几个选择。

“这很炫,但问题是:IE/FF的回退措施是什么? 对于很多用户来说,你在形状布局上的孤注一掷只会导致奇怪的结局。” -- Stephan Bateman

首先,我们可使用Modernizr。 Modernizr是用于浏览器功能测试的一个可靠的JavaScript库。 下载这个库时,确保你已经包括了CSS形状Add CSS类选项。 然后,如果CSS形状不被支持,你可以指定布局样式如下:

如果觉得加载Modernizr太麻烦,因为你只需要测试一下浏览器是不是启用了CSS,你可以加入以下JavaScript代码:

CSS中每个属性都对应一个JavaScript样式对象,于是我们可以通过JavaScript动态添加样式。 这个代码检测浏览器是否有shapeOutside方法,如果没有,则添加一个no-css-shape类,用于回退样式。

最后,我们可在样式表中使用CSS的@support语法,比如:

至于哪种方法最适合于你的项目,则完全取决于你。

总结

在本教程中,我们介绍了如何使用CSS形状的polygon()函数,学习了如何用一个Chrome扩展来更轻松地绘制多边形。 我们还学会了如何利用一张图片来帮助我们绘制形状:这对于非常复杂的形状尤其有用。 最后,尽管CSS形状本就应该得到浏览器支持,我们还谈到了对于浏览器不支持的情况下如何优雅地回退的方法。

演示

有用的链接

Envato qr branded
关注我们的公众号
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.