CSS.塑造了网的未来

本苔藓 经过 本苔藓  |  7月22日2013年

如果最近的扁平设计趋势已经证明了任何东西’S如何有限的网络设计师在构成时。现在我们’再也不再被斜面,渐变和光泽的分散注意力’清楚的是,Web设计人员有一个结构来构建它们的设计:矩形。

当然,当屏幕上有像素时,当然有多种组合矩形组的方式,但是当您考虑到不同分辨率的类型和设计的必要性时,布局选项开始看起来明显有限。

我们都知道所有的角落都是aren’直角;我们都知道那条线路’始终直接。事实上,上个世纪的一些最具出境的设计已经爆发出网格并在弧形和角度下旋转,产生紧张,戏剧和兴奋。它’在打印设计中有一个简单的命题:在Indesign中打开文档,选择 椭圆形工具 并在舞台上绘制一个圆圈,选择 类型工具 然后单击圆圈,现在粘贴在您的文本中;现在在CSS中尝试同样的事情,继续前进,我 ’我等待的时候会喝咖啡......

当然有很多方法可以在网页上绘制一个圆圈,但如果你围绕一个你的文字’ll discover that it’不是一个圆圈;它的边界盒仍然是矩形的。创建漂浮到曲线的文本的唯一选项是在每行开始时插入空格,并在最后,在末尾的行中断,人为地缩进文本;使用可访问性支付损坏的东西。

为了解决问题,W3C正在开发CSS形状。 6月20日发布,他们的第一个公共工作草案, CSS.形状模块级别1, 详细说明使用非矩形形状与盒式模型和浮动行为相关。目前正在进行的工作,CSS的建议添加包括形状矩形,插入矩形,圆形,椭圆和多边形。

在初始实施中我们’只能能够漂浮在形状周围。要做我们’ll使用形状外部属性,如下所示:

<div id='circle'></div>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Aenean lacinia bibendum nulla sed consectetur. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>

<style type='text/css'>
#circle {
        shape-outside: circle(-400px,-400px,400px); /* (x, y, radius) */
        float:left;
}

该代码将在0,0时使用其中心产生完美的圆800 x 800(半径两倍)。段落中的文本将周围流动,如下所示:

形状_001

 

更令人兴奋的是CSS形状将引入完整的Photoshop标准屏蔽:我们最终能够创建图像并使用图像’s alpha通道定义外形。

虽然它’尚不清楚,如果浏览器制造商将包括通过SVG或过滤器操作掩模的能力,即使是基本实施也充满了诱人的可能性;想象一下,在前景和背景之间分裂图像,伴随前景的文本包裹并将背景添加为背景图像,潜在是惊人的。

围绕不规则形状的基本文本将看起来像这样:

形状_002

 

浏览器支持

It’同样的老故事我’害怕:没有。此功能仅是一个提议,目前仅限于此。

然而,近年来,越来越尊重的网络标准,近年来看到浏览器制造商竞争成为第一个实施W3C规范(而不是他们自己的专有技术),因此CSS形状的引入可能相对较快。

一旦它们被广泛支持,CSS形状就有可能导致一个新的网页设计时代,其中一个设计’T限制在矩形盒式模型。未来,就在字面上,就在拐角处。

 

你对w3c兴奋了吗?’S提出的CSS形状模块?你想如何看待它随着时间的推移发展?让我们在评论中知道。

特色图片/缩略图, 形状图像 via Shutterstock.