Selepas menyelesaikan projek yang memerlukan saya mempelajari semua yang saya boleh tentang animasi CSS dan SVG, saya mula menulis siri ini tentang Animasi Menghancurkan dan "Bagaimana Kartun Klasik Menginspirasikan CSS Moden." Untuk melengkapkan tahun ini, saya ingin menunjukkan kepada anda cara menggunakan CSS moden untuk mencipta elemen yang menjadikan Toon Titles begitu berkesan: tipografi mereka. Tajuk Rekaan Karya Seni Dalam era senyap 1920-an dan awal 30-an, tipografi kad tajuk filem mencipta suasana, menetapkan adegan dan mengingatkan penonton tentang jenis filem yang mereka bayar untuk menonton.
Kad tajuk kartun juga merupakan penjenamaan, mood dan latar belakang, semuanya digabungkan menjadi satu. Pada tahun-tahun awal, apabila belanjawan studio utama lebih besar, kad tajuk ini selalunya menggambarkan dan melukis.
Tetapi apabila televisyen berkembang pesat pada tahun 1950-an, belanjawan menurun, dan kad yang direka oleh artis seperti Lawrence "Art" Goble menggunakan bahasa visual baharu, menjadi lebih grafik, bergaya dan kurang rumit. Nota: Lawrence "Art" Goble ialah salah satu wira animasi Amerika abad pertengahan yang sering diabaikan. Beliau terutamanya bekerja untuk Hanna-Barbera semasa tahun-tahun paling berpengaruh pada 1950-an dan 1960-an. Goble bukanlah seorang animator watak. Peranannya adalah untuk mencipta suasana, jadi dia mereka bentuk persekitaran untuk The Flintstones, Huckleberry Hound, Quick Draw McGraw, dan Yogi Bear, serta kad tajuk pembukaan yang menetapkan nada. Kad tajuknya, yang memaparkan lukisan dengan logo bertindih, membantu menentukan rupa ikonik Hanna-Barbera. Karya seni Goble untuk watak seperti Quick Draw McGraw dan Yogi Bear berkesan pada skrin TV yang lebih kecil. Daripada mengeluarkan semula pegun daripada kartun itu, dia menumpukan pada menyampaikan satu idea yang kukuh — selalunya dalam bentuk siluet — yang menangkap intipatinya. Dalam "The Buzzin' Bear," Yogi berdengung dengan menaiki helikopter. Dia melantun pergi, bakul pic-a-nic di tangan, dalam "Bear on a Picnic," dan untuk "Prize Fight Fright"nya, Yogi kotak teks tajuk.
Dengan sedikit atau tiada gerakan untuk bergantung, bingkai tunggal Goble terpaksa mencipta mood, menetapkan adegan dan menerangkan cerita. Mereka melakukan ini menggunakan warna rata, bentuk grafik dan tipografi yang sering disepadukan ke dalam karya seni.
Sebagai pereka bentuk yang bekerja di web, tajuk toon boleh mengajar kita banyak tentang cara menyampaikan personaliti jenama, membuat kesan pertama dan menetapkan jangkaan untuk pengalaman seseorang menggunakan produk atau tapak web. Kita boleh belajar daripada teknik artis untuk mencipta sepanduk yang berkesan, pengepala halaman pendaratan dan juga skrin percikan fesyen yang bagus. Tipografi Tajuk Toon Kad tajuk kartun menunjukkan cara penggabungan jenis dengan imejan memberikan pukulan yang diperlukan oleh pengepala atau wira. Dengan segelintir bayang teks, lejang teks dan helah transformasi, CSS moden membolehkan anda memanfaatkan tenaga yang sama.
Penjana Tajuk Teks Toon Di tengah-tengah menulis artikel ini, saya menyedari adalah berguna untuk mempunyai alat untuk menghasilkan teks yang digayakan seperti tajuk kartun yang sangat saya sukai. Jadi saya buat satu. My Toon Text Title Generator membolehkan anda bereksperimen dengan warna, strok dan berbilang bayang teks. Anda boleh melaraskan susunan cat, menggunakan jarak huruf, pratonton teks anda dalam pilihan fon sampel, dan kemudian salin CSS yang dijana terus ke papan keratan anda untuk digunakan dalam projek. CSS Tajuk Toon Anda hanya boleh salin-tampal CSS yang disediakan oleh Toon Text Title Generator kepada anda. Tetapi mari kita lihat lebih dekat apa yang dilakukannya. Bayangan teks Lihat jenis dalam tajuk ini daripada episod Augie Doggie "Yuk-Yuk Duck," dengan huruf kuning pucat dan bayang-bayang mengimbangi gelap, keras, yang mengangkatnya dari latar belakang dan mencipta ilusi kedalaman.
Anda mungkin sudah tahu bahawa bayang teks menerima empat nilai: (1) mendatar dan (2) mengimbangi menegak, (3) kabur dan (4) warna yang boleh menjadi pepejal atau separa lutsinar. Nilai offset tersebut boleh menjadi positif atau negatif, jadi saya boleh meniru "Itik Yuk-Yuk" menggunakan bayang-bayang keras yang ditarik ke bawah dan ke kanan: warna: #f7f76d; bayang teks: 5px 5px 0 #1e1904;
Sebaliknya, tajuk "Pint Giant" ini mempunyai rasa yang berbeza dengan bayang separuh lembut negatifnya: warna: #c2a872; bayangan teks: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Untuk menambah kedalaman tambahan dan mencipta kesan yang lebih menarik, saya boleh melapiskan berbilang bayang-bayang. Untuk "Let's Duck Out", saya menggabungkan empat bayang: yang pertama bayang pepejal dengan offset mendatar negatif untuk mengangkat teks dari latar belakang, diikuti dengan bayang-bayang yang semakin lembut untuk mencipta kabur di sekelilingnya: warna: #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 */
Bayang-bayang ini menunjukkan bahawa menggunakan bayang teks bukan hanya tentang mencipta kesan pencahayaan, kerana ia juga boleh menjadi hiasan dan menambah keperibadian. Strok Teks Banyak kad tajuk kartun menampilkan huruf dengan garis besar tebal yang menonjolkannya dari latar belakang. Saya boleh mencipta semula kesan ini menggunakan lejang teks. Untuk masa yang lama, sifat ini hanya tersedia melalui awalan -webkit-, tetapi itu juga bermakna ia kini disokong merentas penyemak imbas moden.
lejang teks ialah singkatan untuk dua sifat. Yang pertama, lebar lejang-teks, melukis kontur di sekeliling huruf individu, manakala warna lejang-teks yang kedua, mengawal warnanya. Untuk "Whatever Goes Pup," saya menambahkan strok biru 4px pada teks kuning: warna: #eff0cd; -webkit-text-stroke: 4px #7890b5; lejang teks: 4px #7890b5;
Strok boleh berguna terutamanya apabila ia digabungkan dengan bayang-bayang, jadi untuk "Berkembang, Berkembang, Hilang," saya menambah lejang 3px nipis pada bayang-bayang 1px yang hampir tidak kabur untuk mencipta kesan teks tiga dimensi ini: warna: #fbb999; bayang teks: 3px 5px 1px #5160b1; -webkit-text-stroke: 3px #984336; lejang teks: 3px #984336;
Pesanan Cat Menggunakan strok teks tidak selalu menghasilkan hasil yang diharapkan, terutamanya dengan huruf yang lebih nipis dan strok yang lebih tebal, kerana secara lalai penyemak imbas melukis strok di atas isian. Malangnya, CSS masih tidak membenarkan saya melaraskan peletakan strok seperti yang sering saya lakukan dalam Sketch. Walau bagaimanapun, sifat pesanan cat mempunyai nilai yang membolehkan saya meletakkan lejang di belakang, bukannya di hadapan, isian.
paint-order: strok melukis strok dahulu, kemudian mengisi, manakala paint-order: fill melakukan sebaliknya: warna: #fbb999; perintah cat: mengisi; bayang teks: 3px 5px 1px #5160b1; text-stroke-color:#984336; lebar-lejang-teks: 3px;
Sapuan yang berkesan memastikan huruf boleh dibaca, menambah berat dan — apabila digabungkan dengan bayang-bayang dan susunan cat — memberikan kehadiran sebenar teks rata. Latar Belakang Dalam Teks Banyak kad tajuk kartun melampaui warna rata dengan menambahkan tekstur, kecerunan atau perincian bergambar pada huruf. Kadang-kadang itu tekstur, kadang-kadang ia mungkin kecerunan dengan perubahan tonal yang halus. Di web, saya boleh mencipta semula kesan ini dengan menggunakan imej latar belakang atau kecerunan di belakang teks, dan kemudian memotongnya mengikut bentuk huruf. Ini bergantung pada dua sifat yang berfungsi bersama: klip latar belakang: teks dan warna isian teks: lutsinar.
Pertama, saya menggunakan latar belakang di belakang teks. Ini boleh menjadi imej peta bit atau vektor atau kecerunan CSS. Untuk contoh ini daripada episod Quick Draw McGraw "Baba Bait", teks tajuk termasuk kecerunan atas-bawah yang halus daripada gelap kepada terang: latar belakang: kecerunan linear(0deg, #667b6a, #1d271a);
Seterusnya, saya klip latar belakang itu ke glyphs dan membuat teks telus supaya latar belakang menunjukkan melalui: -webkit-background-clip: teks; -webkit-text-fill-color: lutsinar;
Dengan hanya dua baris itu, latar belakang tidak lagi dicat di belakang teks; sebaliknya, ia dicat di dalamnya. Teknik ini berfungsi dengan baik apabila digabungkan dengan pukulan dan bayang-bayang. Kecerunan terpotong memberikan warna dan tekstur pada huruf, sapuan mengekalkan tepinya tajam dan bayang-bayang mengangkatnya dari latar belakang. Bersama-sama, mereka mencipta semula rupa berlapis kad tajuk yang dilukis dengan tangan menggunakan tidak lebih daripada sedikit CSS. Seperti biasa, uji teks yang dipotong dengan berhati-hati, kerana kebiasaan penyemak imbas kadangkala boleh menjejaskan bayang-bayang dan pemaparan. Membahagikan Teks Kepada Aksara Individu Kadang-kadang saya tidak mahu menggayakan keseluruhan perkataan atau tajuk. Saya mahu menggayakan huruf individu — untuk memasukkan watak ke tempatnya, memberikan satu glif berat tambahan atau menghidupkan beberapa huruf secara bebas. Dalam HTML dan CSS biasa, hanya ada satu cara yang boleh dipercayai untuk melakukannya: balut setiap aksara dalam elemen rentangnya sendiri. Saya boleh melakukannya secara manual, tetapi ia akan menjadi rapuh, sukar untuk dikekalkan dan akan cepat rosak apabila salinan berubah. Sebaliknya, apabila saya memerlukan kawalan setiap huruf, saya menggunakan perpustakaan pemisah teks seperti splt.js (walaupun penyelesaian lain tersedia). Ini memerlukan nod teks dan membungkus perkataan atau aksara secara automatik, memberikan saya cangkuk tambahan untuk menganimasikan dan menggayakan tanpa mengacaukan penanda saya. Ini adalah pendekatan yang memastikan HTML saya boleh dibaca dan semantik, sambil memberi saya kawalan terperinci yang saya perlukan untuk mencipta semula tipografi yang tidak sekata dan bercirikan yang anda lihat dalam kad tajuk kartun klasik. Walau bagaimanapun, pendekatan ini disertakankaveat kebolehaksesan, kerana kebanyakan pembaca skrin membaca nod teks mengikut urutan. Jadi ini:
Hum Manis
…membaca seperti yang anda jangkakan: Hum Sweet Hum
Tetapi ini:
H u m
…boleh ditafsir secara berbeza bergantung pada penyemak imbas dan pembaca skrin. Ada yang akan menggabungkan huruf dan membaca perkataan dengan betul. Orang lain mungkin menjeda antara huruf, yang dalam senario terburuk mungkin berbunyi seperti: “H…” “U…” “M…”
Malangnya, sesetengah penyelesaian pemisahan tidak memberikan hasil yang sentiasa boleh diakses, jadi saya telah menulis pembahagi teks saya sendiri, splinter.js, yang kini dalam versi beta. Mengubah Huruf Individu Untuk mengaktifkan Toon Text Splitter saya, saya menambah atribut data pada elemen yang saya ingin belah:
Hum Sweet Hum
Pertama, skrip saya memisahkan setiap perkataan ke dalam huruf individu dan membungkusnya dalam elemen span dengan atribut kelas dan ARIA digunakan:
Skrip kemudian mengambil kandungan awal elemen split dan menambahkannya sebagai atribut aria untuk membantu mengekalkan kebolehaksesan:
Dengan atribut kelas tersebut digunakan, saya kemudian boleh menggayakan aksara individu seperti yang saya pilih.
Contohnya, untuk "Hum Sweet Hum," saya ingin meniru cara hurufnya beralih daripada garis dasar. Selepas menggunakan Toon Text Splitter saya, saya menggunakan empat nilai terjemahan yang berbeza menggunakan beberapa pemilih :nth-child untuk mencipta rupa separa rawak: /* ke-4, ke-8, ke-12... */ .toon-char:nth-child(4n) { terjemah: 0 -8px; } /* ke-1, ke-5, ke-9... */ .toon-char:nth-child(4n+1) { terjemah: 0 -4px; } /* ke-2, ke-6, ke-10... */ .toon-char:nth-child(4n+2) { terjemah: 0 4px; } /* ke-3, ke-7, ke-11... */ .toon-char:nth-child(4n+3) { terjemah: 0 8px; }
Tetapi terjemah hanyalah satu sifat yang boleh saya gunakan untuk mengubah teks toon saya.
Saya juga boleh memutarkan watak individu tersebut untuk rupa yang lebih huru-hara: /* ke-4, ke-8, ke-12... */ .toon-line .toon-char:nth-child(4n) { rotate: -4deg; } /* ke-1, ke-5, ke-9... */ .toon-char:nth-child(4n+1) { rotate: -8deg; } /* ke-2, ke-6, ke-10... */ .toon-char:nth-child(4n+2) { putar: 4deg; } /* ke-3, ke-7, ke-11... */ .toon-char:nth-child(4n+3) { putar: 8deg; }
Tetapi terjemah hanyalah satu sifat yang boleh saya gunakan untuk mengubah teks toon saya. Saya juga boleh memutarkan watak individu tersebut untuk rupa yang lebih huru-hara: /* ke-4, ke-8, ke-12... */ .toon-line .toon-char:nth-child(4n) { putar: -4deg; }
/* ke-1, ke-5, ke-9... */ .toon-char:nth-child(4n+1) { putar: -8deg; }
/* ke-2, ke-6, ke-10... */ .toon-char:nth-child(4n+2) { putar: 4deg; }
/* ke-3, ke-7, ke-11... */ .toon-char:nth-child(4n+3) { putar: 8deg; }
Dan, sudah tentu, saya boleh menambah animasi untuk menggoncang watak-watak tersebut dan menghidupkan tajuk gaya teks toon saya. Pertama, saya mencipta animasi kerangka utama yang memutar aksara:
@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)); } }
Sebelum menggunakannya pada elemen span yang dibuat oleh Toon Text Splitter saya: .toon-char { animasi: goyang 3s kemudahan-keluar yang tidak terhingga; transform-asal: tengah bawah; }
Dan akhirnya, tetapkan jumlah putaran dan kelewatan sebelum setiap aksara mula bergoyang: .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; }
Satu Bingkai Untuk Membuat Kesan Artis tajuk kartun mempunyai satu bingkai untuk membuat kesan, dan tipografi mereka sama pentingnya dengan karya seni yang mereka lukis. Perkara yang sama berlaku di web. Tajuk atau wira yang direka dengan baikkawasan memerlukan kejelasan, watak dan keyakinan — bukan sekadar imej latar belakang lebar penuh yang pudar. Dengan beberapa sifat CSS yang dipilih dengan teliti — bayang-bayang, pukulan, latar belakang terpotong dan beberapa animasi terkawal — kami boleh mencipta semula impak yang sama. Saya suka teks toon bukan kerana saya nostalgia, tetapi kerana reka bentuknya disengajakan. Buat pilihan yang disengajakan, dan biarkan sedikit tipografi teks toon menambah kesan pada reka bentuk anda.
