Saatuani päätökseen projektin, joka vaati minua oppimaan kaiken CSS- ja SVG-animaatioista, aloin kirjoittaa tätä sarjaa Smashing Animationsista ja "Kuinka klassiset sarjakuvat inspiroivat modernia CSS:ää". Tämän vuoden päätteeksi haluan näyttää sinulle, kuinka voit käyttää nykyaikaista CSS:ää sellaisen elementin luomiseen, joka tekee Toon Titlesista niin vaikuttavan: niiden typografian. Otsikko Artwork Design 1920-luvun ja 1930-luvun hiljaisena aikana elokuvan nimikortin typografia loi tunnelman, asetti kohtauksen ja muistutti yleisöä elokuvatyypistä, jonka katsomisesta he olivat maksaneet.
Sarjakuvan nimikortit olivat myös brändäystä, tunnelmaa ja kohtauksia, jotka kaikki koottiin yhdeksi. Alkuvuosina, kun suurten studioiden budjetit olivat suurempia, nämä esittelykortit olivat usein havainnollisia ja maalauksellisia.
Mutta kun televisio kukoisti 1950-luvulla, budjetit putosivat ja taiteilijoiden, kuten Lawrence “Art” Goble, suunnittelemat kortit omaksuivat uuden visuaalisen kielen, muuttuen graafisemmiksi, tyylitellymmiksi ja vähemmän monimutkaisiksi. Huomautus: Lawrence "Art" Goble on yksi vuosisadan puolivälin amerikkalaisen animaation usein huomiotta jääneistä sankareista. Hän työskenteli pääasiassa Hanna-Barberalla sen vaikutusvaltaisimpina vuosina 1950- ja 1960-luvuilla. Goble ei ollut hahmoanimaattori. Hänen tehtävänsä oli luoda tunnelmaa, joten hän suunnitteli ympäristöt The Flintstonesille, Huckleberry Houndille, Quick Draw McGrawlle ja Yogi Bearille sekä avauskortit, jotka asettivat sävyn. Hänen nimikorttinsa, joissa oli logolla varustettuja maalauksia, auttoivat määrittelemään Hanna-Barberan ikonisen ilmeen. Goblen taideteokset hahmoille, kuten Quick Draw McGraw ja Yogi Bear, olivat tehokkaita pienemmillä televisioruuduilla. Sarjakuvan still-kuvan toistamisen sijaan hän keskittyi esittämään yksittäisen vahvan idean – usein siluetissa – joka vangitsi sen olemuksen. "The Buzzin' Bear" -elokuvassa Yogi surisee ohi helikopterissa. Hän pomppii pois, pic-a-nic-kori kädessään, "Bear on a Picnic" -elokuvassa, ja "Prize Fight Fright" -peliään varten Yogi kirjoittaa otsikkotekstin.
Goblen yksittäisten ruutujen oli luotava tunnelma, asetettava kohtaus ja kuvattava tarina, koska liikettä ei voida luottaa tai ei lainkaan. He tekivät tämän käyttämällä tasaisia värejä, graafisia muotoja ja typografiaa, jotka usein integroitiin taideteokseen.
Webissä työskentelevinä suunnittelijoina tons-nimikkeet voivat opettaa meille paljon kuinka välittää brändin persoonallisuutta, tehdä ensivaikutelma ja asettaa odotuksia jonkun tuotteen tai verkkosivuston käyttökokemuksesta. Voimme oppia taiteilijoiden tekniikoista luoda tehokkaita bannereita, aloitussivun otsikoita ja jopa hyviä vanhanaikaisia aloitusnäyttöjä. Toonin otsikon typografia Sarjakuvan nimikortit osoittavat, kuinka tyypin yhdistäminen kuviin antaa otsikon tai sankarin tarvitseman lyönnin. Nykyaikaisen CSS:n avulla voit hyödyntää samaa energiaa kourallisen tekstin varjostus-, tekstinveto- ja muunnostemppujen avulla.
Toon-tekstin otsikkogeneraattori Kirjoittaessani tätä artikkelia ymmärsin, että olisi hyödyllistä luoda työkalu tekstin luomiseen, joka on muotoiltu niin paljon rakastamieni sarjakuvien otsikoiden kaltaiseksi. Joten tein sellaisen. My Toon Text Title Generatorin avulla voit kokeilla värejä, viivoja ja useita tekstin varjoja. Voit säätää maalausjärjestystä, käyttää kirjainten väliä, esikatsella tekstiäsi esimerkkifonteilla ja kopioida sitten luodun CSS:n suoraan leikepöydällesi käytettäväksi projektissa. Toon Otsikko CSS Voit yksinkertaisesti kopioida ja liittää CSS:n, jonka Toon Text Title Generator tarjoaa sinulle. Mutta katsotaanpa tarkemmin, mitä se tekee. Tekstin varjo Katso tämän otsikon tyyppiä Augie Doggien "Yuk-Yuk Duck" -jaksosta, jossa on vaaleankeltaiset kirjaimet ja tumma, kova, offset-varjo, joka nostaa sen taustalta ja luo illuusion syvyydestä.
Tiedät luultavasti jo, että text-shadow hyväksyy neljä arvoa: (1) vaaka- ja (2) pystypoikkeamat, (3) sumeus ja (4) väri, joka voi olla kiinteä tai puoliläpinäkyvä. Nämä offset-arvot voivat olla positiivisia tai negatiivisia, joten voin toistaa "Yuk-Yuk Duck" käyttämällä kovaa varjoa, joka on vedetty alas ja oikealle: väri: #f7f76d; tekstivarjo: 5px 5px 0 #1e1904;
Toisaalta tämä "Pint Giant" -nimike on erilainen negatiivisella puolipehmeällä varjollaan: väri: #c2a872; tekstivarjo: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Voin kerrostaa useita varjoja lisätäkseni syvyyttä ja luodakseni mielenkiintoisempia tehosteita. "Let's Duck Out" -kohdassa yhdistän neljä varjoa: ensimmäinen kiinteä varjo negatiivisella vaakasuuntaisella poikkeuksella nostaakseen tekstin pois taustasta, ja sen jälkeen asteittain pehmeämmät varjot luomaan sumennuksen ympärille: väri: #6F4D80; tekstivarjo: -5 kuvapistettä5px 0 #260e1e, /* Shadow 1 */ 0 0 15px #e9ce96, /* Shadow 2 */ 0 0 30px #e9ce96, /* Shadow 3 */ 0 0 30px #e9ce96; /* Shadow 4 */
Nämä varjot osoittavat, että tekstivarjon käyttö ei ole vain valaistustehosteiden luomista, vaan ne voivat myös olla koristeellisia ja lisätä persoonallisuutta. Tekstin veto Monissa sarjakuvan nimikorteissa on kirjaimia, joissa on lihavoitu ääriviiva, joka erottaa ne taustasta. Voin luoda tämän tehosteen uudelleen käyttämällä tekstiviivaa. Tämä ominaisuus oli pitkään saatavilla vain -webkit-etuliitteellä, mutta se tarkoittaa myös sitä, että sitä tuetaan nyt kaikissa nykyaikaisissa selaimissa.
text-stroke on lyhenne kahdelle ominaisuudelle. Ensimmäinen, tekstin viivan leveys, piirtää ääriviivan yksittäisten kirjainten ympärille, kun taas toinen, tekstin viivaväri, ohjaa sen väriä. "Whatever Goes Pup" -kohdassa lisäsin 4px sinisen viivan keltaiseen tekstiin: väri: #eff0cd; -webkit-text-stroke: 4px #7890b5; tekstiviiva: 4px #7890b5;
Vedot voivat olla erityisen hyödyllisiä, kun ne yhdistetään varjoihin, joten "Growing, Growing, Gone" -kohtaan lisäsin ohuen 3 kuvapisteen viivan tuskin epäselvään 1 pikselin varjoon luodakseni tämän kolmiulotteisen tekstitehosteen: väri: #fbb999; tekstivarjo: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; tekstiviiva: 3px #984336;
Maalin tilaus Tekstin veto ei aina tuota odotettua tulosta, etenkään ohuemmilla kirjaimilla ja paksummilla viivoilla, koska oletusarvoisesti selain piirtää viivan täytön päälle. Valitettavasti CSS ei edelleenkään salli minun säätää viivan sijoittelua, kuten teen usein Sketchissä. Maalaustilausominaisuudella on kuitenkin arvoja, joiden avulla voin sijoittaa viivan täytteen taakse, ei sen eteen.
maalijärjestys: veto maalaa ensin vedon, sitten täytön, kun taas maalijärjestys: täyttö tekee päinvastoin: väri: #fbb999; maalijärjestys: täyttö; tekstivarjo: 3px 5px 1px #5160b1; text-stroke-color:#984336; tekstin viivan leveys: 3px;
Tehokas viiva pitää kirjaimet luettavissa, lisää painoa ja – yhdistettynä varjoihin ja maalausjärjestykseen – antaa tasaisen tekstin todellista näkyvyyttä. Taustat tekstin sisällä Monet sarjakuvan nimikortit ylittävät tasaiset värit lisäämällä tekstuuria, liukuvärejä tai kuvitettuja yksityiskohtia kirjaimiin. Joskus se on tekstuuri, toisinaan se voi olla gradientti, jossa on hienovarainen sävysiirtymä. Verkossa voin luoda tämän tehosteen uudelleen käyttämällä taustakuvaa tai liukuväriä tekstin takana ja leikkaamalla sen sitten kirjainten muotoon. Tämä perustuu kahteen ominaisuuteen, jotka toimivat yhdessä: background-clip: teksti ja tekstin täyttöväri: läpinäkyvä.
Ensin käytän taustaa tekstin taakse. Tämä voi olla bittikartta- tai vektorikuva tai CSS-gradientti. Tämän Quick Draw McGraw -jakson "Baba Bait" -esimerkin otsikkoteksti sisältää hienovaraisen ylhäältä alas -gradientin tummasta vaaleaan: tausta: lineaarinen gradientti(0deg, #667b6a, #1d271a);
Seuraavaksi leikkaan taustan kuvioihin ja teen tekstistä läpinäkyvän, jotta tausta näkyy läpi: -webkit-background-clip: teksti; -webkit-text-fill-color: läpinäkyvä;
Vain näillä kahdella rivillä taustaa ei enää maalata tekstin taakse. sen sijaan se on maalattu sen sisään. Tämä tekniikka toimii erityisen hyvin, kun se yhdistetään vetoihin ja varjoihin. Leikattu liukuväri antaa kirjaimille väriä ja tekstuuria, veto pitää sen reunat terävinä ja varjo nostaa sen taustasta. Yhdessä ne luovat uudelleen käsinmaalattujen nimikorttien kerrostetun ilmeen käyttämällä vain pientä CSS:ää. Kuten aina, testaa leikattu teksti huolellisesti, sillä selaimen omituisuudet voivat joskus vaikuttaa varjoihin ja renderöintiin. Tekstin jakaminen yksittäisiin merkkeihin Joskus en halua muotoilla koko sanaa tai otsikkoa. Haluan muotoilla yksittäisiä kirjaimia – työntää merkin paikoilleen, antaa yhdelle kuviolle lisäpainoa tai animoida muutamia kirjaimia itsenäisesti. Pelkässä HTML:ssä ja CSS:ssä siihen on vain yksi luotettava tapa: kääri jokainen merkki omaan span -elementtiin. Voisin tehdä sen manuaalisesti, mutta se olisi hauras, vaikea ylläpitää ja hajoaisi nopeasti, kun kopio muuttuu. Sen sijaan, kun tarvitsen kirjainkohtaista ohjausta, käytän tekstinjakokirjastoa, kuten splt.js (vaikka muitakin ratkaisuja on saatavilla). Tämä ottaa tekstisolmun ja rivittää automaattisesti sanat tai merkit, mikä antaa minulle ylimääräisiä koukkuja animaatioon ja tyyliin sotkematta merkintöjäni. Se on lähestymistapa, joka pitää HTML-koodini luettavana ja semanttisena ja antaa minulle hienorakeisen hallinnan, jota tarvitsen luodakseni uudelleen epätasainen, persoonallinen typografia, jota näet klassisissa sarjakuvan nimikorteissa. Tämä lähestymistapa tulee kuitenkin mukaanesteettömyysvaroitukset, sillä useimmat näytönlukijat lukevat tekstisolmut järjestyksessä. Joten tämä:
Hum Sweet Hum
…lukee kuten odotat: Hum Sweet Hum
Mutta tämä:
H su m
…voidaan tulkita eri tavalla selaimesta ja näytönlukuohjelmasta riippuen. Jotkut yhdistävät kirjaimet ja lukevat sanat oikein. Muut voivat pitää taukoa kirjainten välissä, mikä pahimmassa tapauksessa saattaa kuulostaa tältä: “H…” “U…” “M…”
Valitettavasti jotkin jakamisratkaisut eivät tuota aina saatavilla olevaa tulosta, joten olen kirjoittanut oman tekstinjakajani, splinter.js, joka on tällä hetkellä beta-vaiheessa. Yksittäisten kirjeiden muuntaminen Aktivoidakseni Toon Text Splitterini lisään data-attribuutin elementtiin, jonka haluan jakaa:
Hum Sweet Hum
Ensinnäkin komentosarjani erottaa jokaisen sanan yksittäisiksi kirjaimille ja kääri ne span-elementtiin, jossa käytetään luokka- ja ARIA-attribuutteja:
Komentosarja ottaa sitten jaetun elementin alkuperäisen sisällön ja lisää sen aria-attribuutiksi esteettömyyden ylläpitämiseksi:
Kun nämä luokkaattribuutit ovat käytössä, voin muotoilla yksittäisiä merkkejä haluamallani tavalla.
Esimerkiksi "Hum Sweet Hum" -kohdassa haluan toistaa, kuinka sen kirjaimet siirtyvät pois perusviivasta. Toon Text Splitterin käytön jälkeen käytin neljää erilaista käännösarvoa käyttämällä useita :n-lapsivalitsimia luodakseni puolisatunnaisen ilmeen: /* 4., 8., 12... */ .toon-char:nth-child(4n) { kääntää: 0 -8px; } /* 1., 5., 9... */ .toon-char:nth-child(4n+1) { käännä: 0 -4px; } /* 2., 6., 10... */ .toon-char:nth-child(4n+2) { kääntää: 0 4px; } /* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { kääntää: 0 8px; }
Mutta kääntäminen on vain yksi ominaisuus, jonka avulla voin muuttaa tekstini.
Voisin myös kääntää yksittäisiä merkkejä saadakseni entistä kaoottisemman ilmeen: /* 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) { kierto: 4 astetta; } /* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { kierto: 8 astetta; }
Mutta kääntäminen on vain yksi ominaisuus, jonka avulla voin muuttaa tekstini. Voisin myös kääntää yksittäisiä merkkejä saadakseni entistä kaoottisemman ilmeen: /* 4., 8., 12... */ .toon-line .toon-char:nth-child(4n) { kierto: -4 astetta; }
/* 1., 5., 9... */ .toon-char:nth-child(4n+1) { kierto: -8 astetta; }
/* 2., 6., 10... */ .toon-char:nth-child(4n+2) { kierto: 4 astetta; }
/* 3., 7., 11.... */ .toon-char:nth-child(4n+3) { kierto: 8 astetta; }
Ja tietysti voisin lisätä animaatioita, jotka heiluttavat näitä hahmoja ja elävöittämään tekstityylisiä otsikoitani. Ensin tein avainkehysanimaatiota, joka pyörittää hahmoja:
@keyframes jiggle { 0%, 100% { muunnos: rotate(var(--base-rotate, 0deg)); } 25% { muunnos: rotate(calc(var(--base-rotate, 0deg) + 3deg)); } 50% { muunnos: rotate(calc(var(--base-rotate, 0deg) - 2deg)); } 75% { muunnos: rotate(calc(var(--base-rotate, 0deg) + 1deg)); } }
Ennen kuin käytät sitä Toon Text Splitterin luomiin span elementteihin: .toon-char { animaatio: jiggle 3s ääretön helppous sisään-ulos; muunnos-alkuperä: keskipohja; }
Ja lopuksi kiertomäärän ja viiveen asettaminen ennen kuin jokainen hahmo alkaa heilua: .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) { animaatio-viive: 0.1s; } .toon-char:nth-child(4n+1) { animaatio-viive: 0.3s; } .toon-char:nth-child(4n+2) { animaatio-viive: 0,5 s; } .toon-char:nth-child(4n+3) { animaatio-viive: 0,7 s; }
Yksi kehys tekee vaikutuksen Sarjakuvataiteilijoilla oli yksi kehys tehdäkseen vaikutuksen, ja heidän typografiansa oli yhtä tärkeä kuin heidän maalaamansa taideteos. Sama pätee verkossa. Hyvin suunniteltu otsikko tai sankarialue tarvitsee selkeyttä, luonnetta ja itsevarmuutta – ei vain haalistunutta kokoleveää taustakuvaa. Muutamalla huolellisesti valitulla CSS-ominaisuudella – varjoilla, viivoilla, leikatuilla taustoilla ja hillityllä animaatiolla – voimme luoda saman vaikutuksen uudelleen. Rakastan toon-tekstiä en siksi, että olisin nostalginen, vaan siksi, että sen suunnittelu on tarkoituksellista. Tee harkittuja valintoja ja anna pienen tekstin typografian lisätä suunnitteluasi.
