Setelah menyelesaikan proyek yang mengharuskan saya mempelajari semua yang saya bisa tentang animasi CSS dan SVG, saya mulai menulis seri tentang Smashing Animations dan “Bagaimana Kartun Klasik Menginspirasi CSS Modern.” Untuk menutup tahun ini, saya ingin menunjukkan cara menggunakan CSS modern untuk menciptakan elemen yang membuat Judul Toon begitu berpengaruh: tipografinya. Judul Desain Karya Seni Di era film bisu tahun 1920-an dan awal tahun 30-an, tipografi kartu judul film menciptakan suasana hati, mengatur adegan, dan mengingatkan penonton akan jenis film yang mereka bayar untuk menontonnya.
Kartu judul kartun juga memiliki branding, suasana hati, dan pengaturan adegan, semuanya digabung menjadi satu. Pada tahun-tahun awal, ketika anggaran studio besar lebih besar, kartu judul ini sering kali bersifat ilustratif dan penuh lukis.
Namun ketika televisi berkembang pesat pada tahun 1950-an, anggaran turun, dan kartu yang dirancang oleh seniman seperti Lawrence “Art” Goble mengadopsi bahasa visual baru, menjadi lebih grafis, bergaya, dan tidak terlalu rumit. Catatan: Lawrence “Art” Goble adalah salah satu pahlawan animasi Amerika abad pertengahan yang sering diabaikan. Dia terutama bekerja untuk Hanna-Barbera selama tahun-tahun paling berpengaruh di tahun 1950an dan 1960an. Goble bukanlah animator karakter. Perannya adalah menciptakan suasana, jadi dia merancang lingkungan untuk The Flintstones, Huckleberry Hound, Quick Draw McGraw, dan Yogi Bear, serta kartu judul pembuka yang menentukan suasananya. Kartu judulnya, yang menampilkan lukisan dengan logo di atasnya, membantu mendefinisikan tampilan ikonik Hanna-Barbera. Karya seni Goble untuk karakter seperti Quick Draw McGraw dan Yogi Bear efektif di layar TV yang lebih kecil. Daripada mereproduksi potongan gambar dari kartun tersebut, ia berfokus pada penyajian satu ide yang kuat — sering kali dalam bentuk siluet — yang menangkap esensinya. Dalam “The Buzzin’ Bear,” Yogi lewat dengan helikopter. Dia memantul, keranjang piknik di tangan, dalam “Bear on a Picnic,” dan untuk “Prize Fight Fright,” Yogi mengemas teks judulnya.
Dengan sedikit atau tanpa gerakan yang dapat diandalkan, frame tunggal Goble harus menciptakan suasana hati, mengatur adegan, dan mendeskripsikan sebuah cerita. Mereka melakukan ini dengan menggunakan warna datar, bentuk grafik, dan tipografi yang sering diintegrasikan ke dalam karya seni.
Sebagai desainer yang bekerja di web, judul toon dapat mengajari kita banyak hal tentang cara menyampaikan kepribadian merek, membuat kesan pertama, dan menetapkan ekspektasi terhadap pengalaman seseorang menggunakan produk atau situs web. Kita dapat belajar dari teknik para seniman dalam membuat spanduk yang efektif, header halaman arahan, dan bahkan splash screen kuno yang bagus. Tipografi Judul Toon Kartu judul kartun menunjukkan bagaimana penggabungan tipe dengan citra memberikan hasil yang dibutuhkan oleh header atau pahlawan. Dengan beberapa trik text-shadow, text-stroke, dan transformasi, CSS modern memungkinkan Anda memanfaatkan energi yang sama.
Generator Judul Teks Toon Di tengah penulisan artikel ini, saya menyadari akan berguna jika memiliki alat untuk menghasilkan teks dengan gaya seperti judul kartun yang sangat saya sukai. Jadi saya membuatnya. Generator Judul Teks Toon Saya memungkinkan Anda bereksperimen dengan warna, guratan, dan beberapa bayangan teks. Anda dapat menyesuaikan urutan cat, menerapkan spasi huruf, mempratinjau teks Anda dalam pilihan font sampel, dan kemudian menyalin CSS yang dihasilkan langsung ke clipboard Anda untuk digunakan dalam sebuah proyek. CSS Judul Toon Anda cukup menyalin-menempelkan CSS yang disediakan oleh Toon Text Title Generator untuk Anda. Tapi mari kita lihat lebih dekat apa fungsinya. Bayangan teks Lihatlah jenis judul ini dari episode Augie Doggie “Yuk-Yuk Duck,” dengan huruf kuning pucat dan bayangan gelap, keras, dan offset yang mengangkatnya dari latar belakang dan menciptakan ilusi kedalaman.
Anda mungkin sudah mengetahui bahwa text-shadow menerima empat nilai: (1) horizontal dan (2) offset vertikal, (3) blur, dan (4) warna yang solid atau semi-transparan. Nilai offset tersebut bisa positif atau negatif, jadi saya bisa meniru “Yuk-Yuk Duck” menggunakan bayangan keras yang ditarik ke bawah dan ke kanan: warna: #f7f76d; bayangan-teks: 5px 5px 0 #1e1904;
Di sisi lain, judul “Pint Giant” ini memiliki nuansa berbeda dengan bayangan semi-lunak negatifnya: warna: #c2a872; bayangan teks: -7px 5px 0 #b100e, 0 -5px 10px #546c6f;
Untuk menambah kedalaman ekstra dan menciptakan efek yang lebih menarik, saya dapat melapisi banyak bayangan. Untuk “Let’s Duck Out,” saya menggabungkan empat bayangan: yang pertama adalah bayangan padat dengan offset horizontal negatif untuk mengangkat teks dari latar belakang, diikuti dengan bayangan yang semakin lembut untuk menciptakan keburaman di sekitarnya: warna: #6F4D80; bayangan teks: -5 piksel5px 0 #260e1e, /* Bayangan 1 */ 0 0 15px #e9ce96, /* Bayangan 2 */ 0 0 30px #e9ce96, /* Bayangan 3 */ 0 0 30px #e9ce96; /* Bayangan 4 */
Bayangan ini menunjukkan bahwa menggunakan bayangan teks bukan hanya tentang menciptakan efek pencahayaan, karena bayangan tersebut juga dapat bersifat dekoratif dan menambah kepribadian. Goresan Teks Banyak kartu judul kartun menampilkan huruf dengan garis tebal yang membuatnya menonjol dari latar belakang. Saya dapat membuat ulang efek ini menggunakan goresan teks. Untuk waktu yang lama, properti ini hanya tersedia melalui awalan -webkit-, namun itu juga berarti kini properti ini didukung di browser modern.
text-stroke adalah singkatan untuk dua properti. Yang pertama, text-stroke-width, menggambar kontur di sekitar masing-masing huruf, sedangkan yang kedua, text-stroke-color, mengontrol warnanya. Untuk “Whatever Goes Pup,” saya menambahkan goresan biru 4px ke teks kuning: warna: #eff0cd; -webkit-teks-guratan: 4px #7890b5; guratan teks: 4px #7890b5;
Goresan bisa sangat berguna ketika dikombinasikan dengan bayangan, jadi untuk “Bertumbuh, Bertumbuh, Hilang,” saya menambahkan goresan tipis 3px ke bayangan 1px yang hampir kabur untuk membuat efek teks tiga dimensi ini: warna: #fbb999; bayangan-teks: 3px 5px 1px #5160b1; -webkit-teks-guratan: 3px #984336; guratan teks: 3px #984336;
Pesanan Cat Menggunakan guratan teks tidak selalu memberikan hasil yang diharapkan, terutama dengan huruf yang lebih tipis dan guratan yang lebih tebal, karena secara default browser menggambar guratan di atas isian. Sayangnya, CSS masih tidak mengizinkan saya menyesuaikan penempatan guratan seperti yang sering saya lakukan di Sketch. Namun, properti urutan cat memiliki nilai yang memungkinkan saya menempatkan goresan di belakang, bukan di depan, isian.
paint-order: stroke melukiskan goresan terlebih dahulu, lalu isiannya, sedangkan paint-order: fill melakukan yang sebaliknya: warna: #fbb999; urutan cat: isi; bayangan-teks: 3px 5px 1px #5160b1; warna-teks-guratan:#984336; lebar guratan teks: 3 piksel;
Goresan yang efektif membuat huruf tetap mudah dibaca, menambah bobot, dan — bila dikombinasikan dengan bayangan dan urutan cat — memberikan tampilan nyata pada teks datar. Latar Belakang Di Dalam Teks Banyak kartu judul kartun yang melampaui warna datar dengan menambahkan tekstur, gradien, atau detail ilustrasi pada tulisannya. Terkadang itu berupa tekstur, di lain waktu mungkin berupa gradien dengan perubahan nada yang halus. Di web, saya dapat membuat ulang efek ini dengan menggunakan gambar latar belakang atau gradien di belakang teks, lalu memotongnya menjadi bentuk huruf. Ini bergantung pada dua properti yang bekerja bersama: klip latar belakang: teks dan warna isi teks: transparan.
Pertama, saya menerapkan latar belakang di belakang teks. Ini bisa berupa gambar bitmap atau vektor atau gradien CSS. Untuk contoh Quick Draw McGraw episode “Baba Bait,” teks judul menyertakan gradien halus atas-bawah dari gelap ke terang: latar belakang: gradien linier(0deg, #667b6a, #1d271a);
Selanjutnya, saya klipkan latar belakang itu ke mesin terbang dan buat teksnya transparan sehingga latar belakangnya terlihat: -webkit-latar belakang-klip: teks; -webkit-teks-isi-warna: transparan;
Hanya dengan dua baris tersebut, latar belakang tidak lagi tergambar di belakang teks; sebaliknya, itu dilukis di dalamnya. Teknik ini bekerja sangat baik bila dikombinasikan dengan guratan dan bayangan. Gradien yang terpotong memberikan warna dan tekstur pada huruf, guratan menjaga tepinya tetap tajam, dan bayangan mengangkatnya dari latar belakang. Bersama-sama, mereka menciptakan kembali tampilan berlapis dari kartu judul yang dilukis dengan tangan hanya dengan menggunakan sedikit CSS. Seperti biasa, uji teks yang terpotong dengan hati-hati, karena kebiasaan browser terkadang dapat memengaruhi bayangan dan rendering. Memisahkan Teks Menjadi Karakter Individual Terkadang saya tidak ingin memberi gaya pada keseluruhan kata atau judul. Saya ingin memberi gaya pada masing-masing huruf — untuk mendorong karakter ke tempatnya, memberi bobot ekstra pada satu mesin terbang, atau menganimasikan beberapa huruf secara mandiri. Dalam HTML dan CSS biasa, hanya ada satu cara yang dapat diandalkan untuk melakukannya: membungkus setiap karakter dalam elemen spannya sendiri. Saya bisa melakukannya secara manual, tapi itu akan rapuh, sulit dirawat, dan akan cepat rusak saat salinan diubah. Sebaliknya, ketika saya memerlukan kontrol per huruf, saya menggunakan perpustakaan pemisahan teks seperti splt.js (meskipun solusi lain tersedia). Ini membutuhkan simpul teks dan secara otomatis membungkus kata atau karakter, memberi saya kaitan tambahan untuk dianimasikan dan ditata tanpa mengacaukan markup saya. Ini adalah pendekatan yang membuat HTML saya tetap mudah dibaca dan semantik, sekaligus memberi saya kontrol menyeluruh yang saya perlukan untuk membuat ulang tipografi yang tidak rata dan berkarakter seperti yang Anda lihat di kartu judul kartun klasik. Namun, pendekatan ini menyertainyaperingatan aksesibilitas, karena sebagian besar pembaca layar membaca node teks secara berurutan. Jadi ini:
Hum Manis Hum
…membaca seperti yang Anda harapkan: Hum Manis Hum
Tapi ini:
H kamu m
…dapat ditafsirkan secara berbeda tergantung pada browser dan pembaca layar. Beberapa orang akan menggabungkan huruf-hurufnya dan membaca kata-katanya dengan benar. Orang lain mungkin berhenti sejenak di antara huruf, yang dalam skenario terburuk mungkin terdengar seperti: “H…” “U…” “M…”
Sayangnya, beberapa solusi pemisahan tidak memberikan hasil yang selalu dapat diakses, jadi saya telah menulis pemisah teks saya sendiri, splinter.js, yang saat ini masih dalam versi beta. Mengubah Surat Individu Untuk mengaktifkan Toon Text Splitter saya, saya menambahkan atribut data- ke elemen yang ingin saya pisahkan:
Hum Manis Hum
Pertama, skrip saya memisahkan setiap kata menjadi huruf-huruf individual dan membungkusnya dalam elemen span dengan atribut kelas dan ARIA yang diterapkan:
Skrip kemudian mengambil konten awal elemen split dan menambahkannya sebagai atribut aria untuk membantu menjaga aksesibilitas:
Dengan menerapkan atribut kelas tersebut, saya kemudian dapat menata karakter individual sesuai pilihan saya.
Misalnya, untuk “Hum Sweet Hum”, saya ingin meniru bagaimana huruf-hurufnya bergeser menjauhi garis dasar. Setelah menggunakan Toon Text Splitter, saya menerapkan empat nilai terjemahan yang berbeda menggunakan beberapa pemilih :nth-child untuk membuat tampilan semi-acak: /* 4, 8, 12... */ .toon-char:nth-child(4n) { terjemahkan: 0 -8px; } /* 1, 5, 9... */ .toon-char:nth-child(4n+1) { terjemahkan: 0 -4px; } /* 2, 6, 10... */ .toon-char:nth-child(4n+2) { terjemahkan: 0 4px; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) { terjemahkan: 0 8px; }
Tapi terjemahan hanyalah satu properti yang bisa saya gunakan untuk mengubah teks toon saya.
Saya juga dapat memutar masing-masing karakter tersebut untuk tampilan yang lebih kacau: /* 4, 8, 12... */ .toon-line .toon-char:nth-child(4n) { putar: -4deg; } /* 1, 5, 9... */ .toon-char:nth-child(4n+1) { putar: -8deg; } /* 2, 6, 10... */ .toon-char:nth-child(4n+2) { putar: 4 derajat; } /* 3, 7, 11... */ .toon-char:nth-child(4n+3) { putar: 8 derajat; }
Tapi terjemahan hanyalah satu properti yang bisa saya gunakan untuk mengubah teks toon saya. Saya juga dapat memutar masing-masing karakter tersebut untuk tampilan yang lebih kacau: /* 4, 8, 12... */ .toon-line .toon-char:n-anak(4n) { putar: -4 derajat; }
/* 1, 5, 9... */ .toon-char:anak ke-n(4n+1) { putar: -8 derajat; }
/* 2, 6, 10... */ .toon-char:anak ke-n(4n+2) { putar: 4 derajat; }
/* 3, 7, 11... */ .toon-char:anak ke-n(4n+3) { putar: 8 derajat; }
Dan, tentu saja, saya dapat menambahkan animasi untuk menggoyangkan karakter tersebut dan menghidupkan judul gaya teks toon saya. Pertama, saya membuat animasi keyframe yang memutar karakter:
@keyframes bergoyang { 0%, 100% { transformasi: putar(var(--putaran dasar, 0deg)); } 25% { transformasi: putar(kalk(var(--putaran dasar, 0 derajat) + 3 derajat)); } 50% { transformasi: putar(kalk(var(--putaran dasar, 0 derajat) - 2 derajat)); } 75% { transformasi: putar(kalk(var(--putaran dasar, 0 derajat) + 1 derajat)); } }
Sebelum menerapkannya ke elemen span yang dibuat oleh Toon Text Splitter saya: .toon-char { animasi: goncangan 3s kemudahan masuk-keluar yang tak terbatas; transform-origin: tengah bawah; }
Dan terakhir, mengatur jumlah rotasi dan penundaan sebelum setiap karakter mulai 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) { penundaan animasi: 0,1 detik; } .toon-char:nth-child(4n+1) { penundaan animasi: 0,3 detik; } .toon-char:nth-child(4n+2) { penundaan animasi: 0,5 detik; } .toon-char:nth-child(4n+3) { penundaan animasi: 0,7 detik; }
Satu Bingkai Untuk Membuat Kesan Seniman judul kartun mempunyai satu bingkai untuk memberi kesan, dan tipografi mereka sama pentingnya dengan karya seni yang mereka lukis. Hal yang sama juga berlaku di web. Header atau pahlawan yang dirancang dengan baikarea tersebut membutuhkan kejelasan, karakter, dan kepercayaan diri — bukan sekadar gambar latar belakang lebar penuh yang memudar. Dengan beberapa properti CSS yang dipilih dengan cermat — bayangan, guratan, latar belakang yang terpotong, dan beberapa animasi yang terkendali — kita dapat menciptakan kembali dampak yang sama. Saya menyukai teks toon bukan karena saya bernostalgia, tetapi karena desainnya disengaja. Buatlah pilihan yang disengaja, dan biarkan sedikit tipografi teks menambah daya tarik pada desain Anda.
