Miután befejeztem egy projektet, amelynek során mindent meg kellett tanulnom a CSS-ről és az SVG-animációkról, elkezdtem írni ezt a sorozatot a Smashing Animationsről és a „Hogyan inspirálják a klasszikus rajzfilmek a modern CSS-t”. Az idei év zárásaként szeretném megmutatni, hogyan használhatja a modern CSS-t annak az elemnek a létrehozására, amely a Toon Titles-t olyan hatásossá teszi: a tipográfiáját. Cím Artwork Design Az 1920-as évek és a '30-as évek eleji néma korszakban egy film címlapjának tipográfiája hangulatot teremtett, színteret adott, és emlékeztette a közönséget arra a filmtípusra, amiért fizetett.
A rajzfilmek címlapjai szintén márkajelzést, hangulatot és jelenetbeállítást jelentettek, mindezt egyben. A korai években, amikor a nagyobb stúdiók költségvetése nagyobb volt, ezek a címlapok gyakran illusztratívak és festőiek voltak.
De amikor az 1950-es években fellendült a televíziózás, a költségvetések csökkentek, és az olyan művészek által tervezett kártyák, mint a Lawrence „Art” Goble, új vizuális nyelvezetet vettek fel, grafikusabbá, stilizáltabbá és kevésbé bonyolulttá váltak. Megjegyzés: Lawrence „Art” Goble a század közepi amerikai animáció egyik gyakran figyelmen kívül hagyott hőse. Elsősorban a Hanna-Barberának dolgozott annak legbefolyásosabb éveiben, az 1950-es és 1960-as években. Goble nem volt karakteranimátor. Feladata az volt, hogy légkört teremtsen, ezért a The Flintstones, a Huckleberry Hound, a Quick Draw McGraw és a Yogi Bear számára tervezett környezeteket, valamint a nyitó címkártyákat, amelyek megadták az alaphangot. Címlapjai, amelyeken logóval ellátott festmények láthatók, segítettek meghatározni Hanna-Barbera ikonikus megjelenését. Goble olyan karakterekre készített grafikája, mint a Quick Draw McGraw és a Yogi Bear, hatékony volt a kisebb tévéképernyőkön. Ahelyett, hogy egy állóképet reprodukált volna a rajzfilmből, egyetlen, erős ötlet bemutatására összpontosított – gyakran sziluettben –, amely megragadja annak lényegét. A „The Buzzin’ Bear” című filmben Yogi zümmög egy helikopteren. Elpattan, pic-a-nic kosárral a kezében, a „Bear on a Picnic”-ben, és a „Prize Fight Fright” című filmben Yogi bedobozza a címszöveget.
Alig, vagy egyáltalán nem lehetett támaszkodni a mozgásra, Goble egyetlen képkockáinak hangulatot kellett teremteniük, a jelenetet meg kellett határozniuk, és egy történetet kellett leírniuk. Ezt lapos színekkel, grafikus formákkal és tipográfiával tették, amelyet gyakran integráltak a műalkotásba.
Mint a weben dolgozó tervezők, a szalagcímek rengeteget megtanítanak nekünk arra, hogyan közvetítsük a márka személyiségét, hogyan keltsünk első benyomást, és hogyan állíthatunk fel elvárásokat valakinek a termék vagy webhely használatával kapcsolatos tapasztalataival kapcsolatban. Tanulhatunk a művészek technikáiból, amelyek segítségével hatékony bannereket, nyitóoldali fejlécet és még jómódú nyitóképernyőket is készíthetünk. Toon Cím tipográfia A rajzfilmek címkártyái megmutatják, hogy a típus és a kép összevonása hogyan adja meg a fejlécnek vagy a hősnek szükséges ütést. Egy maroknyi szövegárnyékolási, szövegvonási és átalakítási trükkel a modern CSS lehetővé teszi, hogy ugyanazt az energiát használja ki.
A Toon szövegcímgenerátor A cikk írása közben rájöttem, hogy hasznos lenne egy eszköz a szöveg létrehozásához, amely olyan stílusú, mint az általam annyira kedvelt rajzfilmcímek. Szóval csináltam egyet. A My Toon szövegcímgenerátorral kísérletezhet a színekkel, vonásokkal és több szövegárnyékkal. Módosíthatja a festési sorrendet, alkalmazhat betűközt, megtekintheti a szöveg előnézetét egy kiválasztott minta betűtípussal, majd a generált CSS-t közvetlenül a vágólapra másolhatja, hogy egy projektben felhasználhassa. Toon Cím CSS Egyszerűen másolja és illessze be azt a CSS-t, amelyet a Toon Text Title Generator biztosít Önnek. De nézzük meg közelebbről, mit csinál. Szöveg árnyéka Nézze meg az ebben a címben szereplő típust Augie Doggie „Yuk-Yuk Duck” című epizódjából, halványsárga betűivel és sötét, kemény, eltolt árnyékával, amely kiemeli a háttérből, és a mélység illúzióját kelti.
Valószínűleg már tudja, hogy a text-shadow négy értéket fogad el: (1) vízszintes és (2) függőleges eltolás, (3) elmosódás és (4) szín, amely lehet tömör vagy félig átlátszó. Ezek az eltolási értékek lehetnek pozitívak vagy negatívak, így meg tudom ismételni a „Yuk-Yuk Duck”-t egy lefelé és jobbra húzott kemény árnyékkal: szín: #f7f76d; text-shadow: 5px 5px 0 #1e1904;
Másrészt ennek a „Pint Giant” címnek más hangulata van a negatív félig lágy árnyékával: szín: #c2a872; szöveg-árnyék: -7 képpont 5 képpont 0 #b100e, 0 -5 képpont 10 képpont #546c6f;
További mélység hozzáadásához és érdekesebb hatások létrehozásához több árnyékot is rétegezhetek. A „Let’s Duck Out” esetében négy árnyékot kombinálok: az első egy tömör árnyék negatív vízszintes eltolással, hogy kiemelje a szöveget a háttérből, majd fokozatosan lágyabb árnyékok, hogy elmosódást hozzanak létre körülötte: szín: #6F4D80; szöveg-árnyék: -5 képpont5px 0 #260e1e, /* Shadow 1 */ 0 0 15px #e9ce96, /* Shadow 2 */ 0 0 30px #e9ce96, /* Shadow 3 */ 0 0 30px #e9ce96; /* Shadow 4 */
Ezek az árnyékok azt mutatják, hogy a szöveg-árnyék használata nem csak a fényhatások létrehozását jelenti, hanem dekoratívak is lehetnek, és egyéniséget adhatnak. Szöveg Stroke Sok rajzfilm címlapján vastag körvonalú betűk láthatók, amelyek kiemelik a háttérből. Ezt az effektust szövegvonásokkal újra létrehozhatom. Ez a tulajdonság sokáig csak a -webkit- előtaggal volt elérhető, de ez azt is jelenti, hogy a modern böngészők már támogatják.
A text-stroke két tulajdonság rövidítése. Az első, a text-stroke-width kontúrt rajzol az egyes betűk köré, míg a második, a szövegvonás-szín szabályozza a színét. A „Whatever Goes Pup” esetében egy 4 képpontos kék körvonalat adtam a sárga szöveghez: szín: #eff0cd; -webkit-text-stroke: 4px #7890b5; szövegvonás: 4px #7890b5;
A körvonalak különösen hasznosak lehetnek, ha árnyékokkal kombinálják őket, ezért a „Growing, Growing, Gone” esetében egy vékony 3 képpontos körvonalat adtam az alig elmosódott 1 képpontos árnyékhoz, hogy létrehozzam ezt a háromdimenziós szöveghatást: szín: #fbb999; text-shadow: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; szövegvonás: 3px #984336;
Festékrendelés A szövegvonás használata nem mindig hozza meg a várt eredményt, különösen vékonyabb betűk és vastagabb körvonalak esetén, mivel a böngésző alapértelmezés szerint a kitöltés fölé húz egy körvonalat. Sajnos a CSS még mindig nem teszi lehetővé, hogy módosítsam a körvonalak elhelyezését, ahogy azt a Sketchben gyakran teszem. A festési sorrend tulajdonságnak azonban vannak olyan értékei, amelyek lehetővé teszik, hogy a körvonalat a kitöltés mögé, ne pedig a kitöltés elé helyezzem.
paint-order: a körvonal először a körvonalat festi, majd a kitöltést, míg a paint-order: fill fordítva: szín: #fbb999; festék-rend: fill; text-shadow: 3px 5px 1px #5160b1; text-stroke-color:#984336; text-stroke-width: 3px;
A hatékony körvonal olvashatóvá teszi a betűket, növeli a súlyt, és – árnyékokkal és festési sorrenddel kombinálva – valódi jelenlétet kölcsönöz a lapos szövegnek. Háttér a szöveg belsejében Sok rajzfilm címlapja túlmutat a lapos színeken, mivel textúrát, színátmeneteket vagy illusztrált részleteket ad a feliratokhoz. Néha ez egy textúra, máskor pedig egy színátmenet, finom tónuseltolódással. A weben úgy tudom újra létrehozni ezt a hatást, hogy háttérképet vagy színátmenetet használok a szöveg mögött, majd a betűk formájára vágom. Ez két tulajdonságon múlik, amelyek együtt működnek: background-clip: text és text-fill-color: átlátszó.
Először hátteret alkalmazok a szöveg mögé. Ez lehet bittérkép vagy vektorkép vagy CSS gradiens. Ebben a példában a Quick Draw McGraw „Baba Bait” epizódjából a címszöveg finom felső-alsó színátmenetet tartalmaz a sötéttől a világosig: háttér: linear-gradient(0deg, #667b6a, #1d271a);
Ezután a hátteret a karakterjelekhez vágom, és átlátszóvá teszem a szöveget, hogy a háttér átlátszódjon: -webkit-background-clip: szöveg; -webkit-text-fill-color: átlátszó;
Csak ezzel a két sorral a háttér már nem festődik a szöveg mögé; ehelyett benne van festve. Ez a technika különösen jól működik vonásokkal és árnyékokkal kombinálva. A kivágott színátmenet színt és textúrát ad a betűknek, a körvonal élesen tartja a széleit, az árnyék pedig kiemeli a háttérből. Együtt újrateremtik a kézzel festett címlapok réteges megjelenését egy kis CSS segítségével. Mint mindig, alaposan tesztelje a kivágott szöveget, mivel a böngésző furcsaságai néha befolyásolhatják az árnyékokat és a megjelenítést. Szöveg felosztása egyes karakterekre Néha nem akarok egy egész szót vagy címsort stílusozni. Szeretnék egyedi betűket stílusozni – a helyére tolni egy karaktert, extra súlyt adni egy karakterjelnek, vagy egymástól függetlenül animálni néhány betűt. A sima HTML-ben és CSS-ben ennek egyetlen megbízható módja van: minden karakter becsomagolása a saját span elemébe. Megtehetném manuálisan is, de ez törékeny lenne, nehezen karbantartható, és gyorsan szétesne, ha a másolat megváltozik. Ehelyett, ha betűnkénti vezérlésre van szükségem, egy szövegfelosztó könyvtárat használok, például az splt.js-t (bár más megoldások is elérhetők). Ez egy szövegcsomópontot vesz fel, és automatikusan tördeli a szavakat vagy a karaktereket, így további akasztókat biztosít az animációhoz és stílushoz anélkül, hogy elrontanám a jelölést. Ez egy olyan megközelítés, amely olvashatóan és szemantikusan tartja a HTML-emet, miközben megadja nekem azt a finom irányítást, amelyre szükségem van ahhoz, hogy újra létrehozzam a klasszikus rajzfilmek címlapjain látható egyenetlen, karakteres tipográfiát. Ez a megközelítés azonban együtt jára kisegítő lehetőségekre vonatkozó figyelmeztetések, mivel a legtöbb képernyőolvasó sorrendben olvassa be a szöveges csomópontokat. Szóval ez:
Hum, édes zúgás
…a várakozásnak megfelelően olvas: Hum Sweet Hum
De ez:
H u m
…böngészőtől és képernyőolvasótól függően eltérően értelmezhető. Néhányan összefűzik a betűket, és helyesen olvassák el a szavakat. Mások szünetet tarthatnak a betűk között, ami a legrosszabb esetben így hangozhat: „H…” „U…” „M…”
Sajnos egyes felosztási megoldások nem hoznak mindig elérhető eredményt, ezért megírtam a saját szövegelosztómat, a splinter.js-t, amely jelenleg béta állapotban van. Egyéni levelek átalakítása A Toon Text Splitter aktiválásához hozzáadok egy data-attribútumot a felosztani kívánt elemhez:
Hum Sweet Hum
Először is, a szkriptem az egyes szavakat külön betűkre választja, és egy span elembe csomagolja őket osztály és ARIA attribútumokkal:
A szkript ezután felveszi az osztott elem kezdeti tartalmát, és hozzáadja azt aria attribútumként a hozzáférhetőség fenntartása érdekében:
Ha ezeket az osztályattribútumokat alkalmaztam, akkor az egyes karaktereket tetszés szerint stílusozhatom.
Például a „Hum Sweet Hum” esetében szeretném megismételni, hogyan tolódnak el a betűi az alapvonaltól. A Toon Text Splitter használata után négy különböző fordítási értéket alkalmaztam több :nth-child választó segítségével, hogy félig véletlenszerű megjelenést hozzak létre: /* 4., 8., 12.... */ .toon-char:nth-child(4n) { fordítás: 0 -8px; } /* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { fordítás: 0 -4px; } /* 2., 6., 10.... */ .toon-char:nth-child(4n+2) { fordítás: 0 4px; } /* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { fordítás: 0 8px; }
De a fordítás csak egy tulajdonság, amellyel átalakíthatom a szövegemet.
Az egyes karaktereket el is forgathatnám a még kaotikusabb megjelenés érdekében: /* 4., 8., 12.... */ .toon-line .toon-char:nth-child(4n) { rotate: -4deg; } /* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { rotate: -8deg; } /* 2., 6., 10.... */ .toon-char:nth-child(4n+2) { forgatás: 4 fok; } /* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { forgatás: 8 fok; }
De a fordítás csak egy tulajdonság, amellyel átalakíthatom a szövegemet. Az egyes karaktereket el is forgathatnám a még kaotikusabb megjelenés érdekében: /* 4., 8., 12.... */ .toon-line .toon-char:nth-child(4n) { forgatás: -4 fok; }
/* 1., 5., 9.... */ .toon-char:nth-child(4n+1) { forgatás: -8 fok; }
/* 2., 6., 10.... */ .toon-char:nth-child(4n+2) { forgatás: 4 fok; }
/* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { forgatás: 8 fok; }
És természetesen animációkat is hozzáadhatok, hogy megmozgassam ezeket a karaktereket, és életre keltsem a szövegstílusú címeimet. Először létrehoztam egy kulcskép-animációt, amely forgatja a karaktereket:
@keyframes jiggle { 0%, 100% { transzformáció: rotate(var(--alap-forgatás, 0deg)); } 25% { transzformáció: rotate(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { transzformáció: rotate(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { transzformáció: rotate(calc(var(--base-rotate, 0deg) + 1deg)); } }
Mielőtt alkalmazná a Toon Text Splitter által létrehozott span elemekre: .toon-char { animáció: jiggle 3s végtelen könnyű be-ki; transzformációs eredet: középső alsó; }
És végül, állítsa be a forgatás mértékét és a késleltetést, mielőtt az egyes karakterek elkezdenek mozogni: .toon-char:nth-child(4n) { --base-rotate: -2deg; } .toon-char:nth-child(4n+1) { --alap-forgatás: -4 fok; } .toon-char:nth-child(4n+2) { --alap-forgatás: 2 fok; } .toon-char:nth-child(4n+3) { --alap-forgatás: 4 fok; }
.toon-char:nth-child(4n) { animáció-késleltetés: 0,1 s; } .toon-char:nth-child(4n+1) { animáció-késleltetés: 0,3 s; } .toon-char:nth-child(4n+2) { animáció-késleltetés: 0,5 s; } .toon-char:nth-child(4n+3) { animáció-késleltetés: 0,7 s; }
Egy képkocka, hogy lenyűgöző benyomást keltsen A rajzfilmes művészeknek egyetlen keretük volt, hogy benyomást keltsen, és tipográfiájuk ugyanolyan fontos volt, mint az általuk festett alkotás. Ugyanez a helyzet a weben. Jól megtervezett fejléc vagy hősa területnek tisztaságra, karakterre és magabiztosságra van szüksége – nem egyszerűen egy kifakult, teljes szélességű háttérképre. Néhány gondosan megválasztott CSS tulajdonsággal – árnyékokkal, körvonalakkal, vágott hátterekkel és némi visszafogott animációval – ugyanazt a hatást tudjuk újra létrehozni. Nem azért szeretem a toonszöveget, mert nosztalgiázom, hanem mert szándékos a kialakítása. Tegyen megfontolt döntéseket, és hagyja, hogy egy kis szövegtipográfia ütőssé tegye terveit.
