下一代网络布局：National Geographic Forest Giant

Question

使用 CSS 和浏览器布局中的工具可以实现令人惊叹的 Web 内容可视化。 使用 CSS 过滤器、WebGL、HTML5 视频、SVG、Canvas 画布等 Web 功能以及 CSS 区域、CSS 形状和 CSS 自定义过滤器等不断发展的未来技术，可以极大地扩展创意领域。 Adobe 长期以来一直与热衷于布局和设计的内容创建者合作，因此一直积极地将这些知识应用于网络，并为许多不断发展的网络标准做出了贡献。

在国家地理的帮助下，我们使用了他们名为“森林巨人”的专题内容来构建一个原型，展示这些功能如何实现丰富的 Web 布局和响应式技术。 本文将展示我们如何构建网站的一些特别有趣的特性。 为了简明扼要的概述，值得观看 下面的视频 ，Christian Cantrell 将引导您了解该网站的各种功能。

布局的细微之处

什么构成了出色的布局及其背后的功能可能很微妙，因此我们创建了一个“编辑器覆盖”，突出了更值得注意的功能。 要启用编辑标记，请单击文章底部的栏。

布局独立

在当今的网络中，布局通常由我们的内容决定，容器垂直放大以适应文本。 创建复杂布局时，对副本或其他内容的更改可能会对整体布局产生不必要的影响，导致需要根据意外更改重新设计内容。 使用区域，我们可以通过将元素定义为我们的内容，然后指定我们希望内容流过的布局部分，真正将我们的内容与布局分开。

在“森林巨人”的示例中，我们将故事包含在一个元素中。 然后，在整个页面中，我们有我们的布局脚手架，由照片和文本区域组成。 使用 CSS，我们定义了我们希望内容流经的元素。 当副本到达一个元素的末尾时，它会继续到 DOM 顺序中的下一个元素。 这使我们能够对我们的列进行真正的创意，根据设计偏移它们并调整它们的高度，而不用担心文本是否适合或超过元素的高度。 它还允许我们在布局中包含元素，例如全宽图像，而故事继续通过它流动。

#storyContent {
    flow-into: story;
}
.story {
    flow-from: story;
}

在上面的 CSS 中，我们创建了一个名为 “story” 。 此命名流的内容是 id 为 “storyContent” 。 然后，它会流经类名为 “story” 。 CSS Regions 是响应式设计的绝佳工具，它允许多列和偏移列等功能在大屏幕上实现丰富的布局，同时在小屏幕上调整为单列布局。 对于区域，您还可以使用响应单元（如 vw 或 vh）设置区域的大小。 这可用于确保列不超过布局中的视口高度，而不必担心内容被截断，因为它会自然地流入区域链中的下一个元素。

首字下沉

CSS 排除允许我们在不规则形状周围或内部环绕文本。 这对于像首字下沉这样的设计风格很有用。 首字下沉是一种常见的设计实践，其中故事或章节的第一个字母被放大，允许文本的其余部分环绕字符的轮廓。 这种效果非常类似于内联内容环绕浮动的方式，但是通过排除，我们不再局限于矩形框。 使用 float 上的 shape-outside，我们可以定义几何形状，使我们的内容能够紧紧围绕角色的形状。

.drop-caps {
    height: 100px;
    width: 100px;
    float: left;
    shape-outside: ellipse(50%, 50%, 50%, 50%);
}

这将创建一个椭圆，允许内容环绕圆形。 另外，因为我们使用相对单位来表示形状，所以改变元素的大小将反映在形状的大小上。

形状

除了首字下沉之外，排除项还可以使用 shape-in​​side 将文本包裹在形状中。 我们在整个网站中都使用此功能，特别是带有大图像标题，利用照片的负空间来框定文本。 它还允许我们沿着其他图像和图形的轮廓环绕文本，以模拟以前在 Web 上很难实现的布局。

通过使用相对单位来定义形状，形状还可以与响应式布局一起使用。 通过这种方式，我们可以根据容器或视口制作形状，甚至可以使用媒体查询来完全改变形状或将其移除，因为它都是在 CSS 中定义的。 以下是站点内使用的多边形形状之一的示例，其值定义了点：

.shape {
    shape-inside: polygon(0 50%, 50% 0, 100% 0, 100% 100%, 0 100%);
}

平衡文本

平衡文本是一种在换行时查看元素内整个文本块的功能，而不是逐字换行。 它通过断开文本行以在元素内实现大小均匀的行，避免了我们在一行上有一个或两个单词的情况。 这种级别的控制使我们能够轻松地创建美观的文本块，特别是对于像拉引号或字幕这样的短版。

这正是我们在文章中使用平衡文本的地方。 由于此功能是 Adob​​e 提出的标准，因此我们使用 Randy Edmunds 创建的 polyfill 来实现相同的结果。 此功能在响应式案例中最为明显。 调整浏览器大小时，您会注意到该块继续平衡文本以产生大致相同宽度的行。 使用平衡文本 polyfill 很容易，因为它是一个 jQuery 插件，我们所要做的就是在布局发生变化时将 'balanceText()' 应用到选择器，我们将得到很好的平衡文本，如下所示：

$(‘.balance’).balanceText();

过滤过渡

转换是引导用户注意力和传达站点内事物状态的重要方式。 随着不透明度——以及最近的 3D 变换——我们已经看到它们被用于在用户滚动或与您网站的某些部分交互时创建优美的过渡和动画。 我们现在有可用于相同目的的过滤器。

在“森林巨人”中，当一些图像进入视野时，我们使用滤镜从灰度渐变为彩色。 这些滤镜可以与不透明度或其他滤镜结合使用，以创建复杂的成像效果和过渡。 我们可以使用自定义滤镜的强大功能来添加更加戏剧化的效果。

自定义过滤器使用 GLSL 编写，与 WebGL 相同的着色语言。 它们允许您通过 CSS 将这些着色器应用于 DOM 元素，从而实现复杂的混合效果和 3D 失真。 在网站底部，当您单击“探索总统树”时，您会看到页面卷起以显示下方的另一个部分。 这只是自定义过滤器如何允许内容之间的丰富转换的一个示例。 动画可以使用 CSS 过渡来实现。 但是，如果您想使用比转换允许的更强大的动画或交互，您可以通过使用 javascript 设置样式将值传递给着色器，如下所示。 这可以让您对缓动进行更精细的控制，甚至允许用户输入的方法来操纵着色器。

function applyCurl(value) {
    $("#map").css("webkitFilter",
    "custom(url(page-curl.vs) mix(url(page-curl.fs) normal source-atop),"
    + " 50 50, transform perspective(1000) scale(1.0) rotateX(0deg) "
    + " rotateY(0deg) rotateZ(0deg), curlPosition "
    + value + " 0, curlDirection 104, curlRadius 0.2, bleedThrough 1.0)");
}

我们的过滤器将内容光栅化为 GPU 上的纹理以应用效果。 因此，我们需要确保在完成后将其删除，否则我们的内容可能会显得模糊。

$("#map").css("webkitFilter", "none");

CSS 自定义过滤器可实现有趣的效果，例如页面环绕，看起来就像在真正的书中翻页一样。 它们使 Web 开发人员能够使用称为 GLSL 的语言编写复杂的效果并将其应用于 Web 内容。 有关自定义过滤器的详细信息、所有这些参数以及如何使用它们的更多信息，请查看 这个很棒的教程 。

WebGL 中的预渲染纹理

这篇文章的亮点是“总统”的第一张完整图片，据信它是世界上体积第二大的树。 该图像是通过将数百张树的照片拼接成一张完整的照片而创建的。 我们想通过将图像分解成一堆小照片来模拟这个过程，这些照片飞到位以创建完整的图片。 这是使用 WebGL 实现的，特别是使用 Three.js 库 ，它是围绕 WebGL 的更高级别的 API 包装器。

每次尝试在屏幕上绘制新纹理时，渲染大量纹理会很快导致性能问题，更不用说额外的网络请求了。 为了减少这种情况，我们使我们的纹理尽可能大，并为每个图块偏移它们。 这种技术通常被称为精灵映射，在游戏开发中很常见。 这导致整个树的三个大纹理。 为了消除每次纹理第一次在屏幕上可见时对性能的影响，我们在动画开始之前用每个纹理渲染 1px 的正方形，将性能影响移到开头。 这使我们能够平稳地飞过树的整个高度并为其设置动画，即使在平板电脑上也是如此。

为了抵消纹理，我们改变了将纹理映射到几何体的 UV。 在 Three.js 中它看起来像这样：

geometry.faceVertexUvs[0][0] = [
    new THREE.Vector2(xOffset, yOffset + 1),
    new THREE.Vector2(xOffset, yOffset),
    new THREE.Vector2(xOffset + 1, yOffset),
    new THREE.Vector2(xOffset + 1, yOffset + 1)
];

在这里你可以看到我们使用了一个变量来表示纹理的 x 和 y 偏移。 使用自定义 GLSL 着色器材质可以实现相同的效果，该材质会偏移几何体上的绘制坐标。

实验功能

由于演示使用的某些功能仍处于试验阶段，因此需要在 Chrome Canary 针对 Chrome Canary 提到的所有标志 本网站上 。

安装并正确配置 Chrome Canary 后，请 查看演示 。 （请注意，整个项目是开源的， 可在 GitHub 上找到 。）

结论

我们还一直在探索如何在移动应用程序环境中使用这些功能，更类似于电子书。 您可以看到这个原型的制作过程，以及我们如何利用不同的交互和触控范例在平板电脑上展示这些功能。

随着 Web 浏览器布局的不断发展，我们看到希望通过传统的阅读内容来继续我们过去已经习惯的生产价值和布局质量。 借助 CSS 区域、排除、平衡文本、自定义过滤器和 WebGL 等功能，内容创建者将不再需要在覆盖面和设计质量之间做出选择。 “森林巨人”清楚地表明未来的网络将允许两者兼得。