在完成一个需要我学习有关 CSS 和 SVG 动画的所有知识的项目后，我开始撰写有关 Smashing Animations 和“经典卡通如何激发现代 CSS”的系列文章。为了今年的圆满结束，我想向您展示如何使用现代 CSS 来创建使卡通标题如此有影响力的元素：它们的版式。 名称 艺术品设计 在 20 世纪 20 年代和 30 年代初的默片时代，电影标题卡的排版可以营造一种情绪、设定场景，并提醒观众他们付费观看的电影类型。
卡通标题卡还包含品牌、情绪和场景设置，全部融为一体。早年，当主要工作室的预算较大时，这些标题卡通常是说明性的和绘画性的。
但当电视在 20 世纪 50 年代蓬勃发展时，预算下降，劳伦斯“艺术”戈布尔等艺术家设计的卡片采用了新的视觉语言，变得更加图形化、风格化且不那么复杂。 注：劳伦斯·“艺术”·戈布尔是本世纪中叶美国动画中经常被忽视的英雄之一。他主要在 Hanna-Barbera 最有影响力的 20 世纪 50 年代和 1960 年代为该公司工作。 戈布尔不是角色动画师。他的职责是营造氛围，因此他为《摩登原始人》、《哈克贝利猎犬》、《Quick Draw McGraw》和《瑜伽熊》设计了环境，以及定下基调的开场标题卡。他的标题卡上印有带有徽标的画作，帮助定义了汉纳-巴伯拉的标志性外观。 Goble 为 Quick Draw McGraw 和 Yogi Bear 等角色设计的艺术作品在较小的电视屏幕上效果很好。他没有复制卡通片中的剧照，而是专注于呈现一个单一的、强烈的想法——通常是剪影——抓住了它的本质。在《嗡嗡熊》中，瑜伽士乘坐直升机嗡嗡地经过。在《野餐熊》中，他手里拿着野餐篮，弹跳而去，而在他的《拳击惊魂》中，瑜伽士则将标题文字装进了盒子里。
由于几乎没有动作可以依靠，戈布尔的单帧必须创造一种情绪，设置场景，并描述一个故事。他们使用经常融入艺术品中的平面颜色、图形形状和版式来做到这一点。
作为在网络上工作的设计师，卡通标题可以教会我们很多关于如何传达品牌个性、给人留下第一印象以及对某人使用产品或网站的体验设定期望的知识。我们可以学习艺术家的技术来创建有效的横幅、登陆页面标题，甚至是老式的启动屏幕。 卡通标题版式 卡通标题卡展示了文字与图像的融合如何提供标题或英雄所需的冲击力。通过一些文本阴影、文本描边和变换技巧，现代 CSS 可以让您利用同样的能量。
卡通文本标题生成器 在写这篇文章的过程中，我意识到有一个工具来生成我非常喜欢的卡通标题风格的文本会很有用。所以我做了一个。 我的卡通文本标题生成器可让您尝试颜色、笔划和多个文本阴影。您可以调整绘制顺序、应用字母间距、以选择的示例字体预览文本，然后将生成的 CSS 直接复制到剪贴板以在项目中使用。 卡通标题 CSS 您只需复制粘贴卡通文本标题生成器为您提供的 CSS。但让我们仔细看看它的作用。 文字阴影 看看奥吉·多吉 (Augie Doggie) 的剧集“Yuk-Yuk Duck”中标题中的字体，其淡黄色字母和深色、硬质、偏移的阴影将其从背景中提升出来，营造出深度的错觉。
您可能已经知道 text-shadow 接受四个值：(1) 水平偏移和 (2) 垂直偏移，(3) 模糊，以及 (4) 可以是纯色或半透明的颜色。这些偏移值可以是正数或负数，因此我可以使用下拉到右侧的硬阴影来复制“Yuk-Yuk Duck”： 颜色：#f7f76d； 文本阴影：5px 5px 0 #1e1904；
另一方面，这个“Pint Giant”标题因其负半软阴影而具有不同的感觉： 颜色：#c2a872； 文本阴影： -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
为了添加额外的深度并创建更有趣的效果，我可以分层多个阴影。对于“Let’s Duck Out”，我组合了四种阴影：第一个是带有负水平偏移的实心阴影，使文本脱离背景，然后是逐渐柔和的阴影，在其周围创建模糊效果： 颜色：#6F4D80； 文本阴影： -5像素5px 0 #260e1e, /* 阴影 1 */ 0 0 15px #e9ce96, /* 阴影 2 */ 0 0 30px #e9ce96, /* 阴影 3 */ 0 0 30px #e9ce96; /* 影子 4 */
这些阴影表明，使用文本阴影不仅仅是为了创建灯光效果，因为它们还可以具有装饰性并增添个性。 文字描边 许多卡通标题卡的字母都带有粗体轮廓，使它们从背景中脱颖而出。我可以使用文本描边重新创建这种效果。很长一段时间以来，此属性只能通过 -webkit- 前缀使用，但这也意味着它现在已在现代浏览器中得到支持。
text-lines 是两个属性的简写。第一个，文本笔划宽度，在单个字母周围绘制轮廓，而第二个，文本笔划颜色，控制其颜色。对于“Whatever Goes Pup”，我在黄色文本中添加了 4 像素的蓝色描边： 颜色：#eff0cd； -webkit-文本-描边：4px#7890b5； 文字描边：4px #7890b5；
当笔触与阴影结合时特别有用，因此对于“Growing，Growing，Gone”，我在几乎模糊的 1px 阴影中添加了一个细长的 3px 笔触，以创建这种三维文本效果： 颜色：#fbb999； 文本阴影：3px 5px 1px #5160b1； -webkit-文本-描边：3px#984336； 文字描边：3px #984336；
油漆订单 使用文本描边并不总能产生预期的结果，尤其是对于较细的字母和较粗的笔划，因为默认情况下浏览器会在填充上绘制描边。遗憾的是，CSS 仍然不允许我像在 Sketch 中经常做的那样调整笔画位置。但是，绘制顺序属性的值允许我将描边放置在填充后面而不是前面。
绘制顺序：描边首先绘制描边，然后绘制填充，而绘制顺序：填充则相反： 颜色：#fbb999； 油漆顺序：填充； 文本阴影：3px 5px 1px #5160b1； 文字描边颜色：#984336； 文本笔划宽度：3px；
有效的笔画可以使字母保持可读性，增加重量，并且当与阴影和绘画顺序相结合时，可以使平面文本具有真实的存在感。 文本内的背景 许多卡通标题卡超越了纯色，在字体中添加了纹理、渐变或插图细节。有时这是一种纹理，有时它可能是带有微妙色调变化的渐变。在网络上，我可以通过在文本后面使用背景图像或渐变来重新创建这种效果，然后将其剪切为字母的形状。这依赖于两个属性的协同工作：background-clip：text和text-fill-color：transparent。
首先，我在文本后面应用背景。这可以是位图、矢量图像或 CSS 渐变。对于 Quick Draw McGraw 剧集“Baba Bait”中的示例，标题文本包括从暗到亮的微妙的上下渐变： 背景：线性渐变（0deg，#667b6a，#1d271a）；
接下来，我将该背景剪切到字形并使文本透明，以便背景显示出来： -webkit-background-clip：文本； -webkit-text-fill-color：透明；
有了这两行，背景就不再画在文字后面了；而是画在了文字后面。相反，它是画在里面的。当与描边和阴影结合使用时，这种技术效果特别好。剪裁的渐变为字体提供了颜色和纹理，笔画保持其边缘锐利，阴影将其从背景中提升。他们仅使用一点 CSS 就重新创建了手绘标题卡的分层外观。与往常一样，请仔细测试剪切的文本，因为浏览器的怪癖有时会影响阴影和渲染。 将文本拆分为单个字符 有时我不想设计整个单词或标题的样式。我想要设计单个字母的样式 - 将字符推到适当的位置，赋予一个字形额外的权重，或者独立地为几个字母设置动画。 在纯 HTML 和 CSS 中，只有一种可靠的方法可以做到这一点：将每个字符包装在其自己的 span 元素中。我可以手动完成此操作，但这很脆弱，难以维护，并且当副本更改时很快就会崩溃。相反，当我需要按字母控制时，我使用像 splt.js 这样的文本分割库（尽管也有其他解决方案）。这需要一个文本节点并自动换行单词或字符，为我提供了额外的动画和样式挂钩，而不会弄乱我的标记。 这种方法可以保持 HTML 的可读性和语义性，同时为我提供了重新创建经典卡通标题卡中看到的不均匀、有特色的排版所需的细粒度控制。然而，这种方法伴随着可访问性警告，因为大多数屏幕阅读器按顺序读取文本节点。所以这个：
哼甜哼
…如您所料： 哼甜哼
但这：
H 你 米
…根据浏览器和屏幕阅读器的不同，可以有不同的解释。有些人会连接字母并正确阅读单词。其他人可能会在字母之间停顿，在最坏的情况下，这可能听起来像： “H……”“U……”“M……”
遗憾的是，一些拆分解决方案无法提供始终可访问的结果，因此我编写了自己的文本拆分器 splinter.js，目前处于测试阶段。 改变单个字母 要激活我的 Toon Text Splitter，我向要拆分的元素添加 data- 属性：
嗡嗡声甜甜
首先，我的脚本将每个单词分成单独的字母，并将它们包装在应用了 class 和 ARIA 属性的 span 元素中：
然后，该脚本获取 split 元素的初始内容并将其添加为 aria 属性以帮助维护可访问性：
应用这些类属性后，我就可以根据自己的选择设置各个字符的样式。
例如，对于“Hum Sweet Hum”，我想复制它的字母如何偏离基线。使用我的 Toon Text Splitter 后，我使用多个 :nth-child 选择器应用了四个不同的翻译值来创建半随机外观： /* 第 4 个、第 8 个、第 12 个... */ .toon-char:nth-child(4n) { 翻译: 0 -8px; } /* 第 1 个、第 5 个、第 9 个... */ .toon-char:nth-child(4n+1) { 翻译: 0 -4px; } /* 第二个、第六个、第十个... */ .toon-char:nth-child(4n+2) { 翻译：0 4px; } /* 第 3 个、第 7 个、第 11 个... */ .toon-char:nth-child(4n+3) { 翻译: 0 8px; }
但翻译只是我可以用来转换卡通文本的一个属性。
我还可以旋转这些单独的角色以获得更加混乱的外观： /* 第 4 个、第 8 个、第 12 个... */ .toon-line .toon-char:nth-child(4n) { 旋转：-4deg; } /* 第 1 个、第 5 个、第 9 个... */ .toon-char:nth-child(4n+1) { 旋转: -8deg; } /* 第二个、第六个、第十个... */ .toon-char:nth-child(4n+2) { 旋转：4deg; } /* 第 3 个、第 7 个、第 11 个... */ .toon-char:nth-child(4n+3) { 旋转: 8deg; }
但翻译只是我可以用来转换卡通文本的一个属性。我还可以旋转这些单独的角色以获得更加混乱的外观： /* 第 4 个、第 8 个、第 12 个... */ .toon-line .toon-char:nth-child(4n) { 旋转：-4°； }
/* 第 1 个、第 5 个、第 9 个... */ .toon-char:nth-child(4n+1) { 旋转：-8度； }
/* 第二个、第六个、第十个... */ .toon-char:nth-child(4n+2) { 旋转：4度； }
/* 第 3 个、第 7 个、第 11 个... */ .toon-char:nth-child(4n+3) { 旋转：8度； }
当然，我可以添加动画来摇动这些角色，并使我的卡通文本样式标题栩栩如生。首先，我创建了一个旋转角色的关键帧动画：
@关键帧抖动{ 0%, 100% { 变换：旋转(var(--base-rotate, 0deg)); } 25% { 变换：旋转(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { 变换：旋转(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { 变换：旋转(calc(var(--base-rotate, 0deg) + 1deg)); } }
在将其应用到由我的 Toon Text Splitter 创建的 span 元素之前： .toon-char { 动画：jiggle 3s 无限缓入缓出； 变换原点：中心底部； }
最后，设置每个角色开始抖动之前的旋转量和延迟： .toon-char:nth-child(4n) { --base-rotate: -2deg; } } .toon-char:nth-child(4n+1) { --base-rotate: -4deg; } .toon-char:nth-child(4n+2) { --base-rotate: 2deg; } .toon-char:nth-child(4n+3) { --base-rotate: 4deg; }
.toon-char:nth-child(4n) { 动画延迟: 0.1s; } .toon-char:nth-child(4n+1) { 动画延迟: 0.3s; } .toon-char:nth-child(4n+2) { 动画延迟: 0.5s; } .toon-char:nth-child(4n+3) { 动画延迟: 0.7s; }
一帧给人留下深刻印象 卡通标题艺术家只有一个框架才能给人留下深刻的印象，他们的排版与他们绘制的艺术品一样重要。在网络上也是如此。 精心设计的标题或英雄区域需要清晰度、个性和信心——而不仅仅是褪色的全角背景图像。 通过一些精心选择的 CSS 属性（阴影、描边、剪切背景和一些受限制的动画），我们可以重新创建相同的效果。我喜欢卡通文字不是因为我怀旧，而是因为它的设计是有意的。做出深思熟虑的选择，并让一些卡通文本排版为您的设计增添冲击力。
