搜索内容：
时间：2019-08-13
编辑:网站制作公司
753
0
去年，Rachel Andrew撰写了一篇文章，重新审视了CSS Shapes，并重新向读者介绍了使用CSS Shapes的基础知识。对于任何渴望了解如何使用属性，如shape-outside，shape-margin和shape-image-threshold，Rachel的是理想的底漆。
杭州网页设计我见过使用属性的例子很多，但很少有超越基本形状，包括circle()，ellipse()，inset()。即使使用polygon()形状的例子也很少超出它们。考虑到CSS Shapes提供的创造性机会，这是令人失望的。但是，我确信只要有一点灵感和想象力，我们就可以制作更具特色和吸引力的设计。所以，我将向您展示如何使用CSS Shapes创建以下五种不同类型的布局：
V形
Z-模式
弯曲的形状
对角线形状
旋转的形状
遗憾的是，你不会找到许多使用CSS Shapes的网站的鼓舞人心的例子。这并不意味着灵感不在那里 - 你只需要在广告，杂志和海报设计上看一点距离。然而，仅仅模仿前一个时代和中等的工作对我们来说是愚蠢的。
在过去的几年里，我已经充满灵感填充了Dropbox文件夹，我真的应该把这些例子移到Pinterest。幸运的是，克里斯托弗·范·桑特（Kristopher Van Sant）在编写一部充满鼓舞人心的“形状文本”例子的Pinterest板时，比我更勤奋。
形状为设计增添了活力，这种运动吸引了人们。它们有助于将观众与您的故事联系起来，并在您的视觉和书面内容之间建立更紧密的联系。
当您需要内容在形状周围流动时，请使用该shape-outside属性。您必须向左或向右浮动元素shape-outside才能产生任何效果。
img {
float: <values>;
shape-outside: <values>;}注意： 当您在形状周围流动内容时，请注意不要让任何文本行变得太窄而只能容纳一两个单词。
开发动态和原始布局通常需要极少的标记。这个五个设计系列的HTML只包含标题和主要元素，图形和图像，并且通常不会比这更复杂：
<header role="banner"> <h1>Mini Cooper</h1></header><figure> <img src="mini.png" alt="Mini Cooper"></figure><main>…</main>
对我来说，现代CSS中最令人难以置信的一个方面是我可以从部分透明图像的alpha通道创建一个形状，而不需要绘制多边形路径。我只需要创建一个图像，然后浏览器将处理剩下的事情。
我认为这是CSS最令人兴奋的补充之一，它使得开发Web的艺术方向更加直接，特别是如果您使用内容管理系统和动态生成的内容。
要从图像中开发形状，它们必须具有完全或部分透明的alpha通道。在第一个设计中，我不需要绘制多边形以使内容在我的内容的任何一侧的三角形形状之间流动; 相反，我只需要指定图像文件的URL作为shape-outside值：
[src*="shape-left"],
[src*="shape-right"] {
width: 50%;
height: 100%;}[src*="shape-left"] {
float: left;
shape-outside: url('alpha-left.png');}[src*="shape-right"] {
float: right;
shape-outside: url('alpha-right.png');}
正如雷切尔在她的文章中解释的那样：
“您还可以使用图像作为形状的路径来创建弯曲的文本效果，而不包括页面上的图像。但是，你还需要浮动一些东西，所以我们可以使用Generated Content。“
作为alpha通道的替代，我可以使用Generated Content - 应用于两个伪元素 - 一个用于左边的多边形三角形，另一个用于右边。我现在运行的文本将在两个生成的形状之间流动：
main::before {
content: "";
display: block;
float: left;
width: 50%;
height: 100%;
shape-outside: polygon(0 0, 0 100%, 100% 100%);}main p:first-child::before {
content: "";
display: block;
float: right;
width: 50%;
height: 100%;
shape-outside: polygon(100% 0, 0 100%, 100% 100%);}注意： Bennett Feely的CSS剪辑路径制作工具是一个很棒的工具，用于计算与CSS形状一起使用的坐标值。
从左右，上下读取内容时，Z模式是我们眼睛所遵循的熟悉路径。通过沿着形成Z的隐藏线放置内容，这些模式有助于引导读者沿着这条路径，从我们希望它们开始阅读到目的地，例如号召性用语。Z图案可以是谨慎的 - 由焦点或具有更高视觉重量的元素暗示 - 或者使用CSS形状显而易见。
在下一个设计中，一个谨慎的z模式形成如下：
大图像跨越整个页面宽度，端点强调右对齐标题。
一个运行文本块由两个CSS形状组成。
作为页脚的图形上的厚顶边框完成了Z.
没有必要使用复杂的标记来实现这个设计，我的简单HTML只包含三个元素：
<header role="banner"> <h1>Mini Cooper:icon of the ’60s</h1> <img src="banner.png" alt="Mini Cooper"></header><main> <img src="placeholder-left.png" alt="" aria-hidden="true"> <img src="placeholder-right.png" alt="" aria-hidden="true"> …</main><figure role="contentinfo">…</figure>
我的页面宽度跨越标题和图形不需要解释，但在两个三角形形状之间流动文本有点复杂。为了实现这种z模式设计，我选择包括两个微小的1×1px占位符图像，我在其上应用两个较大的形状图像shape-outside。通过将aria-hidden属性附加到这些图像，屏幕阅读器将不会描述它们。
给两个形状图像提供相同的尺寸后，我向左浮动一个图像，向右浮动另一个图像，这样我的运行文本就可以在它们之间运行：
[src*="placeholder-left"],
[src*="placeholder-right"] {
display: block;
width: 240px;
height: 100%;}[src*="placeholder-left"] {
float: left;
shape-outside: url('shape-right.png');}[src*="placeholder-right"] {
float: right;
shape-outside: url('shape-right.png');}
标志性的迷你Cooper驾驶起来快速而有趣。虽然我的设计在没有CSS Shapes形成的z模式的情况下完美呈现，但这种布局看起来可预测且缺乏活力。通过在两个形状之间驱动一小段运行文本而创建的z模式表明了驾驶这款标志性小型车时的速度和乐趣。
CSS Shapes最迷人的一个方面是如何使用部分透明图像中的alpha通道创建优雅的形状。这种形状可以是我想象的任何东西。我只需要创建图像，浏览器就会围绕它传输内容。
虽然CSS形状模块2级规范中已经提出将内容限制在形状内，但目前无法知道是否以及何时可以在浏览器中实现。但是虽然shape-inside不可用（但是！），这并不意味着我无法使用创建类似的结果shape-outside。
通过将我的内容限制在右侧浮动的曲线图像中，我可以轻松地为下一个设计添加独特的外观。要创建形状，我再次使用该shape-outside属性，这次使用的值与我的可见图像的URL相同：
[src*="curve"] {
float: right;
width: 400px;
height: 100vh;
shape-outside: url('curve.png');}
为了在我的形状和在其周围流动的内容之间留出一些距离，形状边缘属性在第一个轮廓的轮廓之外绘制出更多的形状。我可以使用任何CSS绝对长度单位-毫米，厘米，英寸，皮卡，像素，并且点-或相对单位（ch，em，ex，rem，vh，和vw）：
[src*="curve"] {
shape-margin: 3rem;}为这种弯曲设计添加移动不仅仅依赖于CSS形状。使用视口宽度单位，我为标题，图像和运行文本提供不同的左边距，每个边距与视口的宽度成比例。这会从我的标题背面到汽车前部形成一条对角线：
h1 {
margin-left: 5vw;}img {
margin-left: 10vw;}p {
margin-left: 20vw;}角度可以帮助使布局看起来不那么结构化，感觉更有机。缺乏清晰的结构促使眼睛在组合物周围自由漫游。这种运动也使得一种安排感觉精力充沛。
我看到设计每天围绕水平和垂直轴设置，但很少基于对角线。每隔一段时间，我就会看到一个有角度的元素 - 也许是一个底部倾斜的横幅图形 - 但它对设计来说很少是必不可少的。
即使CSS Grid涉及设置列和行，也没有理由不能使用它来创建动态对角线。下一个设计只需要一个标题和主要元素：
<header role="banner"> <h1>Mini Cooper</h1> <img src="banner.png" alt="Mini Cooper"></header><main> <img src="shape.png" alt=""> …</main>
为了在这个设计中创建对角线细节，我再次围绕一个自身向左浮动的形状图像流动内容。我再次使用shape-outside与我的可见图像具有相同URL值的属性，以及shape-margin在我的形状和围绕它的内容之间放置距离：
[src*="shape"] {
float: left;
shape-outside: url('shape.png');
shape-margin: 3rem;}鉴于响应性是网络的内在属性之一，我们很难预测内容将如何流动，但我们避免像这样的设计。如果我的所有正在运行的文本的空间太小而无法适应形状，则每个形状浮动的事实意味着内容将流入形状下方的空间。
为什么在将混合变换添加到混合中时只使用CSS Grid和Shapes可以实现几年前难以想象的布局？在最后一个例子中，在此图像中围绕汽车流动文本，同时旋转整个构图需要所有这些属性的组合。
由于这些汽车的图像没有透明的alpha通道，在形状周围流动文本，因此需要包含仅包含alpha通道信息的第二图像。
这一次，我向右浮动可见图像，并使用shape-outside与我的alpha通道图像匹配的URL值应用该属性：
[src*="shape"] {
float: right;
width: 50%;
shape-outside: url('alpha.png');
shape-margin: 1rem;}你可能已经注意到我的两个图像都包含了我顺时针旋转了10度的元素。有了这些图像，我可以在相反的方向上旋转整个布局十度，以给出我的图像直立的错觉：
body {
transform: rotate(-10deg);}
摘自2019年3月26日的“网上艺术指南”。
您可以创建仅具有类型的强大结构形状。结合polygon()形状和伪元素，您可以使用Alexey Brodovitch的风格和他对Harper's Bazaar的有影响力的作品，从运行文本的实体块中雕刻形状。
我用两个物品元素形成了这些柱子，即它们之间有一个沟槽和最大宽度，这有助于保持舒适的尺寸：
body {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 2vw;
max-width: 48em;}因为有两个文章元素，我还为我的网格指定了两列，所以没有必要具体说明这些文章的位置。我可以让浏览器为我安排它们，剩下的就是应用于shape-outside每列中生成的伪元素：
article:nth-of-type(1) p:nth-of-type(1)::before {
content: "";
float: left;
width: 160px;
height: 320px;
shape-outside: polygon(0px 0px, 90px 0px, [...]);}article:nth-of-type(2) p:nth-of-type(2)::before {
content: "";
float: right;
width: 160px;
height: 320px;
shape-outside: polygon(20px 220px, 120px 0px, [...]);}现在Firefox发布了一个支持CSS Shapes的版本，并在其开发人员工具中启动了一个Shape Path Editor，现在只有Edge不支持Shapes。由于微软宣布从他们自己的EdgeHTML渲染引擎改为Chromium的Blink，与Chrome和Opera相同的引擎，这种情况很快就会改变。
像CSS Shapes这样的工具现在为我们提供了无数机会，可以利用艺术指导吸引读者的注意力并让他们保持参与。我希望你现在和我一样兴奋！
编者按：Andy的新书，Web的艺术指导（今天预订你的副本），探索了100年的艺术指导，以及我们如何利用这些知识和最新的网络技术来创造更好的数字产品。阅读摘录章节，了解这本书的内容。
杭州网页设计
3
s后返回登录
3
s后返回登录
