制作网站使用css形状的网络艺术指导-利来国际登录

在其中她向读者重新介绍了使用css shapes的基础知识。对于任何希望了解如何使用类似性质shape-outside，shape-margin和shape-image-threshold，rachel的是理想的底漆。

我见过使用属性的例子很多，但走的很少数超越基本形状，包括circle()，ellipse()，inset()。即使使用polygon()形状的示例也很少能超越它们。考虑到css shapes提供的创新机会，这令人失望。但是，我敢肯定，只要有一点启发和想象力，我们就能做出更具特色和吸引力的设计。因此，我将向您展示如何使用css shapes创建以下五种不同类型的布局：

一点启发

不幸的是，您不会找到许多使用css shapes的启发性示例。这并不意味着灵感就不存在-您只需要在广告，杂志和海报设计上再往前看。但是，仅模仿以前的时代和媒介的工作对我们来说是愚蠢的。

在过去的几年中，我为dropbox文件夹注入了灵感，我真的应该将这些示例移至pinterest。幸运的是，克里斯托弗·范·桑特（kristopher van sant）比我更加勤奋地编写了一个充满启发性的“文本形状”示例的pinterest董事会。

形状为设计增添了能量，这种动作吸引了人们。它们有助于将观众与您的故事联系起来，并在视觉和书面内容之间建立更紧密的联系。

当需要让内容围绕形状流动时，请使用shape-outside属性。您必须向左或向右浮动元素shape-outside才能生效。

注意： 当您围绕形状传递内容时，请注意不要让任何文本行变得太窄并且只能容纳一个或两个单词。

开发动态和原始布局时，通常只需很少的标记即可。我的这五个设计系列的html仅由标题和主要元素，图形和图像组成，并且通常不比这复杂：

1. v型

对我来说，现代css最令人难以置信的方面之一是，我可以从部分透明的图像的alpha通道创建形状，而无需绘制多边形路径。我只需要创建一个图像，然后浏览器将负责其余的工作。

我认为这是css最激动人心的附加功能之一，它使网络的艺术指导发展起来更加简单，尤其是当您使用内容管理系统并动态生成内容时。

firefox现在已经发布了支持css shapes的版本，并在其developer tools中启动了shape path editor，现在只有edge不支持shapes。既然微软宣布将自己的edgehtml渲染引擎更改为chromium的blink（与chrome和opera相同的引擎），这种情况将很快改变。

现在，诸如css shapes之类的工具为我们提供了无数机会来使用艺术指导来吸引读者的注意力并使他们保持参与。我希望到目前为止，您和我一样对他们感到兴奋！