Nachdem ich ein Projekt abgeschlossen hatte, bei dem ich alles über CSS- und SVG-Animationen lernen musste, begann ich mit dem Schreiben dieser Serie über Smashing Animations und „Wie klassische Cartoons modernes CSS inspirieren“. Zum Abschluss dieses Jahres möchte ich Ihnen zeigen, wie Sie mit modernem CSS das Element erstellen, das Toon Titles so wirkungsvoll macht: ihre Typografie. Design des Titel-Artworks In der Stummfilmzeit der 1920er und frühen 1930er Jahre erzeugte die Typografie der Titelkarte eines Films eine Stimmung, bestimmte die Szene und erinnerte das Publikum an die Art von Film, für den es bezahlt hatte.
Cartoon-Titelkarten dienten gleichzeitig als Branding, Stimmung und Inszenierung. In den Anfangsjahren, als die Budgets großer Studios größer waren, waren diese Titelkarten oft illustrativ und malerisch.
Doch als das Fernsehen in den 1950er Jahren boomte, sanken die Budgets und die von Künstlern wie Lawrence „Art“ Goble entworfenen Karten nahmen eine neue visuelle Sprache an, die grafischer, stilisierter und weniger kompliziert wurde. Hinweis: Lawrence „Art“ Goble ist einer der oft übersehenen Helden des amerikanischen Animationsfilms der Mitte des Jahrhunderts. Er arbeitete hauptsächlich für Hanna-Barbera in den einflussreichsten Jahren der 1950er und 1960er Jahre. Goble war kein Charakteranimator. Seine Aufgabe bestand darin, Atmosphäre zu schaffen, also entwarf er Umgebungen für „Flintstones“, „Huckleberry Hound“, „Quick Draw McGraw“ und „Yogi Bear“ sowie die Eröffnungstitelkarten, die den Ton angeben. Seine Titelkarten mit Gemälden und überlagertem Logo prägten den ikonischen Look von Hanna-Barbera. Gobles Kunstwerke für Charaktere wie Quick Draw McGraw und Yogi Bear waren auf kleineren Fernsehbildschirmen wirkungsvoll. Anstatt ein Standbild aus dem Cartoon zu reproduzieren, konzentrierte er sich darauf, eine einzelne, starke Idee – oft als Silhouette – zu präsentieren, die ihr Wesentliches einfing. In „The Buzzin‘ Bear“ fliegt Yogi in einem Hubschrauber vorbei. In „Bear on a Picnic“ hüpft er mit einem Picknickkorb in der Hand davon, und für sein „Prize Fight Fright“ boxt Yogi den Titeltext.
Da es kaum oder gar keine Bewegung gab, auf die man sich verlassen konnte, mussten Gobles Einzelbilder eine Stimmung erzeugen, die Szene bestimmen und eine Geschichte beschreiben. Dazu verwendeten sie flache Farben, grafische Formen und Typografie, die häufig in das Kunstwerk integriert wurde.
Als Designer, die im Web arbeiten, können uns Toon-Titel viel darüber beibringen, wie wir die Persönlichkeit einer Marke vermitteln, einen ersten Eindruck hinterlassen und Erwartungen an die Erfahrung einer Person mit einem Produkt oder einer Website wecken können. Wir können von den Techniken der Künstler lernen, um wirkungsvolle Banner, Landingpage-Header und sogar altmodische Begrüßungsbildschirme zu erstellen. Toon-Titel-Typografie Cartoon-Titelkarten zeigen, wie die Kombination von Schrift und Bild den Schlagkraft liefert, die ein Header oder ein Held braucht. Mit einer Handvoll Textschatten-, Textstrich- und Transformationstricks können Sie mit modernem CSS dieselbe Energie nutzen.
Der Toon-Texttitelgenerator Während ich diesen Artikel schrieb, wurde mir klar, dass es nützlich wäre, ein Tool zum Generieren von Texten zu haben, die den Cartoon-Titeln ähneln, die ich so sehr liebe. Also habe ich eins gemacht. Mit dem My Toon Text Title Generator können Sie mit Farben, Strichen und mehreren Textschatten experimentieren. Sie können die Malreihenfolge anpassen, Buchstabenabstände anwenden, Ihren Text in einer Auswahl von Beispielschriftarten in der Vorschau anzeigen und dann das generierte CSS direkt in Ihre Zwischenablage kopieren, um es in einem Projekt zu verwenden. Toon-Titel-CSS Sie können einfach das vom Toon Text Title Generator bereitgestellte CSS kopieren und einfügen. Aber schauen wir uns genauer an, was es bewirkt. Textschatten Schauen Sie sich die Schrift in diesem Titel aus Augie Doggies Episode „Yuk-Yuk Duck“ an, mit ihren blassgelben Buchstaben und dem dunklen, harten, versetzten Schatten, der sie vom Hintergrund abhebt und die Illusion von Tiefe erzeugt.
Sie wissen wahrscheinlich bereits, dass Textschatten vier Werte akzeptiert: (1) horizontale und (2) vertikale Versätze, (3) Unschärfe und (4) eine Farbe, die einfarbig oder halbtransparent sein kann. Diese Versatzwerte können positiv oder negativ sein, sodass ich „Yuk-Yuk Duck“ mit einem harten Schatten nachbilden kann, der nach unten und rechts gezogen wird: Farbe: #f7f76d; Textschatten: 5px 5px 0 #1e1904;
Andererseits hat dieser „Pint Giant“-Titel mit seinem negativen, halbweichen Schatten eine andere Ausstrahlung: Farbe: #c2a872; Textschatten: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Um zusätzliche Tiefe zu verleihen und interessantere Effekte zu erzielen, kann ich mehrere Schatten überlagern. Für „Let’s Duck Out“ kombiniere ich vier Schatten: Der erste ist ein durchgehender Schatten mit einem negativen horizontalen Versatz, um den Text vom Hintergrund abzuheben, gefolgt von zunehmend weicheren Schatten, um eine Unschärfe um ihn herum zu erzeugen: Farbe: #6F4D80; Textschatten: -5px5px 0 #260e1e, /* Schatten 1 */ 0 0 15px #e9ce96, /* Schatten 2 */ 0 0 30px #e9ce96, /* Schatten 3 */ 0 0 30px #e9ce96; /* Schatten 4 */
Diese Schatten zeigen, dass es bei der Verwendung von Textschatten nicht nur darum geht, Lichteffekte zu erzeugen, sondern dass sie auch dekorativ sein und Persönlichkeit verleihen können. Textstrich Auf vielen Cartoon-Titelkarten sind Buchstaben mit einer fetten Umrandung versehen, die sie vom Hintergrund abheben. Ich kann diesen Effekt mit Textstrich nachbilden. Lange Zeit war diese Eigenschaft nur über das Präfix -webkit- verfügbar, aber das bedeutet auch, dass sie jetzt von allen modernen Browsern unterstützt wird.
Textstrich ist eine Abkürzung für zwei Eigenschaften. Der erste Befehl, Text-Stroke-Width, zeichnet eine Kontur um einzelne Buchstaben, während der zweite Text-Stroke-Color die Farbe steuert. Für „Whatever Goes Pup“ habe ich dem gelben Text einen 4 Pixel großen blauen Strich hinzugefügt: Farbe: #eff0cd; -webkit-text-Stroke: 4px #7890b5; Textstrich: 4px #7890b5;
Striche können besonders nützlich sein, wenn sie mit Schatten kombiniert werden. Deshalb habe ich für „Growing, Growing, Gone“ einen dünnen 3-Pixel-Strich zu einem kaum verschwommenen 1-Pixel-Schatten hinzugefügt, um diesen dreidimensionalen Texteffekt zu erzeugen: Farbe: #fbb999; Textschatten: 3px 5px 1px #5160b1; -webkit-text-Stroke: 3px #984336; Textstrich: 3px #984336;
Farbauftrag Die Verwendung von Text-Stroke führt nicht immer zum erwarteten Ergebnis, insbesondere bei dünneren Buchstaben und dickeren Strichen, da der Browser standardmäßig einen Strich über die Füllung zeichnet. Leider erlaubt mir CSS immer noch nicht, die Strichplatzierung anzupassen, wie ich es oft in Sketch tue. Allerdings verfügt die Eigenschaft „paint-order“ über Werte, die es mir ermöglichen, den Strich hinter und nicht vor der Füllung zu platzieren.
paint-order: Stroke malt zuerst den Strich und dann die Füllung, wohingegen paint-order: fill das Gegenteil bewirkt: Farbe: #fbb999; Farbreihenfolge: füllen; Textschatten: 3px 5px 1px #5160b1; Textstrichfarbe:#984336; Textstrichbreite: 3px;
Ein effektiver Strich sorgt dafür, dass Buchstaben lesbar sind, erhöht das Gewicht und verleiht flachem Text – in Kombination mit Schatten und Farbreihenfolge – echte Präsenz. Hintergründe im Text Viele Cartoon-Titelkarten gehen über die bloße Farbe hinaus, indem sie der Beschriftung Textur, Farbverläufe oder illustrierte Details hinzufügen. Manchmal handelt es sich dabei um eine Textur, manchmal um einen Farbverlauf mit einer subtilen Tonwertverschiebung. Im Web kann ich diesen Effekt nachahmen, indem ich ein Hintergrundbild oder einen Farbverlauf hinter dem Text verwende und ihn dann auf die Form der Buchstaben zuschneide. Dies beruht auf der Zusammenarbeit zweier Eigenschaften: „background-clip: text“ und „text-fill-color: transparent“.
Zuerst wende ich einen Hintergrund hinter dem Text an. Dies kann ein Bitmap- oder Vektorbild oder ein CSS-Verlauf sein. Für dieses Beispiel aus der Quick Draw McGraw-Folge „Baba Bait“ enthält der Titeltext einen subtilen Farbverlauf von oben nach unten von dunkel nach hell: Hintergrund: linear-gradient(0deg, #667b6a, #1d271a);
Als Nächstes schneide ich den Hintergrund auf die Glyphen zu und mache den Text transparent, sodass der Hintergrund durchscheint: -webkit-background-clip: text; -webkit-text-fill-color: transparent;
Mit nur diesen beiden Zeilen wird der Hintergrund nicht mehr hinter den Text gemalt; Stattdessen ist es darin gemalt. Diese Technik funktioniert besonders gut in Kombination mit Strichen und Schatten. Ein abgeschnittener Farbverlauf verleiht dem Schriftzug Farbe und Struktur, ein Strich sorgt für scharfe Kanten und ein Schatten hebt ihn vom Hintergrund ab. Gemeinsam stellen sie mit nur ein wenig CSS den vielschichtigen Look handgemalter Titelkarten nach. Testen Sie abgeschnittenen Text wie immer sorgfältig, da sich Browser-Macken manchmal auf Schatten und Darstellung auswirken können. Text in einzelne Zeichen aufteilen Manchmal möchte ich nicht ein ganzes Wort oder eine Überschrift formatieren. Ich möchte einzelne Buchstaben formatieren – um ein Zeichen an seinen Platz zu bringen, einer Glyphe zusätzliches Gewicht zu verleihen oder einige Buchstaben unabhängig voneinander zu animieren. In einfachem HTML und CSS gibt es dafür nur einen zuverlässigen Weg: jedes Zeichen in ein eigenes span-Element einschließen. Ich könnte das manuell machen, aber das wäre fragil, schwer zu warten und würde schnell auseinanderfallen, wenn sich die Kopie ändert. Wenn ich stattdessen eine Kontrolle pro Buchstabe benötige, verwende ich eine Textaufteilungsbibliothek wie splt.js (obwohl auch andere Lösungen verfügbar sind). Dabei wird ein Textknoten verwendet und automatisch Wörter oder Zeichen umbrochen, was mir zusätzliche Hooks zum Animieren und Stylen gibt, ohne mein Markup durcheinander zu bringen. Es ist ein Ansatz, der dafür sorgt, dass mein HTML lesbar und semantisch bleibt und mir gleichzeitig die fein abgestimmte Kontrolle gibt, die ich brauche, um die unebene, charaktervolle Typografie nachzubilden, die man in klassischen Cartoon-Titelkarten sieht. Allerdings kommt dieser Ansatz mitEinschränkungen hinsichtlich der Barrierefreiheit, da die meisten Bildschirmleseprogramme Textknoten der Reihe nach lesen. Also das:
Hum Sweet Hum
…liest sich wie erwartet: Summen, süßes Summen
Aber das hier:
H u m
…kann je nach Browser und Screenreader unterschiedlich interpretiert werden. Einige werden die Buchstaben verketten und die Wörter richtig lesen. Andere machen möglicherweise eine Pause zwischen den Buchstaben, was im schlimmsten Fall wie folgt klingen könnte: „H…“ „U…“ „M…“
Leider liefern einige Splitting-Lösungen nicht immer ein zugängliches Ergebnis, daher habe ich meinen eigenen Text-Splitter, splinter.js, geschrieben, der sich derzeit in der Beta-Phase befindet. Einzelne Buchstaben umwandeln Um meinen Toon Text Splitter zu aktivieren, füge ich dem Element, das ich teilen möchte, ein Datenattribut hinzu:
Hum Sweet Hum
Zuerst trennt mein Skript jedes Wort in einzelne Buchstaben und verpackt sie in ein span-Element mit angewendeten Klassen- und ARIA-Attributen:
Das Skript übernimmt dann den ursprünglichen Inhalt des Split-Elements und fügt ihn als Aria-Attribut hinzu, um die Barrierefreiheit aufrechtzuerhalten:
Wenn diese Klassenattribute angewendet werden, kann ich dann einzelne Zeichen nach Belieben gestalten.
Zum Beispiel möchte ich für „Hum Sweet Hum“ nachahmen, wie sich die Buchstaben von der Grundlinie entfernen. Nachdem ich meinen Toon Text Splitter verwendet hatte, habe ich vier verschiedene Übersetzungswerte mithilfe mehrerer :nth-child-Selektoren angewendet, um ein halbzufälliges Erscheinungsbild zu erstellen: /* 4., 8., 12.... */ .toon-char:nth-child(4n) { Translate: 0 -8px; } /* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { Translate: 0 -4px; } /* 2., 6., 10.... */ .toon-char:nth-child(4n+2) { Translate: 0 4px; } /* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { Translate: 0 8px; }
Aber Translate ist nur eine Eigenschaft, die ich zum Transformieren meines Toon-Textes verwenden kann.
Ich könnte diese einzelnen Charaktere auch drehen, um einen noch chaotischeren Look zu erzielen: /* 4., 8., 12.... */ .toon-line .toon-char:nth-child(4n) { rotieren: -4deg; } /* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { rotieren: -8deg; } /* 2., 6., 10.... */ .toon-char:nth-child(4n+2) { rotieren: 4deg; } /* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { rotieren: 8deg; }
Aber Translate ist nur eine Eigenschaft, die ich zum Transformieren meines Toon-Textes verwenden kann. Ich könnte diese einzelnen Charaktere auch drehen, um einen noch chaotischeren Look zu erzielen: /* 4., 8., 12.... */ .toon-line .toon-char:nth-child(4n) { drehen: -4 Grad; }
/* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { drehen: -8 Grad; }
/* 2., 6., 10.... */ .toon-char:nth-child(4n+2) { drehen: 4 Grad; }
/* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { drehen: 8 Grad; }
Und natürlich könnte ich Animationen hinzufügen, um diese Charaktere zu bewegen und meine Titel im Toon-Textstil zum Leben zu erwecken. Zuerst habe ich eine Keyframe-Animation erstellt, die die Charaktere dreht:
@keyframes wackeln { 0 %, 100 % { transform: rotate(var(--base-rotate, 0deg)); } 25 % { transform: rotate(calc(var(--base-rotate, 0deg) + 3deg)); } 50 % { transform: rotate(calc(var(--base-rotate, 0deg) - 2deg)); } 75 % { transform: rotate(calc(var(--base-rotate, 0deg) + 1deg)); } }
Bevor Sie es auf die von meinem Toon Text Splitter erstellten Span-Elemente anwenden: .toon-char { Animation: Wackeln Sie 3 Sekunden lang mit unendlichem Easy-In-Out; Transformationsursprung: Mitte unten; }
Und schließlich legen Sie den Rotationsbetrag und eine Verzögerung fest, bevor jeder Charakter zu wackeln beginnt: .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) { Animationsverzögerung: 0,1 s; } .toon-char:nth-child(4n+1) { Animationsverzögerung: 0,3 s; } .toon-char:nth-child(4n+2) { Animationsverzögerung: 0,5 s; } .toon-char:nth-child(4n+3) { Animationsverzögerung: 0,7 s; }
Ein Rahmen, um einen Eindruck zu hinterlassen Cartoon-Titelkünstler hatten einen Rahmen, um Eindruck zu hinterlassen, und ihre Typografie war genauso wichtig wie das Kunstwerk, das sie malten. Dasselbe gilt auch im Internet. Ein gut gestalteter Header oder HeldDer Bereich benötigt Klarheit, Charakter und Selbstvertrauen – nicht nur ein verblasstes Hintergrundbild in voller Breite. Mit ein paar sorgfältig ausgewählten CSS-Eigenschaften – Schatten, Striche, beschnittene Hintergründe und etwas zurückhaltende Animation – können wir denselben Effekt erzielen. Ich liebe Toon-Texte nicht, weil ich nostalgisch bin, sondern weil das Design gewollt ist. Treffen Sie bewusste Entscheidungen und verleihen Sie Ihren Designs mit ein wenig toonierter Texttypografie mehr Schlagkraft.
