CSS と SVG アニメーションについてできる限りすべてを学ぶ必要があるプロジェクトを終えた後、私はスマッシング アニメーションと「古典的な漫画が現代の CSS にインスピレーションを与える方法」に関するこのシリーズを書き始めました。今年の締めくくりとして、最新の CSS を使用して、トゥーン タイトルに大きな影響を与える要素、つまりタイポグラフィーを作成する方法を紹介したいと思います。 タイトルアートワークデザイン 1920 年代から 30 年代初頭のサイレント時代には、映画のタイトル カードのタイポグラフィーが雰囲気を生み出し、シーンを設定し、観客にお金を払って見に来た映画の種類を思い出させました。
漫画のタイトル カードには、ブランディング、ムード、シーン設定もすべて 1 つにまとめられていました。大手スタジオの予算が大きかった初期の頃、これらのタイトル カードはイラスト的で絵画的なものが多かったです。
しかし、1950 年代にテレビがブームになると予算が減り、ローレンス “アート” ゴーブルのようなアーティストがデザインしたカードは新しい視覚言語を採用し、よりグラフィックで様式化され、複雑さが減りました。 注: ローレンス・“アート”・ゴーブルは、世紀半ばのアメリカのアニメーションで見落とされがちなヒーローの 1 人です。彼は主に、1950 年代と 1960 年代の最も影響力のある時期にハンナ・バーベラで働いていました。 ゴーブルはキャラクターアニメーターではありませんでした。彼の役割は雰囲気を作り出すことだったので、フリントストーン、ハックルベリー ハウンド、クイック ドロー マグロウ、ヨギ ベアの環境と、雰囲気を決めるオープニング タイトル カードをデザインしました。ロゴが重ねられた絵を特徴とする彼のタイトルカードは、ハンナ＝バーベラの象徴的な外観を定義するのに役立ちました。 ゴーブルのクイック ドロー マグロウやヨギ ベアなどのキャラクターのアートワークは、小さなテレビ画面でも効果的でした。彼は漫画の静止画を複製するのではなく、その本質を捉えた 1 つの強力なアイデアを (多くの場合はシルエットで) 提示することに重点を置きました。 「The Buzzin' Bear」では、ヨギがヘリコプターに乗って飛び回っています。 「Bear on a Picnic」ではピクニックバスケットを手に飛び跳ね、「Prize Fight Fright」ではヨギがタイトルテキストをボックスに入れている。
頼るべきモーションがほとんど、またはまったくない中で、ゴーブルの 1 つのフレームで雰囲気を作り、場面を設定し、ストーリーを説明する必要がありました。彼らは、アートワークに頻繁に組み込まれる単調な色、グラフィック形状、タイポグラフィーを使用してこれを実現しました。
Web で働くデザイナーとして、トゥーン タイトルは、ブランドの個性を伝える方法、第一印象を与える方法、製品や Web サイトを使用する人のエクスペリエンスに期待を与える方法について多くのことを教えてくれます。私たちは、効果的なバナー、ランディング ページのヘッダー、さらには古き良きスプラッシュ スクリーンを作成するアーティストのテクニックから学ぶことができます。 トゥーンタイトルのタイポグラフィー 漫画のタイトル カードは、文字と画像を組み合わせることで、ヘッダーやヒーローに必要なパンチがどのように与えられるかを示します。最新の CSS では、いくつかのテキスト シャドウ、テキスト ストローク、および変換トリックを使用して、同じエネルギーを活用できます。
トゥーンテキストタイトルジェネレーター この記事を書いている途中で、大好きな漫画のタイトルのようなスタイルのテキストを生成するツールがあれば便利だということに気づきました。それで私はそれを作りました。 My Toon Text Title Generator を使用すると、色、ストローク、複数のテキスト シャドウを試すことができます。ペイント順序を調整したり、文字間隔を適用したり、選択したサンプル フォントでテキストをプレビューしたり、生成された CSS をクリップボードに直接コピーしてプロジェクトで使用したりできます。 トゥーンタイトルCSS トゥーン テキスト タイトル ジェネレーターが提供する CSS をコピーして貼り付けるだけです。しかし、それが何をするのか詳しく見てみましょう。 テキストシャドウ オーギー・ドギーのエピソード「Yuk-Yuk Duck」のこのタイトルの文字を見てください。淡い黄色の文字と、背景から浮かせて奥行きのある錯覚を生み出す暗くて硬いオフセットシャドウが付いています。
おそらくすでにご存知かと思いますが、text-shadow は 4 つの値 (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」では、4 つのシャドウを組み合わせます。最初のシャドウは負の水平オフセットを持つソリッド シャドウで、テキストを背景から浮かせ、次に徐々に柔らかいシャドウを使用してテキストの周囲にぼかしを作成します。 色: #6F4D80; テキストシャドウ: -5px5px 0 #260e1e, /* シャドウ 1 */ 0 0 15px #e9ce96, /* シャドウ 2 */ 0 0 30px #e9ce96, /* シャドウ 3 */ 0 0 30px #e9ce96; /* シャドウ 4 */
これらの影は、テキスト シャドウの使用が単に照明効果を作成するだけではなく、装飾的で個性を追加できることを示しています。 テキストストローク 漫画のタイトル カードの多くは、背景から目立つように太字の輪郭を持つ文字を特徴としています。テキストストロークを使用してこの効果を再現できます。長い間、このプロパティは -webkit- プレフィックスを介してのみ利用可能でしたが、これは、このプロパティが最新のブラウザーでサポートされるようになったということも意味します。
text-blood は 2 つのプロパティの短縮形です。最初の text-ストローク幅は個々の文字の周囲に輪郭を描き、2 番目のテキストストロークカラーはその色を制御します。 「Whatever Goes Pup」では、黄色のテキストに 4 ピクセルの青いストロークを追加しました。 色: #eff0cd; -webkit-text-ストローク: 4px #7890b5; テキストストローク: 4px #7890b5;
ストロークはシャドウと組み合わせると特に便利です。そのため、「Growing, Growing, Gone」では、かろうじてぼやけた 1 ピクセルのシャドウに細い 3 ピクセルのストロークを追加して、この 3 次元のテキスト効果を作成しました。 色: #fbb999; テキストシャドウ: 3px 5px 1px #5160b1; -webkit-text-ストローク: 3px #984336; テキストストローク: 3px #984336;
ペイントの順序 text-ストロークを使用すると、特に細い文字と太いストロークの場合、常に期待どおりの結果が得られるわけではありません。これは、デフォルトではブラウザが塗りつぶしの上にストロークを描画するためです。残念なことに、CSS では、Sketch でよく行うようにストロークの配置を調整することはまだできません。ただし、paint-order プロパティには、ストロークを塗りつぶしの前ではなく後ろに配置できる値があります。
Paint-order: ストロークは最初にストロークをペイントし、次に塗りつぶしをペイントしますが、paint-order: fill はその逆を行います。 色: #fbb999; ペイント順序: 塗りつぶし; テキストシャドウ: 3px 5px 1px #5160b1; テキストストロークの色:#984336; テキストストローク幅: 3px;
効果的なストロークは文字を読みやすくし、重みを加え、影やペイント順序と組み合わせることで、フラットなテキストに本物の存在感を与えます。 テキスト内の背景 漫画のタイトル カードの多くは、レタリングにテクスチャ、グラデーション、イラストの詳細を追加することで、単色を超えています。それはテクスチャである場合もあれば、微妙な色調の変化を伴うグラデーションである場合もあります。ウェブ上では、テキストの背後に背景画像またはグラデーションを使用し、それを文字の形に切り取ることで、この効果を再現できます。これは、background-clip: text と text-fill-color:parent という 2 つのプロパティが連携することに依存しています。
まず、テキストの後ろに背景を適用します。これには、ビットマップ、ベクター イメージ、または CSS グラデーションを使用できます。 Quick Draw McGraw エピソード「Baba Bait」のこの例では、タイトル テキストに暗いから明るいまでの微妙な上下のグラデーションが含まれています。 背景: 線形グラデーション(0度、#667b6a、#1d271a);
次に、その背景をグリフにクリップし、背景が透けて見えるようにテキストを透明にします。 -webkit-background-clip: テキスト; -webkit-text-fill-color: 透明;
この 2 行だけで、テキストの後ろに背景が描画されなくなります。代わりに、その中に描かれています。このテクニックは、ストロークやシャドウと組み合わせると特に効果的です。クリップされたグラデーションはレタリングに色とテクスチャを与え、ストロークはエッジをシャープに保ち、シャドウは背景から文字を浮き上がらせます。これらを組み合わせると、少しの CSS だけを使用して、手描きのタイトル カードのレイヤー状の外観が再現されます。いつものように、ブラウザの癖が影やレンダリングに影響を与える可能性があるため、クリップされたテキストを注意深くテストしてください。 テキストを個々の文字に分割する 場合によっては、単語全体や見出し全体のスタイルを設定したくないことがあります。個々の文字のスタイルを設定したい — 文字を所定の位置に移動したり、1 つのグリフに特別な重みを与えたり、いくつかの文字を個別にアニメーション化したりすることができます。 プレーンな HTML と CSS では、これを行うための信頼できる方法は 1 つだけです。それは、各文字を独自のspan要素で囲むことです。それを手動で行うこともできますが、それは壊れやすく、保守が難しく、コピーが変更されるとすぐに壊れてしまいます。代わりに、文字ごとの制御が必要な場合は、splt.js のようなテキスト分割ライブラリを使用します (ただし、他のソリューションも利用できます)。これはテキスト ノードを取得し、単語や文字を自動的にラップし、マークアップを台無しにすることなくアニメーション化やスタイルを設定するための追加のフックを提供します。 これは、HTML を読みやすくセマンティックに保ちながら、古典的な漫画のタイトル カードに見られる不均一で特徴的なタイポグラフィを再現するために必要なきめ細かい制御を可能にするアプローチです。ただし、このアプローチには次のような問題が伴いますほとんどのスクリーン リーダーはテキスト ノードを順番に読み上げるため、アクセシビリティに関する注意事項があります。したがって、これは次のとおりです。
ハムスイートハム
…ご想像のとおり、次のようになります。 ハム・スイート・ハム
しかし、これは：
H u m
…ブラウザやスクリーン リーダーによって解釈が異なる場合があります。文字を連結して単語を正しく読む人もいます。また、文字の間に一時停止する人もいます。最悪の場合、次のように聞こえるかもしれません。 「は…」「う…」「ん…」
残念なことに、一部の分割ソリューションでは常にアクセス可能な結果が得られるわけではないため、現在ベータ版である独自のテキスト分割ツール splinter.js を作成しました。 個々の文字を変換する トゥーン テキスト スプリッターをアクティブにするには、分割したい要素に data- 属性を追加します。
ハムスイートハム
まず、私のスクリプトは各単語を個別の文字に分割し、class 属性と ARIA 属性が適用されたspan要素でラップします。
次に、スクリプトは分割要素の初期コンテンツを取得し、アクセシビリティを維持するためにそれを aria 属性として追加します。
これらのクラス属性を適用すると、選択したとおりに個々の文字のスタイルを設定できます。
たとえば、「Hum Sweet Hum」では、文字がベースラインからどのように変化するかを再現したいと考えています。トゥーン テキスト スプリッターを使用した後、いくつかの :nth-child セレクターを使用して 4 つの異なる変換値を適用し、半ランダムな外観を作成しました。 /* 4 番目、8 番目、12 番目... */ .toon-char:nth-child(4n) { 変換: 0 -8px; } /* 1 番目、5 番目、9 番目... */ .toon-char:nth-child(4n+1) { 変換: 0 -4px; } /* 2 番目、6 番目、10 番目... */ .toon-char:nth-child(4n+2) {翻訳: 0 4px; } /* 3 番目、7 番目、11 番目... */ .toon-char:nth-child(4n+3) {翻訳: 0 8px; }
ただし、translate はトゥーン テキストの変換に使用できるプロパティの 1 つだけです。
個々のキャラクターを回転させて、さらに混沌とした外観にすることもできます。 /* 4 番目、8 番目、12 番目... */ .toon-line .toon-char:nth-child(4n) { 回転: -4 度; } /* 1 番目、5 番目、9 番目... */ .toon-char:nth-child(4n+1) { 回転: -8 度; } /* 2 番目、6 番目、10 番目... */ .toon-char:nth-child(4n+2) { 回転: 4 度; } /* 3 番目、7 番目、11 番目... */ .toon-char:nth-child(4n+3) { 回転: 8 度; }
ただし、translate はトゥーン テキストの変換に使用できるプロパティの 1 つだけです。個々のキャラクターを回転させて、さらに混沌とした外観にすることもできます。 /* 4 番目、8 番目、12 番目... */ .toon-line .toon-char:nth-child(4n) { 回転: -4 度; }
/* 1 番目、5 番目、9 番目... */ .toon-char:nth-child(4n+1) { 回転: -8 度; }
/* 2 番目、6 番目、10 番目... */ .toon-char:nth-child(4n+2) { 回転: 4度; }
/* 3 番目、7 番目、11 番目... */ .toon-char:nth-child(4n+3) { 回転: 8度; }
そしてもちろん、アニメーションを追加してキャラクターを揺らしたり、トゥーン テキスト スタイルのタイトルに命を吹き込むこともできます。まず、キャラクターを回転させるキーフレーム アニメーションを作成しました。
@keyframes 揺れる { 0%、100% { 変換: 回転(var(--base-rotate, 0deg)); } 25% { 変換: 回転(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { 変換: 回転(calc(var(--base-rotate, 0度) - 2度)); } 75% { 変換: 回転(calc(var(--base-rotate, 0度) + 1度)); } }
トゥーン テキスト スプリッターで作成したスパン要素に適用する前に、次の手順を実行します。 .toon-char { アニメーション: ジグル 3 秒無限イーズインアウト; 変換原点: 中央下; }
最後に、回転量と各キャラクターが揺れ始めるまでの遅延を設定します。 .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.1秒; } .toon-char:nth-child(4n+1) {アニメーション遅延: 0.3秒; } .toon-char:nth-child(4n+2) {アニメーション遅延: 0.5秒; } .toon-char:nth-child(4n+3) {アニメーション遅延: 0.7秒; }
印象に残る1フレーム 漫画のタイトルアーティストは印象を残すために 1 つのフレームを持っており、タイポグラフィーは描いたアートワークと同じくらい重要でした。ウェブ上でも同様です。 適切にデザインされたヘッダーまたはヒーローこの領域には、単に色あせた全幅の背景画像ではなく、明瞭さ、個性、自信が必要です。 いくつかの慎重に選択された CSS プロパティ (シャドウ、ストローク、クリップされた背景、および制限されたアニメーション) を使用すると、同じインパクトを再現できます。私がトゥーン テキストを愛するのは、ノスタルジックだからではなく、そのデザインが意図的だからです。慎重に選択して、小さなトゥーン テキスト タイポグラフィーをデザインにパンチを加えましょう。
