Web 使用 CSS Shapes 的艺术设计 #5716
Web 使用 CSS Shapes 的艺术设计 #5716
Conversation
|
校对认领 |
|
@Fengziyin1234 好的呢 🍺 |
|
校对认领 |
|
@cyz980908 妥妥哒 🍻 |
|
|
||
| [](https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/a92a6d6e-3e23-44dd-83ac-7d67831e81f4/img-1.png) | ||
|  |
|
|
||
| You can find inspiration in surprising places, such as these vintage advertisements. | ||
| 您可以在令人惊讶的地方找到灵感，例如这些古董广告。 |
|
|
||
| For the past few years, I’ve filled Dropbox folders with inspiration and I really ought to move those examples to Pinterest. Fortunately, [Kristopher Van Sant](http://www.kristophervansant.com) has been more diligent than me in compiling a Pinterest board full of inspiring [‘Shapes Of Text’ examples](https://www.pinterest.co.uk/kisstafurr/shapes-of-text/). | ||
| 在过去几年里，我已经将灵感填满了 Dropbox 文件夹，我真的应该把这些实例转移到 Pinterest。幸运的是, [Kristopher Van Sant](http://www.kristophervansant.com) 在编写一个充满启发性的[‘形状文本’的例子](https://www.pinterest.co.uk/kisstafurr/shapes-of-text/)的 Pinterest 板时，比我勤奋。 |
There was a problem hiding this comment.
『幸运的是, Kristopher Van Sant 在编写一个充满启发性的‘形状文本’的例子的 Pinterest 板时，比我勤奋。』=》『幸运的是, 比我勤奋的 Kristopher Van Sant 已经在收集一个充满启发性的‘形状文本’的例子的 Pinterest 板了。』
|
|
||
| When you need content to flow around a shape, use the `shape-outside` property. You must float an element left or right for `shape-outside` to have any effect. | ||
| 当您需要在内容在形状周围流动时，使用 `shape-outside` 属性。您必须向左或者向右浮动元素，以便 `shape-outside` 产生效果。 |
There was a problem hiding this comment.
『当您需要在内容在形状周围流动时』=》『当您需要内容在形状周围流动时』
|
|
||
| Left: A presentable but predictable design which lacks energy. Right: CSS Shapes suggest fun and speed. | ||
| *<center style='color: #999'>左图：一种缺乏活力的可展现但很普通的设计</center>* | ||
| *<center style='color: #999'>右图：CSS形状表明乐趣和速度</center>* |
|
|
||
| Left: These beautiful numerals are almost too lovely to hide. They’re also perfect for carving into those columns. Right: When I use invisible pseudo-elements with no background or borders to develop polygon shapes, the result is two unusually shaped columns. | ||
| *<center style='color: #999'>左：这些漂亮的数字几乎太可爱了。它们也非常适合刻在那些内容上</center>* | ||
| *<center style='color: #999'>右：当我使用没有背景或边框的不可见伪元素来开发多边形时，结果是两个异常形状的内容</center>* |
|
|
||
| Why settle for using only CSS Grid and Shapes? | ||
| *<center style='color: #999'>为什么只使用CSS Grid和Shapes？</center>* |
There was a problem hiding this comment.
『CSS Grid』=》『 CSS Grid 』
『Shapes』=》『 Shapes』
格式要求...我也不清楚不是正文是否需要这样，但是改了应该会美观一些
There was a problem hiding this comment.
『CSS Grid』=》『 CSS Grid 』
『Shapes』=》『 Shapes』
格式要求...我也不清楚不是正文是否需要这样，但是改了应该会美观一些
嗯嗯 都需要空格哒～
|
|
||
| Even though CSS Grid involves setting columns and rows, there’s no reason why it can’t be used to create dynamic diagonals. This next design needs just a header and main element: | ||
| 即使 CSS Grid 只涉及到列和行的设置，也没有理由不能使用它来创建动态对角线。下一个设计只需要一个标题和主要元素： |
|
@Fengziyin1234 记得来校对 |
|
|
||
| > Designer and author of “[Art Direction for the Web](https://www.smashingmagazine.com/printed-books/art-direction-for-the-web/)”, Andy Clarke, has never been afraid of pushing boundaries when using CSS to create exciting new designs. In this tutorial, he goes beyond basic CSS Shapes and shows how you can use them to create five types of distinctive and engaging layouts for your art-directed designs. | ||
| > “[web 的艺术设计](https://www.smashingmagazine.com/printed-books/art-direction-for-the-web/)” 的设计师及作者 Andy Clarke，在使用 CSS 创造令人兴奋的新设计时，从未害怕突破边界。在本教程中，他超越了基本的 CSS 形状，并展示了如何使用它们为您针对艺术的设计创建五种独特且有趣的布局。 |
There was a problem hiding this comment.
Designer and author of “[Art Direction for the Web]
这句话是两个 title
Designer 和 author of “[Art Direction for the Web]
而不是 （Designer 和 author ） of “[Art Direction for the Web]
There was a problem hiding this comment.
并展示了如何使用它们为您针对艺术的设计创建五种独特且有趣的布局。
=》
并展示了如何使用它们为你艺术的设计创建五种独特且有趣的布局。
|
|
||
| I’ve seen many examples of using the properties, but very few go beyond Basic Shapes, including `circle()`, `ellipse()`, `inset()`. Even examples using `polygon()` shapes rarely go far beyond them. Considering the creative opportunities CSS Shapes offer, this is disappointing. But, I’m sure that with a little inspiration and imagination, we can make more distinctive and engaging designs. So, I’m going to show you how to use CSS Shapes to create the following five different types of layout: | ||
| 我曾经见过很多用这些属性的例子，但是很少见到 Shapes 的高级用法，包括 `circle()`， `ellipse()`， `inset()`。甚至使用 `polygon()` 的例子也远远少于它们。考虑到 CSS Shapes 提供的创造性机会，这也太令人失望了。但是，我确信只要有一点灵感和想象力，我们就可以制作出更具特色和吸引力的设计。所以，我将向您展示如何使用 CSS Shapes 创建以下五种不同类型的布局： |
There was a problem hiding this comment.
您 =》 你
如果还有我就不在指出来啦～ 直接全文替换呗
There was a problem hiding this comment.
老实说，您和你有什么问题吗？个人写法的习惯，是否一定要改呢
There was a problem hiding this comment.
我觉得不是个人习惯问题啊。。您是尊称啊。。。。。这边需要尊称么。。。
|
|
||
| ### A Little Inspiration | ||
| ### 一点建议 |
There was a problem hiding this comment.
Inspiration 翻译成 启发是不是好一点咧？
然后 有一点格式上的一点点小建议。。
使用标题 井号 的时候可以按照顺序递增， 这边上文是 一个 #
现在就变成了三个 ###
应该是 两个
There was a problem hiding this comment.
#作为标题是文中本身的设计，是否有一定要修改的必要呢？
There was a problem hiding this comment.
@Fengziyin1234 @xujiujiu 此处不需要改。
|
|
||
| Sadly, you won’t find many inspiring examples of websites which use CSS Shapes. That doesn’t mean that inspiration isn’t out there — you just have to look a little further afield at advertising, magazine, and poster design. However, it would be foolish for us to merely mimic work from a previous era and medium. | ||
| 遗憾的是，您不会在一些使用 CSS Shapes 的网站找到许多令人震撼的例子。但这并不意味着灵感不在那里 - 您只需要在广告，杂志和海报设计上看得更远一点。然而，仅仅模仿前一个时代和媒体的工作对我们来说是愚蠢的。 |
There was a problem hiding this comment.
inspiring
的话我还是建议翻译成 启发/令人激动。。。然觉震撼这个词的程度有点太重了。。
您不会在一些使用 CSS Shapes 的网站找到许多令人震撼的例子
=>
你在这些使用 CSS Shapes 的网站中找不到到许多令人启发的例子
There was a problem hiding this comment.
@xujiujiu 类似这种，全都使用你，而不使用您。此处译者的翻译有些过于生硬，需要像校对者这样把句子捋顺。
|
|
||
| A Z-pattern is a familiar path our eyes follow when reading content from left–right, top–bottom. By placing content along the hidden lines which form a Z, these patterns help guide a reader along this path, from where we’d like them to start reading towards a destination such as a call-to-action. Z-patterns can be either discreet — implied by focal points or elements with higher visual weight — or made obvious using CSS Shapes. | ||
| 当从左到右，从上到下阅读时，Z 型是我们眼睛所遵循的熟悉路径。通过沿着 Z 形的隐藏线放置内容，有助于引导读者沿着我们希望的路径阅读，例如 Call-To-Action（行动召唤）。 Z 型也是严谨的 - 由焦点或具有更高视觉重量的元素暗示 - 或者使用 CSS Shapes。 |
| 3. The thick top border on a figure acting as a footer completes the Z. | ||
| 1. 大图片横穿整个页面宽度，断点强调右对齐的标题。 | ||
| 2. 运行文本块由两个 CSS Shapes 组成。 | ||
| 3. 作为页脚的图形上的厚顶边框完成了 Z 形。 |
| @@ -182,23 +183,25 @@ After giving the two shape images the same dimensions, I float one image left an | |||
| } | |||
| ``` | |||
|
|
|||
| [](https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/e00dcb8e-642b-43ec-947b-349fea165d1d/img-7-8.png) | |||
|  | |||
There was a problem hiding this comment.
空格。
CSS形状表明乐趣和速度
这边的shape 是不翻译哒
|
|
||
| The iconic Mini Cooper was fast and fun to drive. While my design would be perfectly presentable without a z-pattern formed by CSS Shapes, this layout looks predictable and lacks energy. The z-pattern created by driving a narrow column of running text between two shapes suggests speed and the fun people will have when driving this iconic little car. | ||
| 标志性的迷你 Cooper 驾驶起来快速而有趣。我的设计在没有通过 CSS Shapes 产生的 Z 型下也能完美呈现，但这种布局看起来很普通并且缺乏活力。通过在两个形状之间操作一小段运行文本创建的 Z 型暗示了驾驶这辆标志性小型车时的速度和乐趣。 |
Co-Authored-By: ziyin feng <[email protected]>
Co-Authored-By: ziyin feng <[email protected]>
|
|
||
| Tools like CSS Shapes now give us countless opportunities to use art direction to capture readers’ attention and keep them engaged. I hope by now you’re as excited about them as I am! | ||
| 像 CSS Shapes 这样的工具现在为我们提供了无数可以利用艺术设计吸引读者的注意力并让他们保持参与的机会。 我希望你现在和我一样兴奋！ |
|
|
||
| **An extract from ‘Art Direction for the Web’ available from 26th March 2019.** | ||
| **摘自2019年3月26日的“网上艺术指南”** |
|
|
||
| I rotate this layout just enough to make the design more appealing, without sacrificing readability. | ||
| *<center style='color: #999'>我将此布局旋转到足以使设计更具吸引力，但却不会牺牲可读性。</center>* |
There was a problem hiding this comment.
| *<center style='color: #999'>我将此布局旋转到足以使设计更具吸引力，但却不会牺牲可读性。</center>* | |
| 我将此布局旋转到足以使设计更具吸引力，但却不会牺牲可读性。 |
|
|
||
| Left: These beautiful numerals are almost too lovely to hide. They’re also perfect for carving into those columns. Right: When I use invisible pseudo-elements with no background or borders to develop polygon shapes, the result is two unusually shaped columns. | ||
| *<center style='color: #999'>左：这些漂亮的数字几乎太可爱了。它们也非常适合刻在那些内容上</center>* |
There was a problem hiding this comment.
| *<center style='color: #999'>左：这些漂亮的数字几乎太可爱了。它们也非常适合刻在那些内容上</center>* | |
| 左：这些漂亮的数字几乎太可爱了。它们也非常适合刻在那些内容上。 |
|
|
||
| Left: These beautiful numerals are almost too lovely to hide. They’re also perfect for carving into those columns. Right: When I use invisible pseudo-elements with no background or borders to develop polygon shapes, the result is two unusually shaped columns. | ||
| *<center style='color: #999'>左：这些漂亮的数字几乎太可爱了。它们也非常适合刻在那些内容上</center>* | ||
| *<center style='color: #999'>右：当我使用没有背景或边框的不可见伪元素来开发多边形时，结果是两个异常形状的内容</center>* |
There was a problem hiding this comment.
同上，麻烦译者改回去。原文是一行内容，不要额外加样式，也不要分为两行。
|
|
||
| ### 5. Rotated Shapes | ||
| ### 5. 旋转型<span id='rotated-shapes'></span> |
There was a problem hiding this comment.
前文哪里？锚点不是这样加的，此处是三级标题，有对应的锚点链接，不需要用这种方式加锚点，只需要前文链接到这里就行了。
|
|
||
| It’s common to see content flowing around shapes in print design, but this was impossible to achieve on the web before CSS Shapes. | ||
| *<center style='color: #999'>在印刊设计中经常看到内容在形状周围流动，在 CSS Shapes 之前，这在网络上是不可能实现的</center>* |
| @@ -235,17 +238,17 @@ p { | |||
| } | |||
| ``` | |||
|
|
|||
| ### 4. Diagonal Shapes | |||
| ### 4. 对角线型<span id='diagonal-shapes'></span> | |||
| @@ -5,33 +5,33 @@ | |||
| > * 译者： | |||
| @@ -5,33 +5,33 @@ | |||
| > * 译者： | |||
| > * 校对者： | |||
| 3. [Curved shapes](#curved-shapes) | ||
| 4. [Diagonal shapes](#diagonal-shapes) | ||
| 5. [Rotated shapes](#rotated-shapes) | ||
| 1. [V 型](#v-shapes) |
There was a problem hiding this comment.
| 1. [V 型](#v-shapes) | |
| 1. [V 型](#1-v-型) |
| 4. [Diagonal shapes](#diagonal-shapes) | ||
| 5. [Rotated shapes](#rotated-shapes) | ||
| 1. [V 型](#v-shapes) | ||
| 2. [Z 型](#z-patterns) |
There was a problem hiding this comment.
| 2. [Z 型](#z-patterns) | |
| 2. [Z 型](#1-z-型) |
| 5. [Rotated shapes](#rotated-shapes) | ||
| 1. [V 型](#v-shapes) | ||
| 2. [Z 型](#z-patterns) | ||
| 3. [弯曲型](#curved-shapes) |
There was a problem hiding this comment.
| 3. [弯曲型](#curved-shapes) | |
| 3. [弯曲型](#弯曲型) |
| 1. [V 型](#v-shapes) | ||
| 2. [Z 型](#z-patterns) | ||
| 3. [弯曲型](#curved-shapes) | ||
| 4. [对角线型](#diagonal-shapes) |
There was a problem hiding this comment.
| 4. [对角线型](#diagonal-shapes) | |
| 4. [对角线型](#对角线型) |
| 2. [Z 型](#z-patterns) | ||
| 3. [弯曲型](#curved-shapes) | ||
| 4. [对角线型](#diagonal-shapes) | ||
| 5. [旋转型](#rotated-shapes) |
There was a problem hiding this comment.
| 5. [旋转型](#rotated-shapes) | |
| 5. [旋转型](#旋转型) |
|
@xujiujiu 麻烦修改检查无误后艾特我再看一下。 |
|
@leviding 格式及部分不通顺的地方已修改完成，有部分仍觉得翻译的不够合适，如果可以的话还是希望有人能帮忙纠正一下 |
|
欢迎认领校对 |
Co-Authored-By: LeviDing <[email protected]>
|
@portandbridge 认领了校对 |
|
|
||
| Sadly, you won’t find many inspiring examples of websites which use CSS Shapes. That doesn’t mean that inspiration isn’t out there — you just have to look a little further afield at advertising, magazine, and poster design. However, it would be foolish for us to merely mimic work from a previous era and medium. | ||
| 遗憾的是，你在一些使用 CSS Shapes 的网站中找不到许多令人有启发的例子。但这并不意味着那里没有灵感 - 你只需要在广告，杂志和海报设计上往深处寻找。然而，仅仅模仿前一个时代和媒体的工作对我们来说是愚蠢的。 |
There was a problem hiding this comment.
这里的文意衔接我有点疑问。
疑问点在于 afield 是相对于谁来说的。
我自己的理解是，第一句说的是运用 CSS Shapes 的网站并没有几个称得上是 inspiring的，第二句说的是所以我们 （相对于网站）要看远点，看看人家广告、杂志和海报是怎么干的。最后第三句说的是，看虽看，我们不是要完全模仿这些上一代的媒体（也就是广告杂志海报）。
There was a problem hiding this comment.
感觉解释的很有道理，但是 afield at 后面接名词，感觉好像又不能还原原文的意思。。。
There was a problem hiding this comment.
我的句法分析是：afield 和 at 是没有句法关系的，它们是并列的两个状语，同时修饰 look：
look [a little further afield] [at xxxxxxxxxx]
|
|
||
| For the past few years, I’ve filled Dropbox folders with inspiration and I really ought to move those examples to Pinterest. Fortunately, [Kristopher Van Sant](http://www.kristophervansant.com) has been more diligent than me in compiling a Pinterest board full of inspiring [‘Shapes Of Text’ examples](https://www.pinterest.co.uk/kisstafurr/shapes-of-text/). | ||
| 在过去几年里，我已经将灵感填满了 Dropbox 文件夹，我真的应该把这些实例转移到 Pinterest 上。幸运的是, 比我勤奋的 Kristopher Van Sant 已经在收集一个充满启发性的 [‘形状文本’的例子](https://www.pinterest.co.uk/kisstafurr/shapes-of-text/) 的 Pinterest 板了。 |
There was a problem hiding this comment.
~~
我已经将灵感填满了 Dropbox 文件夹
中文习惯是说，我在 Dropbox 文件夹里放满了 inspiration
|
|
||
| For the past few years, I’ve filled Dropbox folders with inspiration and I really ought to move those examples to Pinterest. Fortunately, [Kristopher Van Sant](http://www.kristophervansant.com) has been more diligent than me in compiling a Pinterest board full of inspiring [‘Shapes Of Text’ examples](https://www.pinterest.co.uk/kisstafurr/shapes-of-text/). | ||
| 在过去几年里，我已经将灵感填满了 Dropbox 文件夹，我真的应该把这些实例转移到 Pinterest 上。幸运的是, 比我勤奋的 Kristopher Van Sant 已经在收集一个充满启发性的 [‘形状文本’的例子](https://www.pinterest.co.uk/kisstafurr/shapes-of-text/) 的 Pinterest 板了。 |
|
|
||
| For me, one of the most incredible aspects of modern-day CSS is that I can create a shape from the alpha channel of a partially transparent image with no need to draw a polygon path. I only need to create an image, and then a browser will take care of the rest. | ||
| 对于我来说，现代 CSS 中最令人难以置信的一个方面是我不需要绘制多边形路径就可以从部分透明图像的 alpha 通道创建一个形状。我仅需要创建一个图像，剩下的事情浏览器都可以处理。 |
There was a problem hiding this comment.
~~
结构复杂的中文长句不好读懂，应该加上标点
incredible 这个词其实外国人用烂了，它在非正式语域里面就是表示 好得（难以置信）而已。意译成棒/超棒就可以了。
对我来说，现代 CSS 一个超棒的地方就是，我不用绘制多边形路径，就可以用/通过部分透明图像的 alpha 通道创建一个形状。
|
|
||
| I think this is one of the most exciting additions to CSS and it makes developing art direction for the web more straightforward, especially if you work with a content management system and dynamically generated content. | ||
| 我认为这是 CSS 中最令人惊喜的补充之一，它使得拓展 Web 艺术方向更加简单，特别是在你开发内容管理系统或动态生成的内容时。 |
There was a problem hiding this comment.
~~
art direction 是文章的关键术语之一。前后文的翻译应该一致。
&&
develop 其实就是个很虚的表示“做”的动词。不需要译成拓展。
There was a problem hiding this comment.
这边的develop 如果是做的话，结合上下文是不是使用开发更合适？你觉得【开发 web 艺术设计】这样OK嘛？
|
|
||
| The iconic Mini Cooper was fast and fun to drive. While my design would be perfectly presentable without a z-pattern formed by CSS Shapes, this layout looks predictable and lacks energy. The z-pattern created by driving a narrow column of running text between two shapes suggests speed and the fun people will have when driving this iconic little car. | ||
| 标志性的 mini Cooper 驾驶起来快速而有趣。我的设计在没有通过 CSS Shapes 产生的 Z 型下也能完美呈现，但这种布局看起来很普通并且缺乏活力。通过在两个形状之间操作一小段流动文本创建的 Z 型暗示了驾驶这辆标志性小型车时的速度和乐趣。 |
There was a problem hiding this comment.
&&
我的设计在没有通过 CSS Shapes 产生的 Z 型下也能完美呈现
这句有歧义。应写成：
即使不用 CSS Shapes 做出 Z 型布局，我的设计也是______的；但这样的设计
There was a problem hiding this comment.
我的设计在没有通过 CSS Shapes 产生的 Z 型下也能完美呈现，但这种设计（我刚实现 z 形的设计）看起来很普通并且缺乏活力
我是这么理解的，文中作者给的代码并没有使用 css shapes，所以他觉得还是使用css shape 的好，但文中也没有给出 css shapes 的代码，所以这么翻译起来可能会觉得有点奇怪
There was a problem hiding this comment.
不是的，这段文字是描述上面两幅对比图片的。
“即使不用 CSS Shapes 做出 Z 型布局”说的是左边的图。紧随其后的”这样的设计“说的也是左图。
“通过在两个形状之间操作一小段” 说的才是右图，也就是刚刚用 Z 型做出来的图。
之所以认为右图使用了 CSS Shapes，我猜是因为有 shape-outside
|
|
||
| One of the most fascinating aspects of CSS Shapes is how I can create elegant shapes using the alpha channel from a partially transparent image. This shape can be anything I imagine. I only need to create the image, and a browser will flow content around it. | ||
| CSS Shapes 最迷人的一个方面是如何使用部分透明图像中的 alpha 通道创建优雅的形状。这种形状可以使我想象到的任何东西。我只需要创建一个图像，浏览器将会在它周围流动内容。 |
| @@ -209,17 +209,17 @@ By confining my content within a curved image floated right, I can easily add a | |||
| } | |||
| ``` | |||
|
|
|||
| To put some distance between my shape and the content flowing around it, the shape-margin property draws a further shape outside the contours of the first one. I can use any CSS absolute length unit — millimeters, centimeters, inches, picas, pixels, and points — or relative units (`ch`, `em`, `ex`, `rem`, `vh`, and `vw`): | |||
| 为了在我的形状和在其周围流动的内容之间留出一些距离，`shape-margin` p属性在第一个形状的轮廓之外绘制出更多的形状。我可以使用任何 CSS 绝对长度单位 - 毫米，厘米，英寸，派卡，像素和点 - 或相对单位（ `ch`、`em`、`ex`、`rem`、`vh` 和 `vw`）： | |||
| @@ -296,29 +296,29 @@ This time, I float the visible image right and apply the `shape-outside` propert | |||
| } | |||
| ``` | |||
|
|
|||
| You may have noticed that both my images contain elements which I rotated clockwise by ten degrees. With those images in place, I can rotate the entire layout ten degrees in the opposite direction to give the illusion that my images are upright: | |||
| 你可能已经注意到我的两个图像都包含了我顺时针旋转了 10 度的元素。这些图像就位后，我可以在相反的方向上旋转整个布局 10 度，以给出我的图像直立的错觉： | |||
|
|
||
| **Editorial’s Note**: **Andy’s new book, Art Direction for the Web ([pre-order your copy today](https://www.smashingmagazine.com/printed-books/art-direction-for-the-web/)), explores 100 years of art direction and how we can use this knowledge and the newest web technologies to create better digital products. [Read an excerpt chapter](http://provide.smashingmagazine.com/eBooks/Art-direction-FTW-excerpt.pdf?_ga=2.206394323.1550887490.1554923173-204951999.1554923173) to get a taste of what the book has to offer.** | ||
| **编者注: Andy 的新书，Web 艺术设计（[预购地址](https://www.smashingmagazine.com/printed-books/art-direction-for-the-web/)），探索了 100 年的艺术设计，以及我们如何利用这些知识和最新的网络技术来创造更好的数字产品。[阅读摘录章节](http://provide.smashingmagazine.com/eBooks/Art-direction-FTW-excerpt.pdf?_ga=2.206394323.1550887490.1554923173-204951999.1554923173)，了解这本书的内容。** |
|
@portandbridge 辛苦了 👍 @xujiujiu 可以修改了 |
|
译者你要是还有觉得翻译得不合适的地方可以留个 comment，我们去看看 |
|
@portandbridge 感谢校对，已经修改了部分地方，有些不太明白或者不太确定的地方已在review的地方进行回复了，如果有时间麻烦帮忙再看看 |
|
|
||
| > “You could also use an image as the path for the shape to create a curved text effect without also including the image on the page. You still need something to float, however, and so for this, we can use Generated Content.” | ||
| > “你还可以使用图像作为形状的路径来创建弯曲文本的效果，但不包括页面上的图像。但是，你仍需要浮动内容，因此，我们可以使用 Generated Content 模块。” |
There was a problem hiding this comment.
@portandbridge 这里我也觉得不是很通顺，有时间的话能帮忙看看嘛？
There was a problem hiding this comment.
我切成一句句短句，你看看怎么拼到一起
你也可以拿一幅图片，把它当成形状的路径来用
这样可以做出弯曲文本的效果
与此同时，又不会把刚才的那幅图片 include 到网页里面。
不过，你还是要 float 点什么东西的
所以呢，我们可以用 Generated Content
There was a problem hiding this comment.
你还可以用一张图片作为形状的路径来做出弯曲文本的效果，而且在页面上可以不显示这张图片。但是，你仍需要浮动一些内容，因此，我们可以使用 Generated Content 模块。
改成这样，感觉顺多了
|
|
||
| While confining content to within a shape has been proposed in the [CSS Shapes Module Level 2 specification](https://drafts.csswg.org/css-shapes-2/), there’s currently no way to know if and when this might be implemented in browsers. But while `shape-inside` isn’t available (**yet!**), that doesn’t mean I can’t create similar results using `shape-outside`. | ||
| 虽然 [CSS Shapes 模块 2 级规范](https://drafts.csswg.org/css-shapes-2/) 中已经提出将内容限制在形状内，但目前无法知道是否以及何时可以在浏览器中实现。然而 `shape-inside` 不可用（目前！），这并不意味着我无法使用 `shape-outside` 创建类似的结果。 |
There was a problem hiding this comment.
这里的最后一句感觉也有点问题 @portandbridge
There was a problem hiding this comment.
不过，虽然 shape-inside （暂时还）不可用，这不代表我用 shape-outside 做不出类似的效果。
|
|
||
| Why settle for just using CSS Grid and Shapes when adding Transforms to the mix can enable layouts which were unimaginable only a few years ago? In this final example, flowing text around the cars in this image, while at the same time rotating the entire composition needed a combination of all those properties. | ||
| 为什么给混合添加变换时使用 CSS Grid 和 Shapes 就能勉强实现几年前难以想象的布局？在最后一个例子中，围绕图像中的汽车流动文本，同时旋转整个需要这些属性的所有组合的布局。 |
There was a problem hiding this comment.
@portandbridge 这里的mix翻译成混合，在 web 中的【adding Transforms to the mix =》给混合添加变换】解释也很奇怪
|
|
||
| ### Bonus Example: Polygon Shapes Sculpt Columns | ||
| ### 福利例子：多边形形状塑造列 |
There was a problem hiding this comment.
@portandbridge 【福利例子】这里我的原意是像翻的轻松一点的。。。但貌似没有做到这样的效果
There was a problem hiding this comment.
可以参考超市或者商品促销的标语
比如：好栗免费送，栗子大礼包，
| @@ -349,21 +349,21 @@ article:nth-of-type(2) p:nth-of-type(2)::before { | |||
| } | |||
| ``` | |||
|
|
|||
| ### The Pay-Off | |||
| ### 成果 | |||
There was a problem hiding this comment.
@portandbridge 这个呢。。。。是通过下文的内容翻译的，但还是觉得不太合适，直译感觉更有问题，有什么好的建议嘛？
|
|
||
| Why settle for using only CSS Grid and Shapes? | ||
| 为什么只使用CSS Grid 和 Shapes？ |
|
|
||
| Why settle for just using CSS Grid and Shapes when adding Transforms to the mix can enable layouts which were unimaginable only a few years ago? In this final example, flowing text around the cars in this image, while at the same time rotating the entire composition needed a combination of all those properties. | ||
| 为什么给混合添加变换时使用 CSS Grid 和 Shapes 就能勉强实现几年前难以想象的布局？在最后一个例子中，围绕图像中的汽车流动文本，同时旋转整个需要这些属性的所有组合的布局。 |
There was a problem hiding this comment.
&&
Why settle for just using CSS Grid and Shapes when adding Transforms to the mix can enable layouts which were unimaginable only a few years ago?
为什么要满足于只使用 CSS Grid 和 Shapes 呢 — 有些几年前难以想象的布局，现在只要再引入 Transforms 就能做出来了。
（这里的 mix 说的是前面所用的几种技术/技巧。这个比喻类似于煮饭，煮饭用的材料肯定不住一种，所以是个 mix。你往煮到一半的饭菜里面再加新食材就是 adding new ingredients to the mix。我这里根据上下文没有译出来，只是用“再”字暗示。）
&&
围绕图像中的汽车流动文本，同时旋转整个需要这些属性的所有组合的布局 >
要做到围绕图像中的汽车____文本，同时旋转整个 composition 的效果，需要组合使用 all those properties。
OR 要做到围绕图像中的汽车____文本，同时旋转整个 composition 的效果，需要将 all those properties 组合起来使用。
There was a problem hiding this comment.
第一个我改一下
第二部分已经改了，你可以看一下最新的change
|
|
||
| ### Bonus Example: Polygon Shapes Sculpt Columns | ||
| ### 福利例子：多边形形状塑造列 |
There was a problem hiding this comment.
可以参考超市或者商品促销的标语
比如：好栗免费送，栗子大礼包，
|
|
||
| > “You could also use an image as the path for the shape to create a curved text effect without also including the image on the page. You still need something to float, however, and so for this, we can use Generated Content.” | ||
| > “你还可以使用图像作为形状的路径来创建弯曲文本的效果，但不包括页面上的图像。但是，你仍需要浮动内容，因此，我们可以使用 Generated Content 模块。” |
There was a problem hiding this comment.
我切成一句句短句，你看看怎么拼到一起
你也可以拿一幅图片，把它当成形状的路径来用
这样可以做出弯曲文本的效果
与此同时，又不会把刚才的那幅图片 include 到网页里面。
不过，你还是要 float 点什么东西的
所以呢，我们可以用 Generated Content
|
|
||
| While confining content to within a shape has been proposed in the [CSS Shapes Module Level 2 specification](https://drafts.csswg.org/css-shapes-2/), there’s currently no way to know if and when this might be implemented in browsers. But while `shape-inside` isn’t available (**yet!**), that doesn’t mean I can’t create similar results using `shape-outside`. | ||
| 虽然 [CSS Shapes 模块 2 级规范](https://drafts.csswg.org/css-shapes-2/) 中已经提出将内容限制在形状内，但目前无法知道是否以及何时可以在浏览器中实现。然而 `shape-inside` 不可用（目前！），这并不意味着我无法使用 `shape-outside` 创建类似的结果。 |
There was a problem hiding this comment.
不过，虽然 shape-inside （暂时还）不可用，这不代表我用 shape-outside 做不出类似的效果。
| @@ -349,21 +349,21 @@ article:nth-of-type(2) p:nth-of-type(2)::before { | |||
| } | |||
| ``` | |||
|
|
|||
| ### The Pay-Off | |||
| ### 成果 | |||
|
|
||
| Adjusting the width of alpha images at several breakpoints allows the shape of this running text to best suit its viewport. | ||
| 在多个转折点处调整 alpha 图像的宽度，使之能够展示文本形状，以完美匹配其视口。 |
There was a problem hiding this comment.
在多个转折点处调整 alpha 图像的宽度，就能让_____文本的形状完美匹配其视口
|
@xujiujiu 麻烦如果调整好了艾特我一下哈 |
|
@leviding 调整完成。@portandbridge 感谢帮忙再次校对🙏 |
|
@xujiujiu 已经 merge 啦~ 快快麻溜发布到掘金然后给我发下链接，方便及时添加积分哟。 掘金翻译计划有自己的知乎专栏，你也可以投稿哈，推荐使用一个好用的插件。 |
@leviding 掘金地址：https://juejin.im/post/5cdba21051882568841f0f47 |
译文翻译完成，resolve #5685
本文三位校对者