Bea Feitler 启发设计决策：一股不可阻挡的创造力

即使你没有在艺术学校学习平面设计，你也可能知道一些著名的名字。 拥有一个多世纪的商业艺术指导，还有更多的名字等着你去发现。 那些完成了令人惊叹的工作的人，这些工作可以鼓励和激励我们更有创意地思考网络。

发现具有不可思议才能的人一直是研究艺术方向最有价值的方面之一。 了解一位设计师通常会引导我了解另一位设计师，当我找到我欣赏的人时，我不仅想了解他们做了什么，还想了解他们为什么做。

在了解了 Alexey Brodovitch 在 1950 年代之前在 Harper's Bazaar 上的有影响力的作品之后，我想知道他的遗产对杂志的影响。 这让我找到了 Bea Feitler 和她的创意伙伴 Ruth Ansel，他们在 1960 年代指导了 Harper's Bazaar。

费特勒被描述为“你从未听说过的开创性女性艺术总监”。 我从未在设计会议上听到过她的提及，也从未在有关网页设计的文章中看到过她的提及。

但是，Feitler 自信而充满活力的设计只是让她的生活和工作充满魅力的一部分。 更重要的是她的作品如何反映 1960 年代美国社会的变化以及她为影响社会所做的选择。

只举办了一场关于她的作品的展览，并出版了一本回顾性书籍。 由她的侄子撰写的《O Design de Bea Feitler》于 2012 年在她的家乡巴西出版。我花了几个月的时间才找到一份副本，但最终我找到了一份。 这是我买过的最贵的书。

Feitler 对网络设计人员的教导与她对跟随她的杂志设计师的教导一样多。 我希望通过一些小事，我能像我一样帮助人们爱上 Bea Feitler 的作品。

灵感来自 Bea Feitler

Bea Feitler 于 1938 年出生于里约热内卢。在从事专辑封面、书皮、杂志和海报设计工作后，她离开了巴西，搬到了曼哈顿。 1961 年——当时她还只有 25 岁——她成为了一名艺术助理，然后是 Harper's Bazaar 与 Ruth Ansel 一起最年轻、也是第一位女性联合艺术总监之一。

就像 Alexey Brodovitch（她在移居美国之前从 Harper's Bazaar 辞职）一样，Feitler 与艺术家和摄影师的合作帮助定义了她的作品。 在时尚芭莎，Richard Avedon 的模特 Jean Shrimpton 戴着她著名的粉红色太空头盔的照片，然后是安妮莱博维茨的裸体约翰列侬在滚石的封面上。

尽管费特勒从未见过布罗多维奇，但看到她如何尊重并发展他的遗产，这很有趣。 费特勒明白，杂志的页面应该是有意识的、个性化的，但同时又应该相互连接，形成一种和谐的节奏。

一本杂志应该流动。 它应该有节奏。 你不能只看一页，你必须想象前后发生了什么。 好的编辑设计就是要创造一个和谐的流程。 — 比亚费特勒

Feitler 将 Brodovitch 对双页纸的掌握与她选择的大胆色彩相结合，这些色彩的灵感来自流行艺术家 Jasper Johns、Roy Lichtenstein 和 Andy Warhol，以及街头时尚和青年文化。

她不怕尝试颜色或打破常规，两次将可怕的绿色文字放在霓虹粉色背景上，第一次是 1965 年 4 月的《时尚芭莎》封面，后来是 1972 年 12 月的女权主义杂志《女士》。

在她与 Ruth Ansel 共享的 Harper's Bazaar 工作室里，一幅不断变化的拼贴画充满了他们的灵感墙； 我希望我的小工作室里有空间。 Feitler 并不害怕混合媒体，当她觉得她最具标志性的传播之一不起作用时，她将 Avedon 最著名的照片之一与她从报摊购买的漫画书中的面板结合在一起下面的街道。

费特勒的设计影响并反映了 1960 年代美国社会的变化。 她所指导的杂志具有快节奏、近乎电影般的品质，非常适合当时的文化，但也与我们今天的在线工作相关。 Feitler 认为，好的编辑设计是为了创造一个和谐的流程。 这与设计引人入胜的用户体验和客户旅程和杂志页面一样重要。

尽管有些人继续背诵网络不是印刷品的口头禅，但我们可以从费特勒的工作中学到很多东西。 她的设计不仅可以帮助我们改进在线编辑设计，还可以帮助我们改进电子商务网站和数字产品设计。

Feitler 说一本书是“50/50 的图像到文本”。 在网络上，我们也需要允许交互功能和视频。 了解如何成功地组合这些组件以创造一致的、引人入胜的体验是每个数字设计师都应该发展的基本技能。

作为导师和老师，Feitler 与 Alexey Brodovitch 分享了许多原则。 她鼓励她的学生发展自己的方向，许多人自己成为了杰出的艺术总监。 Feitler 要求并接受每个人的最高标准的卓越设计。

坚持你的激情并在相信你的直觉的同时深入挖掘。 超出预期。 拥抱意外，并知道最终你会找到解决创意困境的完美解决方案，并且在做的时候会非常快乐。 — 露丝·安塞尔

可悲的是，Bea Feitler 于 1982 年死于癌症，年仅 44 岁。我相信她可以教给我们这些为网络设计的人，就像她教给跟随她的杂志艺术总监一样。 我希望她的生活和工作能够影响我们对自己的信念有勇气，做出我们自己勇敢和自信的选择。

#### 美女爆炸

Harper's Bazaar's 之前没有客座编辑，但在 1965 年 4 月的版本中，长期合作者 Richard Avedon 编辑并拍摄了整期杂志。

在里面，Avedon 拍摄了 Donyale Luna——第一位登上主流时尚杂志封面的黑人女性——和穿着从 NASA 借来的宇航服的 Paul McCartney。 对于封面，Avedon 选择了当代超模 Jean Shrimpton 的形象，他戴着由纽约最著名的女帽制造商之​​一制作的太空头盔。

Avedon 后来回忆说，晚上 11 点——在他们的最后期限过去之后——他为封面拍摄的照片没有用。 因此，Feitler 从粉红色的 Day-Glo 纸上剪下头盔的形状，并将其放在 Avedon 的照片上。 没有焦点小组，没有研究，没有观众测试，只是一个大胆而直观的设计决定。

结果是一个封面继续赢得纽约艺术总监俱乐部奖章，并在美国杂志编辑协会 2005 年杂志封面 40 强名单中排名第十五。

⁵⁰ ⁄ ₅₀图片转文字

为了实现我的第一个受 Feitler 启发的设计，我的目标是使用最少的结构元素集； header加上内容的main和aside元素。 我的标题包含标志性大众甲壳虫的分割图像和包含内嵌 SVG 大众汽车标志的标题。 由于这个标题没有文字，我用一个 ARIA 标签来描述它。 这将帮助使用辅助技术的人：

 <header> <h1 aria-labelledby="Volkswagen logo"> <svg>…</svg> </h1> <picture>…</picture> </header> <main>…</main> <aside>…</aside>

对于较小的屏幕，我只需要基础样式作为正常流程，处理我的单列布局。 首先，我在标题图像后面添加了一个线性渐变。 渐变非常灵活，但尽管它们很有用，但它们却令人惊讶地未被充分利用：

 header { padding: 1rem 2vw; background-image: linear-gradient( to right, #444 0%, #444 50%, #fff 50%, #fff 100%); text-align: center; }

我的渐变从左侧以深灰色开始，以白色结束于右侧。 如果没有色标，结果将是这些颜色之间的平滑渐变，但我希望在标题的中心有一条硬线。 为了达到这个效果，我在同一个50%的位置放置了两个色标。 要改变渐变的方向，我不需要调整这些百分比。 我可以简单地将渐变方向to right to left更改。

在使设计适应多种尺寸的屏幕时，保持视觉重量的一致平衡很重要。 我不希望我的标题图像太高以至于将我正在运行的文本推离第一个屏幕，所以我将最大高度设置为75vh或小屏幕高度的四分之三：

 header img { max-height: 75vh; }

为了完成我的小屏幕设计，我将header设置为定位上下文。 然后，我绝对定位大众汽车标志，并通过使用5vw的视口宽度单位确保其宽度适应屏幕：

 header { position: relative; } h1 { position: absolute; top: 1rem; left: 1rem; width: 5vw; }

我的纵向图像非常适合高屏幕，但是对于比高宽的屏幕，我需要更宽格式的图像。 方向是一个很棒但很少使用的媒体查询，用于测试视口的方向。 此媒体查询可以在样式表中用作更传统的宽度查询的替代方案。 它也可以应用于picture元素的source 。 每当宽度超过高度时，无论是在小型手机还是桌面尺寸的显示器上，此查询都会将我的纵向图像交换为横向替代图像：

 <picture> <source media="(orientation: landscape)"> <img src="portrait.png" alt="Volkswagen Beetle"> </picture>

对于我的替代景观设计，我使用 Grid 来放置header 、 main和aside元素。 放置这些元素有多种选择——包括列和行，以及模板区域——但我选择使用grid-template-columns在body上定义一个对称的两列网格。 我再次应用线性渐变并将其最小高度设置为与完整视口匹配：

 @media screen and (orientation: landscape) { body { display: grid; grid-template-columns: [main] 1fr [aside] 1fr; min-height: 100vh; background-image: linear-gradient( to right, #444 0%, #444 50%, #fff 50%, #fff 100%); } }

在横向时，我的header会填满屏幕的整个宽度。 因为我不再需要这个元素上的线性渐变背景图像，我可以简单地删除它：

 header { grid-column: 1 / -1; background-image: none; }

现在，因为这个网格非常简单，我使用命名线将main元素和辅助元素aside网格上：

 main { grid-column: main; } aside { grid-column: aside; }

最终结果是根据浏览器或设备屏幕是横向还是纵向来调整其布局的设计。

#### 漫画书艺术

Bea Feitler 经常将照片与插图结合起来，漫画书艺术出现在她的整个职业生涯中。

对于 Harper's Bazaar，她将 Avedon 的一张 Jean Shrimpton 穿着宇航服的照片放在漫画书背景上。 后来，她委托传奇漫画家 Marie Severin 于 1973 年为《女士杂志》创作了这幅封面。

强调规模

大众甲壳虫是一款个性鲜明的小型汽车。 我希望我的下一个设计有一个匹配的字符。 大屏幕设计使用甲壳虫车轮的巨大图片来强调那辆小汽车的小巧。 但是，在我使用大屏幕之前，我想确保在小屏幕上保持类似的比例对比度。

三个结构元素构成了实现此设计所需的标记； 大车轮图片的header ，包含汽车较小图像的figure ，以及我正在运行的文本的主要内容。 由于header对使用屏幕阅读器的任何人都没有意义，因此我选择使用aria-hidden属性来隐藏它：

 <header aria-hidden="true"> <img src="header.png" alt=""> </header> <figure> <img src="figure.png" alt="Volkswagen Beetle"> </figure> <main>…</main>

基础样式和正常流程处理了我的小屏幕设计的大部分方面，但这并不意味着我可以忽略使整体概念与众不同的原因； 大轮子和小大众的对比。 为了确保我的header始终占据视口高度的三分之一，并且在它和我的内容之间具有相同的空白，我对高度和边距都使用视口高度单位：

 header { margin-bottom: 33vh; height: 33vh; } 

我在开发灵活布局时经常遇到的一个问题是无意中调整图像大小。 我的header高度固定，图像宽度为100% ，巨轮可能会变形。 幸运的是，有一种方法可以使用object-fit属性来保持其纵横比。 有四个可能的选项，加上none ：

1. contain
   在适合父内容框的同时保留图像的纵横比。
2. cover
   保留图像的纵横比，但这次会填满整个框。 发生这种情况时，内容框外的部分图像将被隐藏。
3. fill
   图像将被扭曲，使其宽度和高度与其父级匹配。
4. scale-down
   与包含类似，缩小图像或视频的大小以适合其父级。

我希望我的大轮子完全填满标题而不改变它的纵横比。 我也不担心图像的某些部分会被剪裁，这使得cover成为object-fit的正确选择：

 header img { object-fit: cover; object-position: center bottom; width: 100%; height: 100%; }

现在车轮图像就位，我通过将其大尺寸与整个汽车的小图像进行对比来提供比例。 我将甲壳虫的最大尺寸限制为视口宽度的一半，并使用其边距将其水平居中：

 figure { margin: 0 auto; max-width: 50vw; }

此设计使用纯灰色背景来表示道路，因此我添加了背景颜色并将figure向下移动10px ，因此甲壳虫的轮子牢固地坐在停机坪上：

 main { padding: 2rem; background-color: #f0f0f1; } figure { transform: translateY(10px); }

更大的屏幕提供了给人留下深刻印象的机会，对于这种设计，我希望header图像占据大屏幕宽度的一半和整个高度。 我应用了与本系列中许多设计相同的 6+4 复合网格。 它有八列，我添加了三行。 我给中间行和底行一个固定的高度，并让第一行占据所有剩余的垂直空间：

 @media screen and (min-width : 64em) { body { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr; grid-template-rows: 1fr 155px 155px; grid-column-gap: 2vw; } }

我希望body始终填充整个视口高度，因此我应用了100vh的最小高度并使用线性渐变来创建道路的错觉：

 body { min-height: 100vh; background-image: linear-gradient( to top, #f0f0f1 0%, #f0f0f1 155px, #fff 155px, #fff 100%); }

使用行号，我将header放在网格上，因此它占据了一半的列和所有的行。 小figure的对齐将其放置在其网格模块的末尾。 然后， main形成一个窄列的运行文本：

 header { grid-column: 5 / -1; grid-row: 1 / 4; margin-bottom: 0; height: auto; background-color: #444; } figure { grid-column: 1 / 4; grid-row: 2; align-self: end; max-width: auto; } main { grid-column: 4; grid-row: 1 / 3; align-self: center; background-color: transparent; } 

了解规模如何影响人们对故事的理解对于讲好故事至关重要。 单纯的大小本身是不够的，因此要产生重大影响，大小必须与其他元素的大小相关。

Bea Feitler 了解规模并很好地使用它。 她经常将大的前景元素与背景中的小元素进行对比，以创造出包含令人难以置信的深度的设计。 我们现在可以跟随她的脚步，使用规模来增加产品和网站设计的影响力。

自信的颜色选择

Bea Feitler 对颜色的自信选择是她作品的标志之一，它立即吸引了我。 对于我下一个受费特勒启发的设计，我将深红色与鲜艳的黄色进行对比，并在设计的两侧反转这些颜色。

虽然这个页面在颜色上很大，但在标记上也很小。 我只需要两个结构元素； 一个header和main 。 里面都有一个figure和一个部门：

 <header> <figure>…</figure> <div>…</div> </header> <main> <figure>…</figure> <div>…</div> </main>

背景和文本颜色是实现此设计的起点。 我可以将其他所有内容留给正常流程：

 body { background-color: #ba0e37; color: #f8d72e; } main { background-color: #f8d72e; color: #272732; } 

对于中型屏幕，我希望header和main屏幕中的图形和分区占据任何视口高度和宽度的一半，因此我应用了一个对称的两列网格和一个最小高度：

 @media screen and (min-width : 48em) { header, main { display: grid; grid-template-columns: 1fr 1fr; min-height: 50vh; } }

我将标题的figure放在第二列，将除法放在第一列。 因为这与内容顺序相反，所以我需要将两者分配给同一行以避免一列低于另一列：

 header figure { grid-column: 2; header div { grid-column: 1; grid-row: 1; }

主要元素的figure和划分遵循内容顺序，所以我不需要为它们指定grid-row ：

 main figure { grid-column: 1; align-self: end; } main div { grid-column: 2; }

我想用从边到边的颜色填充屏幕。 对于较大的屏幕，我应用了不对称的两列网格，它延伸了我body的整个高度：

 @media screen and (min-width : 64em) { body { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; } }

在这个大屏幕设计中，我的header和main面中的figure和分区垂直而不是水平堆叠。 我将display属性从grid更改为flex并将方向设置为column 。 但是， main的视觉顺序与其内容顺序相反，所以我将其方向从 column 更改为 column-reverse：

 header, main { display: flex; flex-direction: column; } main { flex-direction: column-reverse; }

然后，为了提高运行文本的可读性，我使用多列布局并指定列宽为18em 。 浏览器将生成与其父元素一样多的该宽度的列：

 main div { column-width: 18em; column-gap: 2vw; }

大块的纯色可能会让人眼花缭乱，所以我想通过使用 SVG 为body添加一个有趣的、重复的背景图像图案来分解它们：

 body { background-image: url("data:image/svg+xml"); }

在 SVG 中，我指定了填充颜色并设置了低填充不透明度以获得微妙的效果：

 fill='#f8d72e' fill-opacity='0.1'

我将相同的 SVG 图像应用到main的黄色背景，这次将其填充颜色更改为白色并增加fill-opacity ：

 main { background-image: url("data:image/svg+xml"); } fill='#fff' fill-opacity='0.2'

图案和纹理在 Bea Feitler 的许多标志性杂志传播中发挥了重要作用，但它们在网络上已经失宠。 接下来，我将向您展示如何使用 CSS 和 SVG 模式来增加您的设计深度。

图案和纹理增加了深度

在下一个受费特勒启发的设计中，我想通过使用圆圈来传达大众甲壳虫的曲线美。 我需要最少的 HTML 来实现这种匀称的设计，只需要三个元素； header ， main和aside ：

 <header aria-hidden="true"> <picture>…</picture> </header> <aside> <div><img></div> <div><img></div> </aside> <main> <h1 aria-labelledby="Volkswagen logo"> <svg>…</svg> </h1> <p>…</p> </main>

我不希望屏幕阅读器宣布header ，所以我添加了一个值为true的aria-hidden属性。 我确实希望屏幕阅读器描述我的顶级标题，所以我添加了一个aria-labelledby属性。

半色调样式的点为该页面添加了纹理，并且使用多个背景渐变以及background-size和background-position的组合很容易实现这样的图案：

 body { background-color: #ba0e37; color: #fff; background-image: radial-gradient(rgba(255,255,255,.25) 15%, transparent 16%), radial-gradient(rgba(255,255,255,.25) 15%, transparent 16%); background-size: 6vw 6w; background-position: 0 0, 3vw 3vw; }

我将把这种风格分为三个步骤：

1. 两个径向渐变，用逗号分隔。 每个渐变包括两个色阶，第一个为15% ，第二个为16% ，形成点。
2. 通过使用视口宽度单位来调整结果图案的大小，我保持点大小与页面宽度成比例。
3. 将第一个径向渐变定位到视口的左上角（ 0 0 ），第二个使用为背景大小一半的视口宽度单位。

Lea Verou 一直忙于编译一个有用的图案画廊，她使用线性和径向渐变开发了这些图案。 像 Lea 的画廊一样聪明，有一些关于卷积渐变被用来产生困扰我的图像状图案的东西。

SVG 模式似乎更合适。 它们同样轻巧，而且更加灵活。 使用 URL 将 SVG 添加到背景图像，如果您担心 HTTP 请求，请将 SVG 作为data:image嵌入到样式表中：

 body { background-image: url("data:image/svg+xml"); }

这个设计的aside包括两个部分，每个部分都包含甲壳虫神话般的正面图片。 我将这些分区剪成圆形以补充其曲线：

 aside div { -webkit-clip-path: circle(); clip-path: circle(); } 

通过使图片的背景完全透明，我可以在需要时更改其父分区的颜色。 我添加了略微透明的背景颜色，可以显示点图案的提示：

 aside div:first-child { background-color: rgba(57,135,106,.9); } aside div:last-child { background-color: rgba(248,215,46,.9); }

在这个设计中有如此多的颜色和纹理，我的布局需要简单，所以我应用了一个两列不对称网格，其中最窄的列永远不会缩小到 260px 以下：

 @media screen and (min-width : 64em) { body { display: grid; grid-template-columns: 4fr minmax(260px, 1fr); } }

为了提高我的运行文本段落对红色图案的可访问性和可读性，我添加了一个与我的背景相匹配的颜色的微妙阴影：

 p { filter: drop-shadow(0 0 5px #ba0e37); } 

过去，过滤图片以应用模糊、颜色变化或阴影需要在图像编辑器中添加破坏性效果，但今天，许多相同的过滤器都可以在 CSS 中使用。 您也可以将过滤器应用于其他 HTML 元素。

应用 CSS 过滤器很简单。 首先，声明过滤器函数，然后在括号中声明一个值。 为了使用过滤器（而不是opacity属性）将元素的不透明度降低到25% ，我使用了opacity过滤器：

 .ihatetimvandamme { filter: opacity(.25); }

这些值因每个过滤器而异。 一些过滤器使用度数，接受使用像素、百分比或等效的小数。 例如， .25等于25% ， 1等于100% 。

有十种 CSS 过滤器可供选择： blur 、 brightness 、 contrast 、 drop-shadow 、 greyscale 、 hue-rotate 、 invert 、 opacity 、 saturate度和sepia 。 您还可以使用 URL 函数来使用来自 SVG 的自定义过滤器。

我想从我的header中删除所有颜色并将其opacity降低到80% 。 我可以通过用空格分隔任意数量的过滤器来组合它们。 重要的是要记住，浏览器将按照指定的顺序应用过滤器，因此对于我的header ，颜色将在opacity改变之前被删除：

 header { filter: grayscale(1) opacity(.8); }

当我需要 CSS 过滤器和值之间的平滑转换时，我可以添加状态之间的转换，也许通过增加:hover伪类的header的opacity ：

 header { filter: grayscale(1) opacity(.8); transition: filter 1s linear; } header:hover { filter: grayscale(1) opacity(1); }

我可以使用 CSS 在过滤器之间开发更精细的动画，方法是首先定义我的关键帧，将过滤器值设置为动画持续时间的0 % 到100%之间的任意百分比：

 @keyframes beetle { 0% { filter: grayscale(1) opacity(.8) blur(5px); } 50% { filter: grayscale(1) opacity(1) blur(0); } 100% { filter: grayscale(1) opacity(.8) blur(5px); } }

然后我将此动画分配给我的header ，使用animation-name加上animation-duration 、 animation-delay和其他可选设置的值：

 header:hover { animation-name: beetle; animation-delay: 0s; animation-direction: alternate; animation-duration: 1s; animation-fill-mode: forwards; animation-iteration-count: 1; animation-timing-function: linear; }

Una Kravets 使用 CSS 滤镜和混合模式为她的 CSSgram 库重新创建了 Instagram 滤镜效果。 在 Una 的工作基础上，开发人员 Indrashish Ghosh 制作了 cssFilters，这是一个用于精细控制这些 Instagram 风格效果、将它们应用到上传的图像并生成 CSS 值的工具。 Indrashish 之类的工具使 CSS 过滤器的使用变得与任何图像编辑器一样容易。

作为对过度装饰性设计的一种反应，近十年来，扁平化设计一直是主导美学。 随着渐变、图案、阴影和 3D 拟物化不再流行，设计师们开始接受纯色、方角和锐利的边缘。

毫无疑问，反拟物主义帮助设计师专注于功能设计和可用性，而不会分散一些人可能仍然认为的繁荣。 但是，将产品和网站设计减少到最低限度已经产生了不幸的影响。 由于几乎没有区别他们的设计，产品和网站采用了令人遗憾的统一性，这使得它们难以区分。

虽然我不主张回归最糟糕的拟物化，但我希望产品和网站设计师能够意识到更有活力的设计方法的价值； 一个欣赏设计如何将品牌与竞争对手区分开来的人。 一种适当地使用渐变、图案、阴影来讲述故事并提供更大启示的方法。 这将使产品和网站不仅更易于使用，而且更令人愉快。

使用 SVG 过滤器进行开发

对于这个最终的灵感设计，我只需要两个结构元素； 一个包含六个颜色鲜艳的甲壳虫的header ，以及我的文本的main内容：

 <header> <div><img src="car-red.png" alt=""></div> <div><img src="car-green.png" alt=""></div> <div><img src="car-cyan.png" alt=""></div> <div><img src="car-magenta.png" alt=""></div> <div><img src="car-yellow.png" alt=""></div> <div><img src="car-black.png" alt=""></div> </header> <main>…</main>

正常流程负责小屏幕的大部分设计，但这并不意味着无事可做。 如果我将它们全部缩小以适应小屏幕，我将失去这些彩色汽车的影响。 我也不希望人们在看到我的内容之前滚动过去所有六个，所以我的解决方案是在滚动面板中水平排列它们。

Flexbox 是排列这些图像的明显选择，但默认的左右顺序意味着显示最后一辆车的后部，而不是第一辆车的前部。 这很容易通过将flex-direction从默认row更改为row-reverse来解决：

 header { display: flex; direction: row-reverse; max-width: 100%; overflow-x: scroll; }

我希望所有这些汽车都以相同的大小出现，所以我使用了flex-grow属性和1的值。 因为我想显示每辆车的前部以表明在视口之外还有更多可以看到，所以我将flex-basis值设置为80% ；

 header div { flex-grow: 1; flex-grow: 0; flex-basis: 80%; /* flex: 1 0 80%; */ }

在中等尺寸的屏幕上，我的汽车收藏有更精细的布局空间。 对于这个设计，我将我的甲壳虫安排在一个 8x12 的模块化网格上，其中每个模块都是一个 16:9 纵横比的矩形。 距离观察者最远的黑色甲壳虫占据了一个模块，汽车逐渐变大，直到前景中的红色甲壳虫占据最大的空间区域。

为了实现这个模块化网格，我将 Grid 应用于我的标题元素，然后是八个重复的大小均匀的列，以及适应其内容最小高度的十二行。 通过将项目与每行的end而非start对齐，结果看起来更真实：

 @media screen and (min-width : 48em) { header { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(12, min-content); grid-row-gap: 10px; align-items: end; } } 

我的下一个任务是将每只甲壳虫放到网格上。 I use a combination of child ( > ) and nth-child selectors to place each element using line numbers:

 header > :nth-child(1) { grid-column: 3 / -1; grid-row: 10 / -1; } header > :nth-of-type(2) { grid-column: 3 / 7; grid-row: 7 / 9; } header > :nth-of-type(3) { grid-column: 1 / 4; grid-row: 5 / 7; } header > :nth-of-type(4) { grid-column: 2 / 4; grid-row: 3; } header > :nth-of-type(5) { grid-column: 6 / 8; grid-row: 2; } header > :nth-of-type(6) { grid-column: 3; grid-row: 1; }

A design like this cries out for typographic details. Padding on the main element adds space around my running text, so to add interest to my type, I set column widths of 24em , and a browser will automatically create the right number of columns to fit the viewport:

 p { column-width: 24em; column-gap: 2vw; }

To add extra interest to my type, I combine a first-of-type pseudo-class selector with a first-line pseudo-element to transform that first line into uppercase letters:

 p:first-of-type::first-line { text-transform: uppercase; }

To implement my design for larger screens, I double the number of columns from eight to sixteen and reposition my images to the new line numbers:

 @media screen and (min-width : 64em) { header { grid-template-columns: repeat(16, 1fr); } header > :nth-child(1) { grid-column: 8 / 15; grid-row: 9 / 13; } header > :nth-of-type(2) { grid-column: 6 / 11; grid-row: 5 / 8; } header > :nth-of-type(3) { grid-column: 1 / 5; grid-row: 4 / 6; } header > :nth-of-type(4) { grid-column: 4 / 6; grid-row: 3; } header > :nth-of-type(5) { grid-column: 11; grid-row: 2; } header > :nth-of-type(6) { grid-column: 5; grid-row: 1; } }

Compared to today's Beetle — which weighs almost 3000lbs — the Volkswagen Type 1 was a lightweight and speedy little car for its time. I'd like to create the impression these cars are speeding past the viewer by adding motion blur. Blurring an element using a CSS filter is straightforward:

header > div { filter: blur(5px); }

这个过滤器允许我使用几个长度值来模糊一个元素，包括在我看来是最合适的单位的像素。 但是，CSS 过滤器只允许我在水平和垂直方向上使用相同的量来模糊元素，就像图像编辑器的高斯模糊一样。 为了在我的设计中添加逼真的动作，我需要将 CSS 替换为 SVG 过滤器。

在本期中，我仅介绍了有关 SVG 过滤器的少量细节，但 SVG 专家 Sara Soueidan 已大量撰写有关它们的文章。 从 Sara 的 SVG 过滤器 101 教程开始。

虽然它的 10 个库存过滤器是 CSS 中相对较新的补充，但它们的历史可以追溯到 SVG 的起源。 SVG 中的过滤器提供了更大的灵活性，还有六个可用的过滤器和令人难以置信的自定义可能性。 而 CSS blur在 SVG 中只允许水平轴和垂直轴 (X/Y,) 使用一个值，我可以使用两个值； 一个用于 X 轴，另一个用于 Y。

在 SVG 中，每个过滤器都有自己的标识，因此要模糊为 HTML 元素，请使用样式表中过滤器属性中的 URL 值引用其 ID：

 .blur { filter: url(#blur); }

过滤器在 SVG 中有自己的元素，它是filter元素。 即使过滤器在浏览器中不可见，给 SVG 指定高度0也可以确保它不占用空间：

 <svg height="0"> <filter>…</filter> </svg>

每个 SVG 滤镜原语都有自己的名称，前缀为 fe，“滤镜效果”的缩写。 毫不奇怪，模糊的名称是feGaussianBlur 。 模糊量作为stdDeviation应用，使用一个统一值或两个单独的水平和垂直值。 为了在 SVG 中重现之前均匀的5px高斯模糊，我添加了一个值：

 <filter> <feGaussianBlur in="SourceGraphic" stdDeviation="5"/> </filter>

我正在寻找一种更逼真的运动效果，其中图像仅在水平轴上模糊。 我只对 X 轴应用模糊，使 Y 轴为零：

 <filter> <feGaussianBlur in="SourceGraphic" stdDeviation="15, 0"/> </filter>

现在我的车在视口中飞驰而过，但是当你仔细观察时。 结果并不完全现实。 那是因为我的模糊元素的边缘被边界框剪裁了。 这是围绕每个元素的矩形。

为了使整个滤镜效果可见，我需要使用x 、 y 、 width和height值来增加滤镜区域的大小。 我在水平轴和垂直轴上都使用-10%的负值，然后将width和height增加到120% ，从而为图像的模糊边缘留出更多可见空间：

 <filter x="-10%" y="-10%" width="120%" height="120%"> … </filter>

当你看到汽车飞驰而过，或者你从行驶中的火车窗外看时，离你最近的物体似乎比离你更远的物体移动得更快。 为了使我的设计看起来更逼真，我需要为前景、中间背景和背景中的对象设置一组不同的模糊值。

像壁橱里的红色甲壳虫这样的前景元素需要最大程度的水平模糊。 我给这个过滤器一个blur-foreground的身份：

 <filter x="-10%" y="-10%" width="120%" height="120%"> <feGaussianBlur in="SourceGraphic" stdDeviation="15,0"/> </filter>

然后，中间地带的甲虫会收到稍低的stdDeviation 10 ：

 <filter x="-10%" y="-10%" width="120%" height="120%"> <feGaussianBlur in="SourceGraphic" stdDeviation="10,0"/> </filter>

最后，背景中的物体受到的模糊最少。 我给这个过滤器一个blur-background的身份，所以我可以在我的样式表中应用它：

 <filter x="-10%" y="-10%" width="120%" height="120%"> <feGaussianBlur in="SourceGraphic" stdDeviation="5,0"/> </filter>

指定所有过滤器后，在我的样式表中，我将它们应用于前景、中间和背景中的甲壳虫：

 <img src="car-red.png" class="blur-foreground"> <img src="car-green.png" class="blur-medium"> <img src="car-cyan.png" class="blur-medium"> <img src="car-magenta.png" class="blur-medium"> <img src="car-yellow.png" class="blur-background"> <img src="car-black.png" class="blur-background"> .blur-foreground { filter: url(#blur-foreground); } .blur-medium { filter: url(#blur-medium); } .blur-background { filter: url(#blur-background); }

我的六只彩色甲壳虫现在正在视窗中竞速，我最终受费特勒启发的设计也是赢家。

注意： Smashing 会员可以访问设计精美的 Andy 的 Inspired Design Decisions 杂志的 PDF 和本文中的完整代码示例。

阅读该系列的更多内容

• 启发设计决策：Avaunt 杂志
• 受启发的设计决策：紧迫事项
• 启发设计决策：欧内斯特杂志
• 启发设计决策：Alexey Brodovitch
• 启发设计决策：Neville Brody
• 启发设计决策：Otto Storch
• 启发设计决策：Herb Lubalin
• 启发设计决策：Max Huber
• 启发设计决策：Giovanni Pintori
• 启发设计决策：Emmett McBain
• 启发设计决策：Bradbury Thompson

注意： Smashing 会员Smashing 会员可以访问设计精美的 Andy 的 Inspired Design Decisions 杂志的 PDF 以及本文中的完整代码示例。 您可以直接从 Andy 的网站购买本期的 PDF 和示例以及所有其他问题。