Kalpasan a nalpasko ti maysa a proyekto a kasapulan nga adalek ti amin a kabaelak maipapan kadagiti animasion ti CSS ken SVG, rinugiak nga insurat daytoy a serye maipapan iti Smashing Animations ken “How Classic Cartoons Inspire Modern CSS.” Tapno ma-round off daytoy a tawen, kayatko nga ipakita kadakayo no kasano ti agusar iti moderno a CSS tapno mangpartuat iti dayta nga elemento a mamagbalin kadagiti Toon Titles nga addaan epekto unay: ti tipograpiada. Titulo Disenyo ti Obra ti Arte Iti naulimek a panawen ti dekada 1920 ken nasapa a paset ti dekada ’30, ti tipograpia ti film’s title card ti nangpataud iti rikna, nangipasdek iti eksena, ken nangipalagip iti maysa a managdengngeg iti kita ti pelikula a binayadanda a buyaen.
Dagiti cartoon title card ket branding, mood, ken scene-setting met, amin ket nalukot iti maymaysa. Kadagiti immuna a tawen, idi dakdakkel dagiti kangrunaan a badyet ti studio, dagitoy a title card ket masansan a mangiladawan ken pintor.
Ngem idi rimmang-ay ti telebision bayat ti dekada 1950, bimmaba dagiti badyet, ket dagiti kard a dinisenio dagiti artista a kas ken ni Lawrence “Art” Goble inadaptarda ti baro a visual language, nga ad-adda a graphic, estilo, ken saan unay a narikut. Pakaammo: Ni Lawrence “Art” Goble ket maysa kadagiti masansan a maliwayan a bannuar iti katengngaan ti siglo nga American animation. Isu ket nangruna a nagtrabaho para iti Hanna-Barbera idi las-ud ti kaaduan nga impluensial a tawtawen ti 1950 ken 1960. Saan a character animator ni Goble. Ti akemna ket mangpartuat ti atmospera, isu nga isu ket nagdisenio kadagiti aglawlaw para kadagiti The Flintstones, Huckleberry Hound, Quick Draw McGraw, ken Yogi Bear, ken dagiti pay panglukat a kard ti paulo a nangikeddeng ti tono. Dagiti title card-na, a mangitampok kadagiti painting nga addaan iti logo a naabbungotan, ket nakatulong a nangdepinar iti iconic a langa ni Hanna-Barbera. Epektibo ti artwork ni Goble para kadagiti karakter a kas iti Quick Draw McGraw ken Yogi Bear kadagiti babbabassit nga iskrin ti TV. Imbes a mangpataud manen iti still manipud iti cartoon, impamaysana ti panangidatag iti maymaysa, napigsa nga ideya — masansan nga iti silweta — a nangtiliw iti esensiana. Iti “The Buzzin’ Bear,” agburburek ni Yogi iti helikopter. Agsalsaltek, pic-a-nic basket ti iggemna, iti “Bear on a Picnic,” ket para iti “Prize Fight Fright”-na, i-box ni Yogi ti teksto ti paulo.
Gapu ta bassit wenno awan ti motion a pagpannurayan, dagiti agmaymaysa a frame ni Goble masapul a mangpataud iti mood, mangiset iti eksena, ken mangiladawan iti maysa nga estoria. Inaramidda daytoy babaen ti panangusar kadagiti patad a kolor, grapiko a sukog, ken tipograpia a masansan a naikapet iti obra ti arte.
Kas disenio nga agtartrabaho iti web, dagiti paulo ti toon ket makaisuro kadatayo iti adu maipapan iti no kasano nga ipaawat ti personalidad ti maysa a brand, mangaramid iti umuna nga impresion, ken mangikeddeng kadagiti namnamaen para iti padas ti maysa a tao babaen ti panangusar iti produkto wenno website. Makasursurotayo kadagiti teknik dagiti artista a mangparnuay kadagiti epektibo a banner, landing-page header, ken uray pay dagiti nasayaat nga ol’ fashioned a splash screen. Tipograpia ti Paulo ti Toon Ipakita dagiti kard ti paulo ti cartoon no kasano a ti panagtipon ti tipo iti imahe ket mangipaay iti punch a kasapulan ti maysa nga ulo wenno bannuar. Babaen ti sumagmamano a text-shadow, text-stroke, ken transform tricks, ti moderno a CSS ket palubosannaka a mang-tap iti dayta met laeng nga enerhia.
Ti Toon a Mangpataud ti Paulo ti Teksto Iti paset ti panagsuratko iti daytoy nga artikulo, naamirisko a makatulong no adda ramit a mangpataud iti teksto nga estilo a kas kadagiti paulo ti cartoon nga ay-ayatek unay. Isu a nangaramidak iti maysa. Ti Toon Text Title Generator-ko ket palubosannaka nga ageksperimento kadagiti kolor, stroke, ken adu nga anniniwan ti teksto. Mabalinmo nga i-adjust ti urnos ti pintura, iyaplikar ti panagsisina ti letra, i-preview ti tekstom iti napili a pagarigan a letra, ken kalpasanna kopiaem ti napataud a CSS a diretso iti clipboard-mo tapno mausar iti maysa a proyekto. Toon Titulo CSS Mabalinmo laeng nga i-copy-paste ti CSS nga ipaay kenka ti Toon Text Title Generator. Ngem kitaentayo a naimbag ti ar-aramidenna. Anniniwan ti teksto Kitaenyo ti tipo iti daytoy a paulo manipud iti episode ni Augie Doggie a “Yuk-Yuk Duck,” nga addaan kadagiti nalabaga a duyaw a letra ken natayengteng, natangken, offset nga anniniwan a mangitag-ay iti dayta manipud iti likudan ken mangpataud iti ilusion ti kinauneg.
Ammom la ketdi a ti text-shadow ket umawat kadagiti uppat a pateg: (1) horizontal ken (2) vertical offset, (3) blur, ken (4) ti kolor a mabalin a solido wenno semi-transparent. Dagita nga offset values ket mabalin a positibo wenno negatibo, isu a mabalinko a tuladen ti “Yuk-Yuk Duck” babaen ti panangusar iti natangken nga anniniwan a naguyod nga agpababa ken iti kannawan: kolor: # f7f76d nga; teksto-annino: 5px 5px 0 # 1e1904;
Iti sabali a bangir, daytoy a “Pint Giant” a paulo ket addaan iti naiduma a rikna babaen ti negatibo a semi-nalukneng nga anniniwanna: kolor: # c2a872 nga; teksto-anniniwan: -7px 5px 0 # b100e, . 0 -5px 10px # 546c6f nga ;
Tapno mangnayon iti ekstra a kauneg ken mangpataud iti ad-adu a makapainteres nga epekto, mabalinko ti ag-layer iti adu nga anniniwan. Para iti “Let’s Duck Out,” pagtitiponek ti uppat nga anniniwan: ti umuna ket solido nga anniniwan nga addaan iti negatibo a horizontal offset tapno maipangato ti teksto manipud iti likudan, a sarunuen dagiti progresibo a naluklukneng nga anniniwan tapno mangpataud iti blur iti aglawlawna: kolor: # 6F4D80 nga; teksto-anniniwan: -5px nga5px 0 #260e1e, /* Anniniwan 1 */ . 0 0 15px #e9ce96, /* Anniniwan 2 */ . 0 0 30px #e9ce96, /* Anniniwan 3 */ . 0 0 30px # e9ce96 nga; /* Anniniwan 4 */ .
Ipakita dagitoy nga anniniwan a ti panangusar iti text-shadow ket saan laeng a maipapan iti panangparnuay kadagiti epekto ti silaw, ta mabalin met nga arkos ken mangnayon iti personalidad. Teksto nga Istroke Adu a cartoon title card ti addaan kadagiti letra nga addaan iti nalukmeg a balabala a mamagbalin kadakuada a naisangsangayan manipud iti likudan. Mabalinko a parsuaen manen daytoy nga epekto babaen ti text-stroke. Iti napaut a panawen, daytoy a sanikua ket magun-od laeng babaen ti -webkit- a pangrugian, ngem kayatna pay a sawen a daytoy ket nasuportaran itan iti ballasiw dagiti moderno a browser.
ti text-stroke ket shorthand para iti dua a tagikua. Ti umuna, text-stroke-width, ket mangidrowing iti kontur iti aglawlaw dagiti indibidual a letra, bayat a ti maikadua, text-stroke-color, ti mangkontrol iti kolorna. Para iti “Whatever Goes Pup,” innayonko ti 4px nga asul nga stroke iti duyaw a teksto: kolor: # eff0cd nga; -webkit-teksto-stroke: 4px # 7890b5; teksto-stroke: 4px # 7890b5;
Dagiti stroke ket mabalin a nangnangruna a makatulong no dagitoy ket naitipon kadagiti anniniwan, isu a para iti “Growing, Growing, Gone,” innayonko ti naingpis a 3px nga stroke iti dandani saan a nalawag a 1px nga anniniwan tapno makaaramid iti daytoy tallo-dimensional nga epekto ti teksto: kolor: # fbb999 nga; teksto-annino: 3px 5px 1px # 5160b1; -webkit-teksto-stroke: 3px # 984336; teksto-stroke: 3px # 984336;
Urnos ti Pintura Ti panangusar iti text-stroke ket saan a kanayon a mangpataud iti manamnama a resulta, nangruna kadagiti naingpis a letra ken napuspuskol nga stroke, gapu ta babaen ti default ti browser ket mangidrowing iti stroke iti rabaw ti punno. Nakalkaldaang ta saan pay laeng nga ipalubos ti CSS a mangbalbaliw iti pannakaikabil ti stroke a kas iti masansan nga aramidek iti Sketch. Nupay kasta, ti sanikua ti paint-order ket addaan kadagiti pateg a mangipalubos kaniak a mangikabil ti stroke iti likudan, imbes nga iti sango, ti punno.
paint-order: stroke pintaanna nga umuna ti stroke, kalpasanna ti punno, idinto ta ti paint-order: fill ket aramidenna ti kasungani: kolor: # fbb999 nga; pintura-urnos: punnuen; teksto-annino: 3px 5px 1px # 5160b1; teksto-stroke-kolor: # 984336; teksto-stroke-ti kalawa: 3px;
Ti epektibo nga stroke ket pagtalinaedenna dagiti letra a mabasa, mangnayon ti dagsen, ken — no maikuyog kadagiti anniniwan ken urnos ti pintura — mangted ti patad a teksto a pudno a kaadda. Backgrounds iti Uneg ti Teksto Adu a cartoon title card ti lumabes iti patad a kolor babaen ti pananginayon iti texture, gradient, wenno nailadawan a detalye iti letra. No dadduma dayta’t texture, no dadduma mabalin a gradient nga addaan iti di madmadlaw a panagbalbaliw ti tono. Iti web, mabalinko a parnuayen manen daytoy nga epekto babaen ti panangusar iti background image wenno gradient iti likudan ti teksto, ket kalpasanna i-clip-ko dayta iti sukog dagiti letra. Agpannuray daytoy iti dua a tagikua nga agtitinnulong: background-clip: teksto ken text-fill-color: transparent.
Umuna, iyaplikarko ti background iti likudan ti teksto. Daytoy ket mabalin a bitmap wenno ladawan ti vektor wenno ti CSS a panagrang-ay. Para iti daytoy a pagarigan manipud iti Quick Draw McGraw episode a “Baba Bait,” ti teksto ti paulo ket iramanna ti di madmadlaw a top–bottom gradient manipud nasipnget agingga iti lawag: likudan: linear-gradiente (0deg, # 667b6a, # 1d271a);
Sumaganad, i-clip-ko dayta a background kadagiti glyph ken pagbalinek a transparent ti teksto tapno maipakita ti background babaen ti: -webkit-likud-klip: teksto; -webkit-teksto-punno-a-kolor: nalawag;
Babaen laeng kadagita a dua a linia, saanen a naipinta ti likudan iti likudan ti teksto; imbes ketdi, naipinta dayta iti uneg dayta. Nangnangruna a nasayaat ti panagtrabaho daytoy a teknik no maikuyog kadagiti istroke ken anniniwan. Ti naputed a gradient ti mangipaay iti kolor ken tekstura ti letra, ti stroke pagtalinaedenna a natadem dagiti pingirna, ken ti anniniwan ipangatona dayta manipud iti likudan. Sangsangkamaysada a mangparnuay manen iti naisaad a langa dagiti naipinta babaen ti ima a title card nga awan sabali no di ti bassit a CSS. Kas iti kanayon, suboken a naimbag ti na-clip a teksto, ta dagiti quirk ti browser ket mabalin a mangapektar no dadduma kadagiti anniniwan ken panagiparang. Panangbingay iti Teksto iti Indibidual a Karakter No dadduma diak kayat nga estiloen ti sibubukel a sao wenno paulo. Kayatko nga estiloen dagiti indibidual a letra — tapno maiduron ti maysa a karakter iti lugarna, mangted iti maysa a glyph iti ekstra a dagsen, wenno mang-animate iti sumagmamano a letra nga agwaywayas. Iti plain HTML ken CSS, adda laeng maysa a mapagtalkan a wagas a mangaramid iti dayta: baluten ti tunggal karakter iti bukodna nga elemento ti span. Mabalinko nga aramiden dayta a manual, ngem nalaka a madadael dayta, narigat a manteneren, ken alisto a madadael no agbaliw ti kopia. Imbes ketdi, no kasapulak ti per-letter control, agusarak iti text-splitting library a kas iti splt.js (nupay adda dagiti dadduma a solusion). Daytoy ket mangala ti text node ken automatiko a mangbalkot kadagiti balikas wenno karakter, a mangted kaniak kadagiti ekstra a kawit tapno ag-animate ken ag-style a saan a mangriribuk ti markup-ko. Daytat’ pamay-an a mangtaginayon iti HTML-ko a mabasa ken semantiko, bayat nga ikkannak iti napino a kontrol a kasapulak tapno maparsua manen ti saan a patas, addaan karakter a tipograpia a makitam kadagiti klasiko a cartoon title card. Nupay kasta, daytoy a pamay-an ket umay a kaduadagiti pakdaar ti pannakagun-od, bayat a kaaduan kadagiti agbasbasa iti iskrin ket agbasada kadagiti nodo ti teksto nga agsasaruno. Isu a daytoy:
Hum Nasam-it nga Hum
...mabasa kas namnamaem: Hum Nasam-it nga Hum
Ngem daytoy:
H u m
...mabalin nga ipaulog a naiduma depende iti browser ken screen reader. Dadduma ti mangisilpo kadagiti letra ken umiso ti panangbasa kadagiti sasao. Mabalin nga agsardeng ti dadduma iti nagbaetan dagiti letra, nga iti kadaksan a kasasaad mabalin nga agparang a kas iti: “H...” “U...” “M...”
Nakalkaldaang ta dadduma a solusion ti panagbingay ket saan a mangipaay iti kanayon a madanon a resulta, isu nga insuratko ti bukodko a text splitter, ti splinter.js, nga agdama nga adda iti beta. Panangbalbaliw kadagiti Indibidual a Surat Tapno mapaandar ti Toon Text Splitter-ko, manginayonak iti data- attribute iti elemento a kayatko a bingayen:
Hum Nasam-it nga Hum
Umuna, ti iskripko ket mangisina ti tunggal maysa a balikas kadagiti indibidual a letra ken balutenna dagitoy iti maysa nga elemento ti span nga addaan kadagiti klase ken dagiti kababalin ti ARIA a naipakat: H u m
Kalpasanna ti iskrip ket mangala ti rugi a linaon ti nabingbingay nga elemento ken manginayon daytoy a kas ti aria a kababalin tapno makatulong a mangtaginayon ti pannakagun-od:
H u m
Babaen dagita nga attribute ti klase a naipakat, mabalinko ngarud nga estiloen dagiti indibidual a karakter kas piliek.
Kas pagarigan, para iti “Hum Sweet Hum,” kayatko a tuladen no kasano nga umadayo dagiti letrana manipud iti baseline. Kalpasan ti panagusar ti Toon Text Splitter-ko, inyaplikarko ti uppat a nadumaduma a pateg ti panagipatarus babaen ti panagusar kadagiti sumagmamano a :nth-child selectors tapno mangpartuat ti semi-random a panagkita: /* Maika-4, maika-8, maika-12... */ .toon-char: maika-n-nga-anak (4n) { ipatarus: 0 -8px; } . /* Maika-1, maika-5, maika-9... */ .toon-char: maika-n-nga-anak (4n + 1) { ipatarus: 0 -4px; } . /* Maika-2, maika-6, maika-10... */ .toon-char: maika-n-nga-anak (4n + 2) { ipatarus: 0 4px; } . /* Maika-3, maika-7, maika-11... */ .toon-char: maika-n-nga-anak (4n + 3) { ipatarus: 0 8px; } .
Ngem ti translate ket maysa laeng a property a mabalinko nga usaren a mangbalbaliw iti toon text-ko.
Mabalinko met nga i-rotate dagita nga indibidual a karakter para iti ad-adda pay a nariribuk a langa: /* Maika-4, maika-8, maika-12... */ .toon-line .toon-char: maika-n-nga-anak (4n) { agturong: -4deg; } . /* Maika-1, maika-5, maika-9... */ .toon-char: maika-n-nga-anak (4n + 1) { agturong: -8deg; } . /* Maika-2, maika-6, maika-10... */ .toon-char: maika-n-nga-anak (4n + 2) { agturong: 4deg; } . /* Maika-3, maika-7, maika-11... */ .toon-char: maika-n-nga-anak (4n + 3) { agturong: 8deg; } .
Ngem ti translate ket maysa laeng a property a mabalinko nga usaren a mangbalbaliw iti toon text-ko. Mabalinko met nga i-rotate dagita nga indibidual a karakter para iti ad-adda pay a nariribuk a langa: /* Maika-4, maika-8, maika-12... */ .toon-line .toon-char: maika-n-nga-anak (4n) { . agturong: -4deg; } .
/* Maika-1, maika-5, maika-9... */ .toon-char: maika-n-nga-anak (4n + 1) { . agturong: -8deg; } .
/* Maika-2, maika-6, maika-10... */ .toon-char: maika-n-nga-anak (4n + 2) { . agturong: 4deg; } .
/* Maika-3, maika-7, maika-11... */ .toon-char: maika-n nga ubing (4n + 3) { . agturong: 8deg; } .
Ket, siempre, mabalinko ti mangnayon kadagiti animation tapno mai-jiggle dagita a karakter ken mangbiag kadagiti paulo ti toon text style-ko. Umuna, nangaramidak iti keyframe animation a mangiturong kadagiti karakter:
@dagiti keyframes ag-jiggle { . 0%, 100% { agbaliw: agturong (var (--base-iturong, 0deg)); } . 25% { agbaliw: agturong (calc (var (--base-agturong, 0deg) + 3deg)); } . 50% { agbaliw: agturong (calc (var (--base-agturong, 0deg) - 2deg)); } . 75% { agbaliw: agturong (calc (var (--base-agturong, 0deg) + 1deg)); } . } .
Sakbay nga iyaplikar daytoy kadagiti elemento ti span a pinartuat babaen ti Toon Text Splitter-ko: .toon-char { . animation: jiggle 3s awan patinggana a kinalaka-in-out; transform-origin: tengnga a baba; } .
Ket kamaudiananna, ti panangisaad ti gatad ti panagrikus ken ti pannakataktak sakbay a mangrugi nga ag-jiggle ti tunggal karakter: .toon-char: maika-n-nga-anak (4n) { --base-agturong: -2deg; } . .toon-char: maika-n-nga-anak (4n + 1) { --base-agturong: -4deg; } . .toon-char: maika-n-nga-anak (4n + 2) { --base-agturong: 2deg; } . .toon-char: maika-n-nga-anak (4n + 3) { --base-agturong: 4deg; } .
.toon-char:nth-child (4n) { panagtaktak ti animasion: 0.1s; } . .toon-char: maika-n-nga-anak (4n + 1) { animasion-panagtaktak: 0.3s; } . .toon-char: maika-n-nga-anak (4n + 2) { animasion-panagtaktak: 0.5s; } . .toon-char: maika-n-nga-anak (4n + 3) { animasion-panagtaktak: 0.7s; } .
Maysa a Frame Tapno Makaaramid iti Impression Maymaysa ti kuadro dagiti artista iti paulo ti cartoon tapno makaaramidda iti impresion, ket napateg ti tipograpiada a kas iti obra ti arte nga inpintada. Kasta met laeng ti mapasamak iti web. Nasayaat ti pannakadiseniona nga header wenno herokasapulan ti lugar ti kinalawag, karakter, ken panagtalek — saan laeng a ti nakusnaw a naan-anay ti kalawana a ladawan ti likudan. Babaen ti sumagmamano a naannad a napili a tagikua ti CSS — dagiti anniniwan, stroke, naputed a likudan, ken sumagmamano a natengngel nga animasion — mabalintayo a parnuayen manen dayta met laeng nga epekto. Pagay-ayatko ti toon text saan a gapu ta nostalgic-ak, no di ket gapu ta nairanta ti disenio daytoy. Mangaramidka kadagiti inggagara a pili, ken bay-am a ti bassit a toon text typography ket mangnayon iti punch kadagiti disenio.
