Après avoir terminé un projet qui m'a demandé d'apprendre tout ce que je pouvais sur les animations CSS et SVG, j'ai commencé à écrire cette série sur Smashing Animations et « Comment les dessins animés classiques inspirent le CSS moderne ». Pour terminer cette année, je veux vous montrer comment utiliser le CSS moderne pour créer cet élément qui rend les titres Toon si percutants : leur typographie. Conception de l’illustration du titre À l’époque du cinéma muet des années 1920 et du début des années 30, la typographie du titre d’un film créait une ambiance, plantait le décor et rappelait au public le type de film qu’il avait payé pour voir.
Les cartes de titre de dessins animés étaient également à la fois une image de marque, une ambiance et une mise en scène. Dans les premières années, lorsque les budgets des grands studios étaient plus importants, ces cartes de titre étaient souvent illustratives et picturales.
Mais lorsque la télévision a explosé dans les années 1950, les budgets ont chuté et les cartes conçues par des artistes comme Lawrence « Art » Goble ont adopté un nouveau langage visuel, devenant plus graphique, stylisé et moins complexe. Remarque : Lawrence « Art » Goble est l’un des héros souvent négligés de l’animation américaine du milieu du siècle. Il a principalement travaillé pour Hanna-Barbera au cours des années les plus influentes des années 1950 et 1960. Goble n'était pas un animateur de personnages. Son rôle était de créer une atmosphère, c'est pourquoi il a conçu des environnements pour The Flintstones, Huckleberry Hound, Quick Draw McGraw et Yogi Bear, ainsi que les cartes de titre d'ouverture qui donnent le ton. Ses cartes de titre, comportant des peintures avec un logo superposé, ont contribué à définir le look emblématique d'Hanna-Barbera. Les illustrations de Goble pour des personnages tels que Quick Draw McGraw et Yogi Bear étaient efficaces sur des écrans de télévision plus petits. Plutôt que de reproduire une image fixe du dessin animé, il s’est concentré sur la présentation d’une idée unique et forte – souvent sous forme de silhouette – qui en capturait l’essence. Dans « The Buzzin’ Bear », Yogi passe dans un hélicoptère. Il rebondit, panier pique-nique à la main, dans « Bear on a Picnic » et pour son « Prize Fight Fright », Yogi encadre le texte du titre.
Avec peu ou pas de mouvement sur lequel s’appuyer, les images uniques de Goble devaient créer une ambiance, planter le décor et décrire une histoire. Ils l'ont fait en utilisant des aplats de couleurs, des formes graphiques et une typographie fréquemment intégrées à l'œuvre d'art.
En tant que concepteurs travaillant sur le Web, les titres de dessins animés peuvent nous en apprendre beaucoup sur la façon de transmettre la personnalité d’une marque, de faire une première impression et de définir les attentes quant à l’expérience d’une personne utilisant un produit ou un site Web. Nous pouvons apprendre des techniques des artistes pour créer des bannières efficaces, des en-têtes de page de destination et même de bons vieux écrans de démarrage. Typographie du titre Toon Les cartes de titre de dessins animés montrent comment la fusion des caractères et des images donne le punch dont un en-tête ou un héros a besoin. Avec une poignée d'astuces d'ombre de texte, de trait de texte et de transformation, le CSS moderne vous permet d'exploiter cette même énergie.
Le générateur de titres de texte Toon Au cours de la rédaction de cet article, j'ai réalisé qu'il serait utile de disposer d'un outil permettant de générer du texte dans le style des titres de dessins animés que j'aime tant. Alors j'en ai fait un. My Toon Text Title Generator vous permet d'expérimenter avec des couleurs, des traits et plusieurs ombres de texte. Vous pouvez ajuster l'ordre de peinture, appliquer l'espacement des lettres, prévisualiser votre texte dans une sélection d'exemples de polices, puis copier le CSS généré directement dans votre presse-papiers pour l'utiliser dans un projet. Titre du dessin animé CSS Vous pouvez simplement copier-coller le CSS fourni par le générateur de titres de texte Toon. Mais regardons de plus près ce que cela fait. Ombre du texte Regardez le type de ce titre de l'épisode « Yuk-Yuk Duck » d'Augie Doggie, avec ses lettres jaune pâle et son ombre sombre, dure et décalée qui le soulève de l'arrière-plan et crée l'illusion de profondeur.
Vous savez probablement déjà que text-shadow accepte quatre valeurs : (1) des décalages horizontaux et (2) verticaux, (3) un flou et (4) une couleur qui peut être unie ou semi-transparente. Ces valeurs de décalage peuvent être positives ou négatives, je peux donc reproduire « Yuk-Yuk Duck » en utilisant une ombre dure tirée vers le bas et vers la droite : couleur : #f7f76d ; texte-ombre : 5px 5px 0 #1e1904 ;
En revanche, ce titre « Pint Giant » a une sensation différente avec son ombre semi-douce négative : couleur : #c2a872 ; texte-ombre : -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Pour ajouter de la profondeur et créer des effets plus intéressants, je peux superposer plusieurs ombres. Pour « Let's Duck Out », je combine quatre ombres : la première est une ombre unie avec un décalage horizontal négatif pour soulever le texte de l'arrière-plan, suivie d'ombres de plus en plus douces pour créer un flou autour : couleur : #6F4D80 ; texte-ombre : -5px5px 0 #260e1e, /* Ombre 1 */ 0 0 15px #e9ce96, /* Ombre 2 */ 0 0 30px #e9ce96, /* Ombre 3 */ 0 0 30px #e9ce96; /* Ombre 4 */
Ces ombres montrent que l’utilisation de text-shadow ne consiste pas seulement à créer des effets d’éclairage, car elles peuvent également être décoratives et ajouter de la personnalité. Trait de texte De nombreuses cartes de titre de dessins animés comportent des lettres avec un contour gras qui les font ressortir de l'arrière-plan. Je peux recréer cet effet en utilisant un trait de texte. Pendant longtemps, cette propriété n'était disponible que via un préfixe -webkit-, mais cela signifie également qu'elle est désormais prise en charge par les navigateurs modernes.
Text-Stroke est un raccourci pour deux propriétés. Le premier, texte-trait-largeur, dessine un contour autour des lettres individuelles, tandis que le second, texte-trait-couleur, contrôle sa couleur. Pour « Whatever Goes Pup », j'ai ajouté un trait bleu de 4 px au texte jaune : couleur : #eff0cd ; -webkit-text-AVC : 4px #7890b5 ; texte-trait : 4px #7890b5 ;
Les traits peuvent être particulièrement utiles lorsqu'ils sont combinés avec des ombres, donc pour « Growing, Growing, Gone », j'ai ajouté un fin trait de 3 pixels à une ombre de 1 pixel à peine floue pour créer cet effet de texte en trois dimensions : couleur : #fbb999 ; texte-ombre : 3px 5px 1px #5160b1 ; -webkit-text-AVC : 3px #984336 ; texte-trait : 3px #984336 ;
Commande de peinture L'utilisation de texte-trait ne produit pas toujours le résultat attendu, en particulier avec des lettres plus fines et des traits plus épais, car par défaut le navigateur dessine un trait sur le remplissage. Malheureusement, CSS ne me permet toujours pas d'ajuster le placement des traits comme je le fais souvent dans Sketch. Cependant, la propriété paint-order a des valeurs qui me permettent de placer le trait derrière, plutôt que devant, le remplissage.
paint-order: trait peint d'abord le trait, puis le remplissage, tandis que paint-order: fill fait le contraire : couleur : #fbb999 ; ordre de peinture : remplir ; texte-ombre : 3px 5px 1px #5160b1 ; couleur du contour du texte :#984336 ; largeur du trait du texte : 3 px ;
Un trait efficace maintient les lettres lisibles, ajoute du poids et, lorsqu'il est combiné avec des ombres et un ordre de peinture, donne une réelle présence au texte plat. Arrière-plans à l'intérieur du texte De nombreuses cartes de titre de dessins animés vont au-delà des couleurs plates en ajoutant de la texture, des dégradés ou des détails illustrés au lettrage. Parfois, il s’agit d’une texture, d’autres fois, d’un dégradé avec un subtil changement de ton. Sur le Web, je peux recréer cet effet en utilisant une image d'arrière-plan ou un dégradé derrière le texte, puis en le découpant à la forme des lettres. Cela repose sur deux propriétés fonctionnant ensemble : background-clip : text et text-fill-color : transparent.
Tout d’abord, j’applique un arrière-plan derrière le texte. Il peut s'agir d'une image bitmap ou vectorielle ou d'un dégradé CSS. Pour cet exemple de l'épisode « Baba Bait » de Quick Draw McGraw, le texte du titre comprend un subtil dégradé haut-bas du foncé au clair : arrière-plan : dégradé linéaire (0deg, #667b6a, #1d271a) ;
Ensuite, je découpe cet arrière-plan sur les glyphes et je rends le texte transparent pour que l'arrière-plan soit visible : -webkit-background-clip : texte ; -webkit-text-fill-color : transparent ;
Avec seulement ces deux lignes, le fond n’est plus peint derrière le texte ; au lieu de cela, il est peint à l’intérieur. Cette technique fonctionne particulièrement bien lorsqu’elle est combinée avec des traits et des ombres. Un dégradé écrêté donne au lettrage couleur et texture, un trait maintient ses bords nets et une ombre le surélève de l'arrière-plan. Ensemble, ils recréent l'aspect superposé des cartes de titre peintes à la main en utilisant rien de plus qu'un peu de CSS. Comme toujours, testez soigneusement le texte découpé, car les bizarreries du navigateur peuvent parfois affecter les ombres et le rendu. Diviser le texte en caractères individuels Parfois, je ne veux pas styliser un mot ou un titre entier. Je souhaite styliser des lettres individuelles – pour mettre un personnage en place, donner un poids supplémentaire à un glyphe ou animer quelques lettres indépendamment. En HTML et CSS simples, il n'existe qu'un seul moyen fiable de le faire : envelopper chaque caractère dans son propre élément span. Je pourrais le faire manuellement, mais ce serait fragile, difficile à maintenir et s'effondrerait rapidement lorsque la copie serait modifiée. Au lieu de cela, lorsque j'ai besoin d'un contrôle par lettre, j'utilise une bibliothèque de fractionnement de texte comme splt.js (bien que d'autres solutions soient disponibles). Cela prend un nœud de texte et enveloppe automatiquement les mots ou les caractères, me donnant des crochets supplémentaires pour animer et styliser sans gâcher mon balisage. C’est une approche qui maintient mon HTML lisible et sémantique, tout en me donnant le contrôle précis dont j’ai besoin pour recréer la typographie inégale et pleine de caractère que vous voyez dans les cartes de titre de dessins animés classiques. Cependant, cette approche s’accompagnemises en garde en matière d'accessibilité, car la plupart des lecteurs d'écran lisent les nœuds de texte dans l'ordre. Donc ceci :
Hum doux hum
… se lit comme vous vous en doutez : Hum doux hum
Mais ceci :
H vous m
…peut être interprété différemment selon le navigateur et le lecteur d’écran. Certains enchaîneront les lettres et liront les mots correctement. D'autres peuvent faire une pause entre les lettres, ce qui, dans le pire des cas, pourrait ressembler à : «H…» «U…» «M…»
Malheureusement, certaines solutions de fractionnement ne fournissent pas un résultat toujours accessible. J'ai donc écrit mon propre séparateur de texte, splinter.js, qui est actuellement en version bêta. Transformer des lettres individuelles Pour activer mon Toon Text Splitter, j'ajoute un attribut data- à l'élément que je souhaite diviser :
Hum Doux Hum
Tout d'abord, mon script sépare chaque mot en lettres individuelles et les enveloppe dans un élément span avec les attributs class et ARIA appliqués :
Le script prend ensuite le contenu initial de l'élément divisé et l'ajoute en tant qu'attribut aria pour aider à maintenir l'accessibilité :
Une fois ces attributs de classe appliqués, je peux ensuite styliser des caractères individuels à ma guise.
Par exemple, pour « Hum Sweet Hum », je souhaite reproduire la façon dont ses lettres s'éloignent de la ligne de base. Après avoir utilisé mon Toon Text Splitter, j'ai appliqué quatre valeurs de traduction différentes en utilisant plusieurs sélecteurs :nth-child pour créer un aspect semi-aléatoire : /* 4ème, 8ème, 12ème... */ .toon-char:nth-child(4n) { traduction : 0 -8px ; } /* 1er, 5ème, 9ème... */ .toon-char:nth-child(4n+1) { traduction : 0 -4px ; } /* 2ème, 6ème, 10ème... */ .toon-char:nth-child(4n+2) { traduire : 0 4px ; } /* 3ème, 7ème, 11ème... */ .toon-char:nth-child(4n+3) { traduire : 0 8px ; }
Mais traduire n'est qu'une propriété que je peux utiliser pour transformer mon texte de dessin animé.
Je pourrais également faire pivoter ces personnages individuels pour un look encore plus chaotique : /* 4ème, 8ème, 12ème... */ .toon-line .toon-char:nth-child(4n) { rotation : -4deg ; } /* 1er, 5ème, 9ème... */ .toon-char:nth-child(4n+1) { rotation : -8deg ; } /* 2ème, 6ème, 10ème... */ .toon-char:nth-child(4n+2) { rotation : 4deg ; } /* 3ème, 7ème, 11ème... */ .toon-char:nth-child(4n+3) { rotation : 8deg ; }
Mais traduire n'est qu'une propriété que je peux utiliser pour transformer mon texte de dessin animé. Je pourrais également faire pivoter ces personnages individuels pour un look encore plus chaotique : /* 4ème, 8ème, 12ème... */ .toon-line .toon-char:nth-child(4n) { rotation : -4 degrés ; }
/* 1er, 5ème, 9ème... */ .toon-char:ntième-enfant(4n+1) { rotation : -8 degrés ; }
/* 2ème, 6ème, 10ème... */ .toon-char:ntième-enfant(4n+2) { rotation : 4 degrés ; }
/* 3ème, 7ème, 11ème... */ .toon-char:ntième-enfant(4n+3) { rotation : 8 degrés ; }
Et, bien sûr, je pourrais ajouter des animations pour faire bouger ces personnages et donner vie à mes titres de style texte toon. Tout d'abord, j'ai créé une animation d'images clés qui fait pivoter les personnages :
@keyframes tremble { 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)); } }
Avant de l'appliquer aux éléments span créés par mon Toon Text Splitter : .toon-char { animation : jiggle 3s, facilité d'entrée et de sortie infinie ; transformation-origine : centre en bas ; }
Et enfin, définir le degré de rotation et un délai avant que chaque personnage ne commence à trembler : .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) { délai d'animation : 0,1 s ; } .toon-char:nth-child(4n+1) { délai d'animation : 0,3 s ; } .toon-char:nth-child(4n+2) { délai d'animation : 0,5 s ; } .toon-char:nth-child(4n+3) { délai d'animation : 0,7 s ; }
Un cadre pour faire bonne impression Les artistes des dessins animés disposaient d’un seul cadre pour faire bonne impression, et leur typographie était aussi importante que l’œuvre d’art qu’ils peignaient. La même chose est vraie sur le Web. Un en-tête ou un héros bien conçula zone a besoin de clarté, de caractère et de confiance – pas simplement d’une image d’arrière-plan pleine largeur délavée. Avec quelques propriétés CSS soigneusement choisies (ombres, traits, arrière-plans découpés et animations sobres) nous pouvons recréer le même impact. J'aime les textes de dessins animés non pas parce que je suis nostalgique, mais parce que leur conception est intentionnelle. Faites des choix délibérés et laissez une petite typographie de texte ajouter du punch à vos créations.
