Saatos réngsé proyék anu meryogikeun kuring diajar sadayana ngeunaan animasi CSS sareng SVG, kuring ngamimitian nyerat séri ieu ngeunaan Smashing Animations sareng "Kumaha Kartun Klasik Inspirasi CSS Modern." Pikeun ngabunderkeun taun ieu, kuring hoyong nunjukkeun ka anjeun kumaha ngagunakeun CSS modéren pikeun nyiptakeun unsur anu ngajantenkeun Judul Toon janten pangaruh: tipografina. Desain Karya Seni Judul Dina era jempé tina 1920s sarta mimiti '30s, tipografi kartu judul pilem urang nyiptakeun hiji wanda, nyetél adegan, sarta ngingetkeun panongton ngeunaan jenis pilem aranjeunna kukituna mayar ningali.
Kartu judul kartun ogé branding, mood, jeung pamandangan-setting, sadayana digulung jadi hiji. Dina taun-taun awal, nalika anggaran studio utama langkung ageung, kartu judul ieu sering ilustrasi sareng pelukis.
Tapi nalika televisi boomed salila 1950s, budgets turun, sarta kartu dirancang ku seniman kawas Lawrence "Art" Goble diadopsi basa visual anyar, jadi leuwih grafis, stylised, sarta kirang intricate. Catetan: Lawrence "Seni" Goble mangrupakeun salah sahiji pahlawan mindeng overlooked animasi Amérika pertengahan abad. Anjeunna utamina damel pikeun Hanna-Barbera salami taun-taun anu paling berpengaruh dina taun 1950-an sareng 1960-an. Goble sanés animator karakter. Peranna nyaéta nyiptakeun suasana, ku kituna anjeunna mendesain lingkungan pikeun The Flintstones, Huckleberry Hound, Quick Draw McGraw, sareng Yogi Bear, ogé kartu judul pambuka anu nyetél nada. kartu judul na, featuring lukisan kalawan logo overlaid, mantuan nangtukeun tampilan iconic Hanna-Barbera. Karya seni Goble pikeun karakter sapertos Quick Draw McGraw sareng Yogi Bear efektif dina layar TV anu langkung alit. Tinimbang reproducing a kénéh tina kartun, anjeunna fokus kana presenting hiji tunggal, gagasan kuat - mindeng di silhouette - nu direbut panggih na. Dina "The Buzzin 'Bear," Yogi buzzes ku dina helikopter. Anjeunna mumbul jauh, pic-a-nic karanjang di leungeun, dina "Bear on a Picnic," jeung na "Hadiah Fight Fright," Yogi buleud téks judul.
Kalayan sakedik atanapi henteu aya gerak anu tiasa diandelkeun, pigura tunggal Goble kedah nyiptakeun suasana, nyetél adegan, sareng ngajelaskeun carita. Aranjeunna ngalakukeun ieu nganggo warna datar, bentuk grafis, sareng tipografi anu sering diintegrasikeun kana karya seni.
Salaku désainer anu dianggo dina web, judul toon bisa ngajarkeun urang nyatu ngeunaan kumaha carana nepikeun kapribadian brand urang, nyieun gambaran kahiji, tur nyetel ekspektasi pikeun pangalaman batur urang ngagunakeun produk atawa ramatloka. Urang tiasa diajar tina téknik para seniman pikeun nyiptakeun spanduk anu épéktip, header halaman badarat, sareng layar splash anu saé. Toon Judul Tipografi Kartu judul kartun nunjukkeun kumaha ngahijikeun jinis sareng citra nyayogikeun punch anu dibutuhkeun pikeun header atanapi pahlawan. Kalayan sakeupeul téks-shadow, text-stroke, sareng trik transformasi, CSS modern ngamungkinkeun anjeun ngetok énergi anu sami.
Generator Judul Teks Toon Satengah-tengah tulisan tulisan ieu, kuring sadar bakal aya mangpaatna pikeun gaduh alat pikeun ngahasilkeun téks gaya sapertos judul kartun anu kuring resep pisan. Ku kituna kuring nyieun hiji. My Toon Text Title Generator ngamungkinkeun anjeun ékspérimén sareng warna, guratan, sareng sababaraha bayangan téks. Anjeun tiasa nyaluyukeun urutan cet, nerapkeun spasi hurup, nilik téks anjeun dina pilihan fon sampel, lajeng nyalin CSS dihasilkeun langsung ka clipboard Anjeun pikeun dipaké dina hiji proyek. Toon Judul CSS Anjeun ngan saukur tiasa nyalin-témpél CSS anu disayogikeun ku Generator Judul Teks Toon. Tapi hayu urang nempo leuwih deukeut naon eta. Kalangkang téks Tingali kana jenis dina judul ieu ti episode Augie Doggie urang "Yuk-Yuk bebek,"Kalayan hurup konéng bulak sarta poék, teuas, offset kalangkang nu lifts eta kaluar tukang sarta nyiptakeun ilusi tina jero.
Anjeun panginten parantos terang yén kalangkang téks nampi opat nilai: (1) horizontal sareng (2) offset vertikal, (3) blur, sareng (4) warna anu tiasa padet atanapi semi-transparan. Nilai offset éta tiasa positip atanapi négatif, janten kuring tiasa ngulang "Bebek Yuk-Yuk" nganggo kalangkang anu ditarik ka handap sareng ka katuhu: warna: #f7f76d; téks-kalangkang: 5px 5px 0 # 1e1904;
Di sisi anu sanés, judul "Pint Giant" ieu gaduh rasa anu béda sareng bayangan semi-lemes négatip na: warna: #c2a872; kalangkang téks: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Pikeun nambihan langkung jero sareng nyiptakeun épék anu langkung narik, kuring tiasa ngalapis sababaraha kalangkang. Pikeun "Hayu Bebek Out," kuring ngagabungkeun opat kalangkang: kahiji kalangkang padet sareng offset horizontal négatip pikeun ngangkat téks tina latar tukang, dituturkeun ku kalangkang anu langkung lembut pikeun nyiptakeun kabur di sakurilingna: warna: # 6F4D80; kalangkang téks: -5px5px 0 #260e1e, /* Kalangkang 1 */ 0 0 15px #e9ce96, /* Kalangkang 2 */ 0 0 30px #e9ce96, /* Kalangkang 3 */ 0 0 30px #e9ce96; /* Kalangkang 4 */
Bayangan ieu nunjukkeun yén ngagunakeun téks-kalangkang sanés ngan ukur nyiptakeun épék cahaya, sabab ogé tiasa janten hiasan sareng nambihan kapribadian. Stroke téks Loba kartu judul kartun ciri hurup kalawan outline kandel nu ngajadikeun eta nangtung kaluar ti tukang. Abdi tiasa nyiptakeun éfék ieu nganggo téks-stroke. Pikeun lila, sipat ieu ngan sadia ngaliwatan awalan -webkit-, tapi ogé hartina ayeuna dirojong sakuliah browser modern.
téks-stroke mangrupakeun shorthand pikeun dua sipat. Kahiji, téks-stroke-lebar, ngagambar kontur sabudeureun hurup individu, sedengkeun nu kadua, téks-stroke-warna, ngadalikeun warna na. Pikeun "Naon waé Pup," kuring nambihan stroke biru 4px kana téks konéng: warna: #eff0cd; -webkit-téks-stroke: 4px # 7890b5; téks-stroke: 4px # 7890b5;
Stroke tiasa mangpaat utamana lamun aranjeunna digabungkeun jeung bayangan, jadi pikeun "Tumuwuh, Tumuwuh, Isro," Kuring ditambahkeun stroke 3px ipis kana kalangkang 1px bieu kabur pikeun nyieun éfék téks tilu diménsi ieu: warna: #fbb999; téks-kalangkang: 3px 5px 1px #5160b1; -webkit-téks-stroke: 3px # 984336; téks-stroke: 3px # 984336;
Urutan cet Ngagunakeun téks-stroke teu salawasna ngahasilkeun hasil ekspektasi, utamana ku hurup thinner sarta stroke kandel, sabab sacara standar browser draws stroke ngaliwatan eusian. Hanjakalna, CSS masih henteu ngijinkeun kuring nyaluyukeun panempatan stroke sapertos anu sering kuring lakukeun dina Sketsa. Sanajan kitu, sipat cet-urutan boga nilai nu ngidinan kuring pikeun nempatkeun stroke tukangeun, tinimbang di hareup, eusian.
paint-urutan: stroke cét stroke munggaran, lajeng eusian, sedengkeun paint-urutan: eusian ngalakukeun sabalikna: warna: #fbb999; cét-urutan: eusian; téks-kalangkang: 3px 5px 1px #5160b1; téks-stroke-warna: # 984336; téks-stroke-lebar: 3px;
Hiji stroke éféktif ngajaga hurup bisa dibaca, nambahan beurat, sarta - lamun digabungkeun jeung kalangkang jeung urutan cet - méré téks datar ayana nyata. Latar Dina Téks Seueur kartu judul kartun ngalangkungan warna datar ku cara nambihan tékstur, gradién, atanapi detail ilustrasi kana hurup. Kadang-kadang éta tékstur, anu sanésna tiasa janten gradién kalayan pergeseran tonal anu halus. Dina wéb, kuring tiasa nyiptakeun deui éfék ieu nganggo gambar latar tukang atanapi gradién di tukangeun téks, teras motong kana bentuk hurup. Ieu ngandelkeun dua sipat gawé bareng: latar-klip: téks na téks-eusian-warna: transparan.
Mimiti, kuring nerapkeun latar tukangeun téks. Ieu tiasa janten bitmap atanapi gambar vektor atanapi gradién CSS. Pikeun conto ieu tina episode Quick Draw McGraw "Baba Bait," téks judulna kalebet gradién luhur-handap anu halus tina poék ka caang: tukang: linier-gradién (0deg, #667b6a, #1d271a);
Salajengna, kuring klip latar tukang kana glyphs sarta nyieun téks transparan jadi latar tukang nembongkeun ngaliwatan: -webkit-background-klip: téks; -webkit-téks-eusian-warna: transparan;
Kalawan ngan eta dua garis, tukang geus euweuh dicét balik téks; tibatan, eta dicét dina eta. Téhnik ieu tiasa dianggo saé upami digabungkeun sareng guratan sareng kalangkang. A gradién clipped nyadiakeun hurup kalawan warna jeung tékstur, stroke ngajaga ujung na seukeut, sarta kalangkang elevates eta ti tukang. Kalawan babarengan, aranjeunna nyieun deui tampilan layered tina kartu judul leungeun-dicét maké nanaon leuwih ti hiji CSS saeutik. Sapertos biasa, uji téks dipotong sacara saksama, sabab quirks browser sakapeung tiasa mangaruhan bayangan sareng rendering. Ngabagi téks kana karakter individu Sakapeung kuring henteu hoyong gaya sadayana kecap atanapi judul. Abdi hoyong gaya hurup individu - mun nudge karakter kana tempat, masihan hiji glyph beurat tambahan, atawa ngahirupkeun sababaraha hurup mandiri. Dina HTML sareng CSS polos, ngan ukur aya hiji cara anu tiasa dipercaya pikeun ngalakukeun éta: bungkus unggal karakter dina unsur bentang sorangan. Abdi tiasa ngalakukeun éta sacara manual, tapi éta bakal rapuh, sesah dijaga, sareng bakal gancang rusak nalika salinan parobihan. Gantina, lamun Abdi peryogi kontrol per-hurup, Kuring ngagunakeun perpustakaan téks-beulah kawas splt.js (sanajan solusi séjén sadia). Ieu nyokot titik téks tur otomatis wraps kecap atawa karakter, mere kuring hook tambahan pikeun ngahirupkeun jeung gaya tanpa messing up markup kuring. Éta mangrupikeun pendekatan anu ngajaga HTML kuring tiasa dibaca sareng semantik, bari masihan kuring kontrol anu saé anu kuring peryogikeun pikeun nyiptakeun tipografi anu henteu rata, anu karakter anu anjeun tingali dina kartu judul kartun klasik. Sanajan kitu, pendekatan ieu hadir kalawancaveats aksés, sabab lolobana pamiarsa layar maca titik téks dina urutan. Janten ieu:
Hum Manis Hum
...baca sapertos anu anjeun ngarepkeun: Hum Manis Hum
Tapi ieu:
H u m
...bisa diinterpretasi béda-béda gumantung kana browser sareng pamaca layar. Sababaraha bakal concatenate hurup jeung maca kecap bener. Anu sanés tiasa ngareureuhkeun antara hurup, anu dina skenario anu paling parah sigana sapertos kieu: "H..." "U..." "M..."
Sedih, sababaraha solusi bengkahna teu nganteurkeun hiji hasilna salawasna diaksés, jadi kuring geus ditulis splitter téks kuring sorangan, splinter.js, nu ayeuna di béta. Ngarobah Surat Pribadi Pikeun ngaktipkeun Splitter Teks Toon kuring, kuring nambihan atribut data- kana unsur anu kuring hoyong bagikeun:
Hum Manis Hum
Kahiji, naskah kuring misahkeun unggal kecap kana hurup individu jeung wraps aranjeunna dina elemen bentang jeung kelas jeung atribut ARIA dilarapkeun:
Naskah teras nyandak eusi awal unsur pamisah sareng nambihanana salaku atribut aria pikeun ngabantosan aksés aksés:
Kalawan eta atribut kelas dilarapkeun, abdi lajeng bisa gaya karakter individu sakumaha kuring milih.
Contona, pikeun "Hum Sweet Hum," Abdi hoyong ngayakeun réplikasi kumaha hurup na mindahkeun jauh ti baseline. Saatos nganggo Toon Text Splitter, kuring nerapkeun opat nilai tarjamahan anu béda-béda nganggo sababaraha: pamilih anak-anak pikeun nyiptakeun tampilan semi-acak: /* 4, 8, 12... */ .toon-char: nth-anak (4n) {narjamahkeun: 0 -8px; } /* Ka-1, ka-5, ka-9... */ .toon-char:nth-child(4n+1) {narjamahkeun: 0 -4px; } /* Ka-2, ka-6, ka-10... */ .toon-char:nth-child(4n+2) {narjamahkeun: 0 4px; } /* Ka-3, ka-7, ka-11... */ .toon-char:nth-child(4n+3) {narjamahkeun: 0 8px; }
Tapi narjamahkeun ngan ukur hiji sipat anu kuring tiasa dianggo pikeun ngarobih téks toon kuring.
Kuring ogé tiasa muterkeun karakter individu pikeun tampilan anu langkung kacau: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) {muterkeun: -4deg; } /* Ka-1, ka-5, ka-9... */ .toon-char: nth-anak (4n+1) {muterkeun: -8deg; } /* Ka-2, ka-6, ka-10... */ .toon-char:nth-anak(4n+2) {muterkeun: 4deg; } /* Ka-3, ka-7, ka-11... */ .toon-char: nth-anak (4n+3) {muterkeun: 8deg; }
Tapi narjamahkeun ngan ukur hiji sipat anu kuring tiasa dianggo pikeun ngarobih téks toon kuring. Kuring ogé tiasa muterkeun karakter individu pikeun tampilan anu langkung kacau: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { muterkeun: -4deg; }
/* Ka-1, ka-5, ka-9... */ .toon-char:nth-child(4n+1) { muterkeun: -8deg; }
/* Ka-2, ka-6, ka-10... */ .toon-char:nth-child(4n+2) { muterkeun: 4deg; }
/* Ka-3, ka-7, ka-11... */ .toon-char:nth-child(4n+3) { muterkeun: 8deg; }
Sareng, tangtosna, kuring tiasa nambihan animasi pikeun ngagiling karakter-karakter éta sareng ngahirupkeun judul gaya téks toon kuring. Mimiti, kuring nyiptakeun animasi keyframe anu muterkeun karakter:
@keyframes goyang { 0%, 100% {transformasi: rotate(var(--base-rotate, 0deg)); } 25% {transformasi: rotate(calc(var(--base-rotate, 0deg) + 3deg)); } 50% {transformasi: rotate(calc(var(--base-rotate, 0deg) - 2deg)); } 75% {transformasi: rotate(calc(var(--base-rotate, 0deg) + 1deg)); } }
Sateuacan nerapkeunana kana elemen bentang anu diciptakeun ku Toon Text Splitter kuring: .toon-char { animasi: jiggle 3s taya wates betah-in-kaluar; transformasi-asal: tengah handap; }
Sarta pamustunganana, nyetel jumlah rotasi sarta reureuh saméméh unggal karakter mimiti 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-anak (4n) {animasi-delay: 0.1s; } .toon-char:nth-child(4n+1) {animasi-delay: 0.3s; } .toon-char: nth-anak (4n + 2) {animasi-delay: 0.5s; } .toon-char: nth-anak (4n + 3) {animasi-delay: 0.7s; }
Hiji Pigura Pikeun Jieun Hiji Impresi Artis judul kartun ngagaduhan hiji pigura pikeun masihan kesan, sareng tipografina penting sareng karya seni anu dicét. Sami bener dina web. A lulugu atawa pahlawan dirancang ogéwewengkon perlu kajelasan, karakter, jeung kapercayaan - lain saukur gambar latar pinuh-lebar luntur. Kalawan sababaraha sipat CSS dipilih taliti - kalangkang, stroke, backgrounds clipped, sarta sababaraha animasi kaampeuh - urang bisa nyieun deui dampak anu sarua. Abdi resep téks toon sanés kusabab kuring nostalgia, tapi kusabab desainna dihaja. Jieun pilihan ngahaja, sarta ngantep tipografi téks toon saeutik nambahkeun punch kana desain Anjeun.
