在完成一個需要我學習 CSS 和 SVG 動畫的所有知識的專案後，我開始撰寫有關 Smashing Animations 和「經典卡通如何激發現代 CSS」的系列文章。為了今年的圓滿結束，我想向您展示如何使用現代 CSS 來創建使卡通標題如此有影響力的元素：它們的版式。 名稱 藝術品設計 在 1920 年代和 1930 年代初期的默片時代，電影標題卡的排版可以營造一種情緒、設定場景，並提醒觀眾他們付費觀看的電影類型。
卡通標題卡還包含品牌、情緒和場景設置，全部融為一體。早年，當主要工作室的預算較大時，這些標題卡通常是說明性的和繪畫性的。
但當電視在 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 屬性（陰影、描邊、剪切背景和一些受限制的動畫），我們可以重新創建相同的效果。我喜歡卡通文字不是因為我懷舊，而是因為它的設計是有意義的。做出深思熟慮的選擇，並讓一些卡通文字排版為您的設計增添衝擊力。
