1. 云栖社区>
  2. PHP教程>
  3. 正文

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

作者:用户 来源:互联网 时间:2017-12-01 18:26:26

css版本规范一个聊聊Shapes

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

在前面的教程中,看到了怎么创建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规范的下一个版本-


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


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


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


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


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


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


提取图像形状

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


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


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


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


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


.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;
}

这处属性定义了图像形状最低透明度的阈值,它可以是一个 0 到 1 之间的数字。所以,如果你想让你的图像具有一定的透明度,可以将其设置为 0.8 或 0.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目前支持的浏览器甚少,但我们也在文章中讨论了几种优雅降级的处理方案。具体选择什么样的方案,应该根据自身的项目需求来决定。


案例

Polygons
Image mask #1
Image mask #2

扩展阅读

CSS Shapes中文教程
How to Use CSS Shapes in Your Web Design
A Quick Look at Modernizr 3.0
Quick Tip: Add a @supports CSS File to Your CodePen Demos
CSS3 @supports中文教程

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



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

大漠

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





以上是聊聊CSS Shapes规范的下一个版本的全部内容,在云栖社区的博客、问答、公众号、人物、课程等栏目也有其他相关内容,欢迎继续使用右上角搜索按钮进行搜索css , 版本 , 规范 , 一个 , 聊聊 Shapes ,以便于您获取更多的相关知识。