CSS eta SVG animazioei buruz ahal nuen guztia ikastea eskatzen zidan proiektu bat amaitu ondoren, Smashing Animations eta "How Classic Cartoons Inspire Modern CSS"ri buruzko serie hau idazten hasi nintzen. Aurten borobiltzeko, CSS modernoa nola erabiltzen den erakutsi nahi dizut Toon Tituluek hain eragingarri egiten duten elementu hori sortzeko: haien tipografia. Izenburua Artelanaren diseinua 1920ko eta 30eko hamarkadaren hasierako aro isilean, pelikula baten titulu-txartelaren tipografiak giroa sortu zuen, giroa ezarri zuen eta ikusleei ikustea ordaindu zuten film mota gogorarazi zuen.
Marrazki bizidunen titulu-txartelak marka, umorea eta eszena-eszena ere bazeuden, guztiak bakarrean bilduta. Hasierako urteetan, estudioko aurrekontu handiak handiagoak zirenean, titulu-txartel hauek ilustratzaileak eta margolariak izan ohi ziren.
Baina 1950eko hamarkadan telebistak gora egin zuenean, aurrekontuak jaitsi egin ziren, eta Lawrence "Art" Goble bezalako artistek diseinatutako txartelak bisual hizkuntza berri bat hartu zuten, grafikoagoa, estilizatuagoa eta hain korapilatsuagoa bihurtuz. Oharra: Lawrence "Art" Goble mendearen erdialdeko amerikar animazioko maiz ahaztutako heroietako bat da. Batez ere, Hanna-Barberan lan egin zuen 1950eko eta 1960ko hamarkadetan eragin handieneko urteetan. Goble ez zen pertsonaia animatzailea. Bere eginkizuna giroa sortzea zen, beraz, The Flintstones, Huckleberry Hound, Quick Draw McGraw eta Yogi Bear-entzako inguruneak diseinatu zituen, baita tonua jartzen zuten hasierako titulu-txartelak ere. Haren titulu-txartelak, logotipoa gainjarritako koadroak agertzen ziren, Hanna-Barberaren itxura ikonikoa definitzen lagundu zuten. Goblek Quick Draw McGraw eta Yogi Bear bezalako pertsonaien artelana eraginkorra izan zen telebistako pantaila txikiagoetan. Marrazki bizidunetako fotograma bat erreproduzitu beharrean, ideia sendo eta bakar bat aurkeztean zentratu zen, askotan siluetan, bere esentzia jasotzen zuena. "The Buzzin' Bear" filmean, Yogi burrunba egiten da helikoptero batean. Errebote egiten du, pic-a-nic saskia eskuan, "Bear on a Picnic"-en, eta "Prize Fight Fright"-n, Yogik izenburuko testua kutxatzen du.
Mugimendu gutxirekin edo fidatu gabe, Goble-ren fotograma bakarrek giroa sortu, eszena ezarri eta istorio bat deskribatu behar zuten. Kolore lauak, forma grafikoak eta artelanean maiz integratzen zen tipografia erabiliz egin zuten.
Sarean lan egiten dugun diseinatzaile gisa, toon tituluek asko irakatsi diezagukete marka baten nortasuna transmititu, lehen inpresioa nola eman eta norbaitek produktu edo webgune bat erabiliz esperientziaren itxaropenak ezarri. Artisten tekniketatik ikas dezakegu pankarta eraginkorrak sortzeko, lurreratze-orrietako goiburuak eta baita zaharkitutako zipriztin-pantailak ere. Toon Izenburuen Tipografia Marrazki bizidunetako titulu-txartelek erakusten dute motak irudiekin bateratzeak goiburu edo heroi batek behar duen zulatua nola ematen duen. Testu-itzal, testu trazu eta eraldatze trikimailu gutxi batzuekin, CSS modernoak energia bera aprobetxatzen dizu.
Toon Testu Izenburuen Sortzailea Artikulu hau idaztean, hainbeste maite ditudan marrazki bizidunen izenburuak bezalako testuak sortzeko tresna bat edukitzea erabilgarria izango zela konturatu nintzen. Beraz, bat egin nuen. My Toon Text Title Generator-ek kolore, trazu eta testu-itzal anitzekin esperimentatzeko aukera ematen dizu. Pintura ordena doi dezakezu, letren tartea aplikatu, zure testua aurreikusteko letra-tipoen aukeraketa batean eta, ondoren, sortutako CSS zuzenean kopiatu dezakezu arbelean proiektu batean erabiltzeko. Toon Izenburua CSS Toon Text Title Generator-ek eskaintzen dizun CSS kopiatu-itsatsi besterik ez duzu. Baina ikus dezagun gertuagotik zer egiten duen. Testuaren itzala Begira Augie Doggieren "Yuk-Yuk Duck" ataleko izenburu honetako mota, bere letra hori zurbil eta itzal ilun, gogor eta desplazatuarekin, atzeko planotik altxatu eta sakontasunaren ilusioa sortzen duena.
Seguruenik badakizu dagoeneko testu-itzalak lau balio onartzen dituela: (1) desplazamendu horizontala eta (2) bertikala, (3) lausotzea eta (4) solidoa edo erdi gardena izan daitekeen kolorea. Desplazamendu-balio horiek positiboak edo negatiboak izan daitezke, beraz, "Yuk-Yuk Duck" errepikatu dezaket behera eta eskuinera botatako itzal gogor bat erabiliz: kolorea: #f7f76d; testu-itzala: 5px 5px 0 #1e1904;
Bestalde, "Pint Giant" izenburu honek beste kutsu bat du bere itzal erdi bigun negatiboarekin: kolorea: #c2a872; testu-itzala: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Sakontasun gehigarria gehitzeko eta efektu interesgarriagoak sortzeko, hainbat itzal geruza ditzaket. "Ahatea dezagun"-erako, lau itzal konbinatzen ditut: lehenengoa itzal sendoa, desplazamendu horizontal negatiboa duena, testua atzeko planotik altxatzeko, eta gero itzal leunagoak daude inguruan lauso bat sortzeko: kolorea: #6F4D80; testu-itzala: -5px5px 0 #260e1e, /* Itzala 1 */ 0 0 15px #e9ce96, /* Itzala 2 */ 0 0 30px #e9ce96, /* Itzala 3 */ 0 0 30px #e9ce96; /* Itzala 4 */
Itzal hauek erakusten dute testu-itzala erabiltzea ez dela soilik argi-efektuak sortzea, apaingarriak ere izan daitezkeelako eta nortasuna gehitzeko. Testu trazua Marrazki bizidunetako izenburuko txartel askotan letrak agertzen dira atzealdetik nabarmentzen diren eskema lodiarekin. Efektu hau birsor dezaket testu-trazua erabiliz. Denbora luzez, propietate hau -webkit- aurrizki baten bidez bakarrik egon zen erabilgarri, baina horrek esan nahi du orain arakatzaile modernoetan onartzen dela.
text-stroke bi propietateren laburdura da. Lehenengoak, testu-trazuaren zabalera, ingerada bat marrazten du letren inguruan, eta bigarrenak, berriz, testu-trazuaren kolorea, bere kolorea kontrolatzen du. "Whatever Goes Pup"-rako, 4 pixeleko trazu urdin bat gehitu diot testu horiari: kolorea: #eff0cd; -webkit-text-stroke: 4px #7890b5; testu-trazua: 4px #7890b5;
Trazuak bereziki erabilgarriak izan daitezke itzalekin konbinatzen direnean, beraz, "Hazten, hazten, desagertu"-rako, 3 px-eko trazu fin bat gehitu diot lausotu gabeko 1 px-eko itzal bati hiru dimentsioko testu-efektu hau sortzeko: kolorea: #fbb999; testu-itzala: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; testu-trazua: 3px #984336;
Pintura Agindua Testu-trazua erabiltzeak ez du beti espero den emaitza ematen, batez ere letra meheagoekin eta trazu lodiagoekin, lehenespenez arakatzaileak trazu bat marrazten baitu betegarriaren gainean. Zoritxarrez, CSS-k oraindik ez dit trazuaren kokapena doitzen uzten Sketch-en egiten dudan moduan. Dena den, pintura-ordenaren propietateak trazua betetzearen atzean jartzeko aukera ematen didaten balioak ditu.
pintura-ordena: trazua trazua margotzen du lehenik, ondoren betea, berriz, pintura-ordena: betetzeak kontrakoa egiten du: kolorea: #fbb999; pintura-ordena: bete; testu-itzala: 3px 5px 1px #5160b1; text-stroke-color:#984336; testu-trazuaren zabalera: 3px;
Trazu eraginkor batek letrak irakurgarri mantentzen ditu, pisua gehitzen du eta, itzalekin eta margo ordenarekin konbinatuta, testu lauak benetako presentzia ematen du. Atzeko planoak testuaren barnean Marrazki bizidunen izenburuko txartel askok kolore lautik haratago doaz testura, gradienteak edo ilustratutako xehetasunak letrari gehituz. Batzuetan testura bat da, beste batzuetan tonu-aldaketa sotil batekin gradiente bat izan daiteke. Sarean, efektu hau birsor dezaket testuaren atzean atzeko planoko irudia edo gradiente bat erabiliz eta, ondoren, letren formara moztuz. Hau bi propietate batera lan egiten dute: background-clip: text eta text-fill-color: garden.
Lehenik eta behin, testuaren atzean atzealde bat aplikatzen dut. Hau bit-mapa edo irudi bektoriala edo CSS gradientea izan daiteke. Quick Draw McGraw-en "Baba Bait" ataleko adibide honetarako, izenburuko testuak goi-beheko gradiente sotil bat du ilunetik argira: atzeko planoa: gradiente lineala (0deg, #667b6a, #1d271a);
Ondoren, atzeko plano hori glifoetara mozten dut eta testua garden bihurtzen dut, atzeko planoa ager dadin: -webkit-background-clip: testua; -webkit-text-fill-color: gardena;
Bi lerro horiekin, atzealdea ez da jada testuaren atzean margotzen; horren ordez, barruan margotuta dago. Teknika honek bereziki ondo funtzionatzen du trazu eta itzalekin konbinatuta. Moztutako gradiente batek letrari kolorea eta ehundura ematen dio, trazu batek ertzak zorrotz mantentzen ditu eta itzal batek atzealdetik altxatzen du. Elkarrekin, eskuz margotutako titulu-txartelen geruza itxura birsortzen dute CSS apur bat besterik ez erabiliz. Beti bezala, probatu arretaz moztutako testua, arakatzailearen bitxikeriek batzuetan itzalak eta errendatzea eragin dezaketelako. Testua karaktere banatan banatzea Batzuetan ez dut hitz edo goiburu oso bat estilorik jarri nahi. Banakako letrak estiloa jarri nahi dut: pertsonaia bat tokira eramatea, glifo bati pisu gehigarria eman edo hizki batzuk modu independentean animatu. HTML eta CSS arruntean, hori egiteko modu fidagarri bakarra dago: karaktere bakoitza bere span elementuan biltzea. Hori eskuz egin nezake, baina hori hauskorra izango litzateke, mantentzen zaila eta azkar eroriko litzateke kopia aldatzen denean. Horren ordez, letra bakoitzeko kontrola behar dudanean, splt.js bezalako testuak banatzeko liburutegia erabiltzen dut (nahiz eta beste irtenbide batzuk dauden). Honek testu-nodo bat hartzen du eta automatikoki hitzak edo karaktereak biltzen ditu, nire markaketa nahastu gabe animatzeko eta estilorako kako gehigarriak emanez. Nire HTML irakurgarria eta semantikoa mantentzen duen ikuspegia da, marrazki bizidunetako titulu-txartel klasikoetan ikusten duzun tipografia irregular eta bereizgarria birsortzeko behar dudan kontrol zehatza ematen didan bitartean. Hala ere, planteamendu hau datoririsgarritasunari buruzko oharrak, pantaila-irakurle gehienek testu-nodoak ordenan irakurtzen baitituzte. Beraz, hau:
Hum Sweet Hum
... espero zenukeen bezala irakurtzen du: Hum Gozoa Hum
Baina hau:
H zu m
... desberdin interpreta daiteke arakatzailearen eta pantaila-irakurgailuaren arabera. Batzuek letrak kateatu eta hitzak zuzen irakurriko dituzte. Beste batzuek letren artean pausatu egin dezakete, kasurik txarrenean honelakoa izan daitekeena: “H…” “U…” “M…”
Zoritxarrez, zatiketa-soluzio batzuek ez dute beti irisgarria den emaitzarik ematen, beraz, nire testu zatitzailea idatzi dut, splinter.js, une honetan beta-n dagoena. Banakako letrak eraldatzea Nire Toon Text Splitter aktibatzeko, zatitu nahi dudan elementuari datu-atributu bat gehitzen diot:
Hum Sweet Hum
Lehenik eta behin, nire gidoiak hitz bakoitza letra banatan bereizten du eta span elementu batean biltzen ditu klase eta ARIA atributuak aplikatuta:
Ondoren, scriptak zatitutako elementuaren hasierako edukia hartzen du eta aria atributu gisa gehitzen du irisgarritasuna mantentzen laguntzeko:
Klase-atributu horiek aplikatuta, karaktere indibidualak aukeratu ditzaket nik aukeratzen dudan moduan.
Adibidez, "Hum Sweet Hum"-rako, bere letrak oinarri-lerrotik urrun nola aldentzen diren errepikatu nahi dut. Nire Toon Text Splitter erabili ondoren, lau itzulpen-balio desberdin aplikatu nituen hainbat :nth-child hautatzaile erabiliz erdi-ausazko itxura sortzeko: /* 4, 8, 12... */ .toon-char:nth-child (4n) { itzuli: 0 -8px; } /* 1., 5., 9.... */ .toon-char:nth-child (4n+1) { itzuli: 0 -4px; } /* 2, 6, 10... */ .toon-char:nth-child (4n+2) { itzuli: 0 4px; } /* 3, 7, 11... */ .toon-char:nth-child (4n+3) { itzuli: 0 8px; }
Baina itzultzea nire toon testua eraldatzeko erabil dezakedan propietate bakarra da.
Pertsonaia indibidual horiek ere biratu ditzaket itxura are kaotikoagoa izateko: /* 4, 8, 12... */ .toon-line .toon-char:nth-child (4n) { biratu: -4deg; } /* 1., 5., 9.... */ .toon-char:nth-child (4n+1) { biratu: -8deg; } /* 2, 6, 10... */ .toon-char:nth-child (4n+2) { biratu: 4deg; } /* 3, 7, 11... */ .toon-char:nth-child (4n+3) { biratu: 8deg; }
Baina itzultzea nire toon testua eraldatzeko erabil dezakedan propietate bakarra da. Pertsonaia indibidual horiek ere biratu ditzaket itxura are kaotikoagoa izateko: /* 4, 8, 12... */ .toon-line .toon-char:nth-child (4n) { biratu: -4deg; }
/* 1., 5., 9.... */ .toon-char:nth-child (4n+1) { biratu: -8gradu; }
/* 2, 6, 10... */ .toon-char:nth-child (4n+2) { biratu: 4 gradu; }
/* 3, 7, 11... */ .toon-char:nth-child (4n+3) { biratu: 8 gradu; }
Eta, noski, animazioak gehitu nezake pertsonaia horiek astintzeko eta nire toon testu estiloko izenburuei bizia emateko. Lehenik eta behin, karaktereak biratzen dituen gako-fotogramako animazioa sortu nuen:
@keyframes jiggle { 0%, 100% { transformatu: biratu(var(--base-biratu, 0deg)); } 25% { transformatu: biratu(calc(var(--base-biratu, 0deg) + 3deg)); } 50% { transformatu: biratu(calc(var(--base-biratu, 0deg) - 2deg)); } 75% { transformatu: biratu(calc(var(--base-biratu, 0deg) + 1deg)); } }
Nire Toon Text Splitter-ek sortutako span elementuei aplikatu aurretik: .toon-char { animazioa: jiggle 3s infinitua erraztasun-irteera; transformazio-jatorria: erdiko beheko; }
Eta, azkenik, errotazio-kopurua eta atzerapen bat ezarri karaktere bakoitza mugitzen hasi aurretik: .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) { animazio-atzerapena: 0.1s; } .toon-char:nth-child (4n+1) { animazio-atzerapena: 0.3s; } .toon-char:nth-child (4n+2) { animazio-atzerapena: 0.5s; } .toon-char:nth-child (4n+3) { animazio-atzerapena: 0.7s; }
Koadro bat inpresioa egiteko Marrazki bizidunen izenburuko artistek marko bat zuten inpresioa eragiteko, eta haien tipografia margotzen zuten artelanak bezain garrantzitsua zen. Berdin gertatzen da sarean. Ondo diseinatutako goiburua edo heroiaeremuak argitasuna, izaera eta konfiantza behar ditu, ez zabalera osoko atzeko plano lausotu bat besterik ez. Arretaz aukeratutako CSS propietate gutxi batzuekin (itzalak, trazuak, hondo moztuak eta animazio mugatu batzuekin) eragin bera birsortu dezakegu. Toon testua maite dut, ez nostalgikoa naizelako, bere diseinua nahita dagoelako baizik. Aukeratu nahita, eta utzi testu-tipografia txiki batek zure diseinuei zirrara ematen dien.
