Sawise ngrampungake proyek sing mbutuhake aku sinau kabeh babagan animasi CSS lan SVG, aku miwiti nulis seri iki babagan Smashing Animations lan "Cara Kartun Klasik Inspirasi CSS Modern." Kanggo ngrampungake taun iki, aku pengin nuduhake sampeyan carane nggunakake CSS modern kanggo nggawe unsur sing ndadekake Toon Titles dadi pengaruh: tipografi. Desain Karya Seni Judul Ing jaman sepi ing taun 1920-an lan awal 30-an, tipografi kertu judhul film nggawe swasana ati, nyetel adegan, lan ngelingake pamirsa babagan jinis film sing kudu dibayar.
Kertu judhul kartun uga merek, swasana ati, lan setelan adegan, kabeh digulung dadi siji. Ing taun-taun awal, nalika anggaran studio utama luwih gedhe, kertu judhul iki asring ilustrasi lan pelukis.
Nanging nalika televisi boomed nalika taun 1950-an, anggaran mudhun, lan kertu sing dirancang dening seniman kaya Lawrence "Art" Goble nggunakake basa visual anyar, dadi luwih grafis, gaya, lan ora rumit. Cathetan: Lawrence "Seni" Goble minangka salah sawijining pahlawan animasi Amerika abad pertengahan sing asring diabaikan. Dheweke utamane kerja ing Hanna-Barbera sajrone taun-taun paling berpengaruh ing taun 1950-an lan 1960-an. Goble dudu animator karakter. Perané yaiku nggawe atmosfer, mula dheweke ngrancang lingkungan kanggo The Flintstones, Huckleberry Hound, Quick Draw McGraw, lan Yogi Bear, uga kertu judhul pambuka sing nyetel nada. Kertu judhule, sing nampilake lukisan kanthi logo sing dilapisi, mbantu nemtokake tampilan apik Hanna-Barbera. Karya seni Goble kanggo karakter kayata Quick Draw McGraw lan Yogi Bear efektif ing layar TV sing luwih cilik. Tinimbang ngasilake gambar saka kartun kasebut, dheweke fokus kanggo nampilake ide sing kuat - asring nganggo siluet - sing narik kawigaten. Ing "The Buzzin 'Bear," Yogi buzzes dening ing helikopter. Dheweke mumbul, basket pic-a-nic ing tangan, ing "Bear on a Picnic," lan kanggo "Prize Fight Fright," Yogi kothak teks judhul.
Kanthi sethithik utawa ora ana gerakan sing bisa diandelake, pigura tunggal Goble kudu nggawe swasana ati, nyetel adegan, lan nggambarake crita. Dheweke nindakake iki nggunakake warna sing rata, bentuk grafis, lan tipografi sing asring digabungake ing karya seni.
Minangka desainer sing makarya ing web, judhul toon bisa ngajari kita babagan carane menehi kapribaden merek, nggawe kesan pertama, lan nyetel pangarepan kanggo pengalaman wong nggunakake produk utawa situs web. Kita bisa sinau saka teknik para seniman kanggo nggawe spanduk sing efektif, header kaca kebangkrutan, lan uga layar cipratan sing apik. Tipografi Judul Toon Kertu judhul kartun nuduhake carane nggabungake jinis karo citra menehi pukulan sing dibutuhake header utawa pahlawan. Kanthi sawetara teks-shadow, text-stroke, lan trik transformasi, CSS modern ngidini sampeyan nggunakake energi sing padha.
Generator Judul Teks Toon Sajrone nulis artikel iki, aku ngerti manawa ana alat kanggo nggawe teks kanthi gaya kaya judhul kartun sing daktresnani. Dadi aku nggawe siji. My Toon Text Title Generator ngidini sampeyan eksprimen karo werna, stroke, lan sawetara bayangan teks. Sampeyan bisa nyetel urutan cat, ngetrapake spasi huruf, pratinjau teks ing pilihan font sampel, banjur nyalin CSS sing digawe langsung menyang clipboard kanggo digunakake ing proyek. Toon Judhul CSS Sampeyan mung bisa nyalin-tempel CSS sing diwenehake dening Toon Text Title Generator. Nanging ayo katon luwih cedhak apa sing ditindakake. Bayangan teks Deleng jinis judhul iki saka episode Augie Doggie "Bebek Yuk-Yuk," kanthi huruf kuning pucet lan bayangan sing peteng, hard, ngimbangi sing ngangkat latar mburi lan nggawe ilusi jero.
Sampeyan mbokmenawa wis ngerti yen bayangan teks nampa papat nilai: (1) horisontal lan (2) offset vertikal, (3) burem, lan (4) werna sing bisa dadi padhet utawa semi-transparan. Nilai offset kasebut bisa positif utawa negatif, mula aku bisa niru "Bebek Yuk-Yuk" nggunakake bayangan sing ditarik mudhun lan nengen: werna: #f7f76d; teks-bayangan: 5px 5px 0 #1e1904;
Saliyane, judhul "Pint Giant" iki nduweni rasa sing beda karo bayangan semi-lembut sing negatif: werna: #c2a872; bayangan teks: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Kanggo nambah kedalaman ekstra lan nggawe efek sing luwih menarik, aku bisa nglapisi pirang-pirang bayangan. Kanggo "Ayo Duck Out," aku gabungke papat bayangan: sing pisanan yaiku bayangan sing padhet kanthi offset horisontal negatif kanggo ngangkat teks saka latar mburi, diikuti karo bayangan sing luwih alus kanggo nggawe blur ing sakubenge: werna: # 6F4D80; bayangan teks: -5px5px 0 #260e1e, /* Bayangan 1 */ 0 0 15px #e9ce96, /* Bayangan 2 */ 0 0 30px #e9ce96, /* Bayangan 3 */ 0 0 30px #e9ce96; /* Bayangan 4 */
Bayangan kasebut nuduhake yen nggunakake bayangan teks ora mung nggawe efek cahya, amarga uga bisa dadi hiasan lan nambah kapribaden. Teks Stroke Akeh kertu judhul kartun nduweni huruf kanthi garis sing kandel sing ndadekake dheweke metu saka latar mburi. Aku bisa nggawe maneh efek iki nggunakake teks-stroke. Kanggo wektu sing suwe, properti iki mung kasedhiya liwat awalan -webkit-, nanging tegese saiki wis didhukung ing browser modern.
text-stroke minangka singkatan saka rong sifat. Kapisan, jembaré-stroke-teks, nggambar kontur ing saubengé huruf individu, dene sing nomer loro, warna-stroke-teks, ngontrol werna. Kanggo "Whatever Goes Pup," aku nambahake stroke biru 4px menyang teks kuning: warna: #eff0cd; -webkit-teks-stroke: 4px #7890b5; teks-stroke: 4px # 7890b5;
Stroke bisa migunani banget nalika digabungake karo bayangan, mula kanggo "Tuwuh, Tuwuh, Ical," aku nambahake stroke 3px tipis menyang bayangan 1px sing meh ora kabur kanggo nggawe efek teks telung dimensi iki: werna: #fbb999; teks-bayangan: 3px 5px 1px #5160b1; -webkit-teks-stroke: 3px #984336; teks-stroke: 3px # 984336;
Urutan Paint Nggunakake text-stroke ora mesthi ngasilake asil sing dikarepake, utamane kanthi huruf sing luwih tipis lan stroke sing luwih kandel, amarga kanthi gawan browser nggambar stroke liwat isi. Sayange, CSS isih ora ngidini aku nyetel posisi stroke kaya sing asring daklakoni ing Sketsa. Nanging, property Paint-urutan wis nilai sing ngidini kula kanggo nyeleh stroke konco, tinimbang ing ngarepe, isi.
urut-urutan cat: goresan nglukis guratan dhisik, banjur isi, dene urutan cat: isi ngelawan: werna: #fbb999; cat-urutan: isi; teks-bayangan: 3px 5px 1px #5160b1; teks-stroke-werna: # 984336; teks-stroke-jembaré: 3px;
Stroke sing efektif ndadekake huruf bisa diwaca, nambah bobot, lan - yen digabungake karo bayangan lan urutan cat - menehi teks sing rata. Latar Belakang Teks Akeh kertu judhul kartun ngluwihi warna sing rata kanthi nambahake tekstur, gradien, utawa detail gambar ing huruf kasebut. Kadhangkala sing tektur, liyane bisa uga gradien karo owah-owahan tonal subtle. Ing web, aku bisa nggawe maneh efek iki kanthi nggunakake gambar latar mburi utawa gradient ing mburi teks, banjur clipping menyang wangun huruf. Iki gumantung ing rong properti sing bisa digunakake bebarengan: latar mburi-klip: teks lan teks-isi-werna: transparan.
Kaping pisanan, aku nggunakake latar mburi ing mburi teks. Iki bisa dadi gambar bitmap utawa vektor utawa gradien CSS. Kanggo conto iki saka episode Quick Draw McGraw "Baba Bait," teks judhul kalebu gradien ndhuwur-ngisor subtle saka peteng kanggo cahya: latar mburi: linear-gradient (0deg, #667b6a, #1d271a);
Sabanjure, aku klip latar mburi menyang glyphs lan nggawe teks transparan supaya latar mburi nuduhake liwat: -webkit-background-klip: teks; -webkit-text-fill-color: transparan;
Kanthi mung rong garis kasebut, latar mburi ora dicet maneh ing mburi teks; tinimbang, iku dicet ing. Teknik iki bisa dianggo kanthi apik nalika digabungake karo stroke lan bayangan. Gradien sing dipotong nyedhiyakake werna lan tekstur huruf, stroke ndadekake pinggiran cetha, lan bayangan bakal munggah saka latar mburi. Bebarengan, padha nggawe maneh tampilan berlapis saka kertu judhul sing dicet tangan nggunakake ora luwih saka CSS cilik. Kaya biasane, nyoba teks sing dipotong kanthi ati-ati, amarga quirks browser kadhangkala bisa mengaruhi bayangan lan rendering. Pisah Teks dadi Karakter Individu Kadhangkala aku ora pengin gaya kabeh tembung utawa judhul. Aku pengin gaya huruf individu - kanggo nudge karakter menyang Panggonan, menehi siji glyph bobot ekstra, utawa animate sawetara aksara independen. Ing HTML lan CSS sing prasaja, mung ana siji cara sing bisa dipercaya: mbungkus saben karakter ing unsur span dhewe. Aku bisa nindakake kanthi manual, nanging bakal rapuh, angel dijaga, lan bakal cepet rusak nalika salinan diganti. Nanging, nalika aku kudu kontrol saben huruf, Aku nggunakake perpustakaan pamisah teks kaya splt.js (sanajan solusi liyane kasedhiya). Iki njupuk simpul teks lan kanthi otomatis mbungkus tembung utawa karakter, menehi kula pancingan ekstra kanggo animate lan gaya tanpa kekacoan munggah markup sandi. Iku pendekatan sing tansah HTML sandi diwaca lan semantik, nalika menehi kula kontrol nggoleki-grained aku kudu nggawé ulang ora rata, karakter typography sampeyan ndeleng ing kertu judhul kartun klasik. Nanging, pendekatan iki teka karoperingatan aksesibilitas, amarga umume pembaca layar maca simpul teks kanthi urut. Dadi iki:
Hum Manis
…maca kaya sing dikarepake: Hum Manis Hum
Nanging iki:
H u m
…bisa diinterpretasi kanthi beda gumantung saka browser lan maca layar. Sawetara bakal nggabungake huruf lan maca tembung kanthi bener. Liyane bisa ngaso ing antarane huruf, sing ing skenario paling ala bisa uga kaya: "H..." "U..." "M..."
Sayange, sawetara solusi pamisah ora menehi asil sing bisa diakses, mula aku wis nulis splitter teks dhewe, splinter.js, sing saiki ana ing beta. Ngowahi Aksara Individu Kanggo ngaktifake Toon Text Splitter, aku nambah atribut data menyang unsur sing pengin dipisahake:
Hum Manis
Kaping pisanan, skrip saya misahake saben tembung dadi huruf individu lan mbungkus ing unsur span kanthi atribut kelas lan ARIA:
Skrip banjur njupuk konten awal saka unsur pamisah lan ditambahake minangka atribut aria kanggo njaga aksesibilitas:
Kanthi atribut kelas kasebut diterapake, aku banjur bisa gaya karakter individu sing aku milih.
Contone, kanggo "Hum Sweet Hum," aku pengin niru carane huruf kasebut pindhah saka garis dasar. Sawise nggunakake Toon Text Splitter, aku ngetrapake papat nilai terjemahan sing beda-beda nggunakake sawetara: pamilih anak-anak kanggo nggawe tampilan semi-acak: /* 4, 8, 12... */ .toon-char:nth-child(4n) {translate: 0 -8px; } /* 1, 5, 9... */ .toon-char:nth-child(4n+1) {translate: 0 -4px; } /* 2, 6, 10... */ .toon-char:nth-child(4n+2) {translate: 0 4px; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) {translate: 0 8px; }
Nanging nerjemahake mung siji properti sing bisa digunakake kanggo ngowahi teks toon.
Aku uga bisa muter karakter individu kasebut kanggo tampilan sing luwih semrawut: /* 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) { rotate: 4deg; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) { rotate: 8deg; }
Nanging nerjemahake mung siji properti sing bisa digunakake kanggo ngowahi teks toon. Aku uga bisa muter karakter individu kasebut kanggo tampilan sing luwih semrawut: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { muter: -4deg; }
/* 1, 5, 9... */ .toon-char:nth-child(4n+1) { muter: -8deg; }
/* 2, 6, 10... */ .toon-char:nth-child(4n+2) { muter: 4deg; }
/* 3, 7, 11... */ .toon-char:nth-child(4n+3) { muter: 8deg; }
Lan, mesthi, aku bisa nambah animasi kanggo jiggle karakter kasebut lan nggawa judhul gaya teks toon kanggo urip. Pisanan, aku nggawe animasi keyframe sing muter karakter:
@keyframes goyang { 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)); } }
Sadurunge ditrapake menyang unsur span sing digawe dening Toon Text Splitter: .toon-char { animasi: jiggle 3s ease-in-metu tanpa wates; ngowahi-asal: tengah ngisor; }
Lan pungkasane, nyetel jumlah rotasi lan wektu tundha sadurunge saben karakter wiwit jiggle: .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) { animation-delay: 0.1s; } .toon-char:nth-child(4n+1) { animation-delay: 0.3s; } .toon-char:nth-child(4n+2) { animation-delay: 0.5s; } .toon-char:nth-child(4n+3) { animation-delay: 0.7s; }
Siji Bingkai Kanggo Nggawe Kesan Seniman judhul kartun duwe siji pigura kanggo nggawe kesan, lan tipografi padha pentinge karo karya seni sing dicet. Padha bener ing web. Header utawa pahlawan sing dirancang kanthi apikarea mbutuhake kajelasan, karakter, lan kapercayan - ora mung gambar latar mburi jembaré lengkap burem. Kanthi sawetara properti CSS sing dipilih kanthi ati-ati - bayangan, stroke, latar mburi sing dipotong, lan sawetara animasi sing ditahan - kita bisa nggawe maneh pengaruh sing padha. Aku seneng teks toon ora amarga aku nostalgia, nanging amarga desaine sengaja. Nggawe pilihan sing disengaja, lan supaya tipografi teks toon sethitik nambah pukulan kanggo desain sampeyan.
