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

编辑推荐:诚征广告商金主入驻此广告位置,如有感兴趣的金主,欢迎邮件至:airenliao@gmail.com咨询相关合作事宜!!!(^_^)

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

创建多边形

除了可以创建圆和矩形之外,还可以创建多边形,多边形一般有多个边(五个或五个以上)组成,比如五边形或六边形。在CSS中可以使用polygon()函数来创建,可以在里面传多个坐标值,每个坐标值之间用逗号隔开:

.shape {
   float: left;
   background-size: contain;
   background-repeat: no-repeat;
   margin: 30px;
   width: 265px;
   height: 265px;
   shape-margin: 20px;
}
.pentagon {
   background-image: url('../img/pentagon.svg');
   shape-outside: polygon(32px 126px, 163px 32px, 293px 127px, 244px 282px, 82px 281px);
}

上面的代码,我们添加了五个坐标点,从而生成了一个五边形。可以在这个基础上添加一个或更多个坐标点,从而可以生成六边形、七边形或八边形等。

手动创建一个多边形并不像创建圆或椭圆那么简单,特别是对于一个复杂的多边形的话,它会涉及到几十个坐标。不过值得庆幸的是,有一个工具,可以使你创建多边形变得更为直观。

使用CSS Shapes编辑器

CSS Shapes Editor是Chrome浏览器的一个扩展插件。一旦你安装成功了的话,在Chrome开发者工具条中会增加一个名叫Shapes的功能选项,可以直接通过个编辑器工具帮助你编辑一个复杂的多边形:

CSS Shapes Editor

Shapes选项卡包含一个shape-outside属性,以及配置了一个+标志,表示可以添加CSS Shapes对应的函数。我们选择polygon()和页面上的元素,那么就可以在浏览器中绘制所需要的形状,就像是在一个图形编辑应用程序中操作一样。

CSS Shapes Editor

当我们在绘制多边形时,浏览器扩展插件将会自动更新polygon()函数的坐标值,同时它将作为内联样式添加到元素中。一旦完成,你只需要将生成的代码复制并粘贴到你的样式表中。

使用同样的技术,我们可以很容易的绘制任何形状并且应用到我们的网页上,例如:

提取图像形状

我们可以给shape-outside属性传一个url()函数。使用这个功能可以给其添加一个背景图像。在这个示例中,允许通过url()shape-outside属性定义一个元素形状是基于图像的。

当你有一个特别复杂的形状,或者有很多曲线和点,你想让你的内容可以更好的围绕这个图形,这个时候,可以使用url()来替代polygon()。或者说,你定认形状非常棘手时,也可以考虑这样的方式。

下面的示例所示,首先,你需要创建一个带有透明度的图像:

把最初的鹦鹉图像当作的容器的背景图,添加到容器上:

.container {
   background-repeat: no-repeat;
   background-image: url('../img/parrot.png');
}

透明度的阈值

形状本身将添加到容器内的另一个元素上,这一次我们使用了另一个CSS属性shape-image-threshold

.shape {
   shape-margin: 15px;
   shape-outside: url('../img/parrot-shape.png');
   shape-image-threshold: 0;
}

这处属性定义了图像形状最低透明度的阈值,它可以是一个01之间的数字。所以,如果你想让你的图像具有一定的透明度,可以将其设置为0.80.5。如果设置其值为0,那么鹦鹉图像周边区域完全是透明的。

最后的效果看起来像这样:

提供降级处理

浏览器支持CSS Shapes还不是全面的,别指望在Firefox、IE或Edge中能看到效果。同时 Stephen在前面的教程中,也还有几个方案可提供降级处理:

This is cool, but genuine question: what is the fallback for IE/FF? It seems like going all-in with a shape layout would end up in some weird places for a lot of users.” – Stephen Bateman

首先,可以选择Modernizr库。Modernizr是一个非常可靠的库,用来对浏览器特性的测试。确保在具有CSS Shapes特性的元素上添加CSS类名。然后可以在不支持CSS Shapes中指定相关的样式:

/**
 * When the browser does not support "CSS Shape".
 */
.no-shapes .shape {
   shape-outside: polygon();
}

/**
 * Styles when the browser supports "CSS Shape".
 */
.shapes .shape {

}

如果你觉得加载Modernizr太重,你可以通过下面这行JavaScript代码,帮助你测试浏览器是否启用了CSS:

if ('undefined' === typeof document.querySelector('.shape').style.shapteOutside) {
   document.body.classList.add('no-css-shape');
}

每个CSS的样式都可以通过JavaScript给其动态插入相同的样式效果。上面这段代码检测浏览器是否有shapteOutside方法,如果没有,那么给元素添加一个no-css-shapge类名,通过这个类名做降级处理。

.shape {
   shape-outside: polygon();
}
.no-shapes .shape {

}

另外还可以使用CSS的@support语法来做相应的属性检测,比如:

@supports (shape-outside: circle()) {
   .shape {
      shape-outside: circle();
   }
}

在项目中具体采用哪种方案来做降级处理,这得取决于你的项目,你可以选择更适合你项目的一种方案。

小结

在这篇文章中,发现了如何使用polygon()函数来绘制复杂的多边形以及如何使用Chrome的扩展插件更容易的绘制多边形。还学会了如何利用url()函数引用图像,将图像当作一个图形形状,这种方式对于复杂形状特别有用。最后,尽管CSS Shapes目前支持的浏览器甚少,但我们也在文章中讨论了几种优雅降级的处理方案。具体选择什么样的方案,应该根据自身的项目需求来决定。

案例

扩展阅读

本文根据@Louie Rootfield的《Taking CSS Shapes to the Next Level》所译,整个译文带有我们自己的理解与思想,如果译得不好或有不对之处还请同行朋友指点。如需转载此译文,需注明英文出处:https://webdesign.tutsplus.com/tutorials/taking-css-shapes-to-the-next-level--cms-27907

大漠

常用昵称“大漠”,W3CPlus创始人,目前就职于手淘。对HTML5、CSS3和Sass等前端脚本语言有非常深入的认识和丰富的实践经验,尤其专注对CSS3的研究,是国内最早研究和使用CSS3技术的一批人。CSS3、Sass和Drupal中国布道者。2014年出版《图解CSS3:核心技术与案例实战》。

如需转载,烦请注明出处:http://www.w3cplus.com/css3/taking-css-shapes-to-the-next-level.html

返回顶部