Komik telah menjadi inspirasi bagi banyak dari kita. Mereka berdampak pada setiap sudut budaya kita. Cobalah pergi ke bioskop tanpa setidaknya satu film berbasis komik yang ditampilkan. Tampaknya hampir mustahil.
Gaya mereka juga merangkak ke desain web. Kami melihatnya dalam warna yang berani, tipografi yang keterlaluan, dan tata letak yang unik.
Kemajuan dalam CSS dan JavaScript memungkinkan desainer untuk menghidupkan gaya ini. Tidak ada kekurangan cara untuk menambahkan bakat yang terinspirasi komik ke situs web Anda.
Jadi, bagaimana desainer web membawa gaya komik secara online? Mari kita periksa beberapa contoh apa yang bisa dilakukan kombinasi kode dan kreativitas.
Bubbles Teks Gaya Komik – CSS
Dibuat oleh Josetxu
Cuplikan ini menunjukkan gaya buku komik klasik. Teks besar dan berani berteriak di atas latar belakang warna -warni. CSS Grid digunakan untuk menyejajarkan berbagai tata letak. Bonus: Klik satu kata untuk mengedit teks. Wow! Itu keren.
Lihat pena Bubbles Teks Gaya Komik – CSS oleh Josetxu
Template web komik scroller samping
Dibuat oleh Terry Scrimsher
Berikut adalah contoh yang menambah gerakan ke dalam campuran. Area pahlawan gulungan samping membuat pengalaman yang menarik perhatian. Teks animasi memberikan kontras dan elemen kesenangan.
Lihat pena Template web gulir samping oleh Terry Scrimsher
Gaya buku komik CSS UI
Dibuat oleh Gabriele Corti
Eksperimen ini merenungkan UI Buku Komik. Ini adalah titik awal kecil yang terinspirasi oleh Spider-Man. Namun, bayangkan memperluasnya untuk mencakup setiap elemen situs web. Itu cara untuk menonjol dari manusia biasa.
Lihat pena Buku komik UI oleh Gabriele Corti
Buku komik panggung gaya CSS
Dibuat oleh Katherine Kato
Mari kita melangkah lebih jauh dengan UI yang terinspirasi komik. Halaman ini berhasil menyeimbangkan gaya dan keterbacaan yang berani. Tata letaknya menyenangkan tetapi tetap sangat bersih. Ini menunjukkan bahwa “komik” tidak harus berarti tidak dapat diakses.
Lihat pena Panggung Gaya – Komik oleh Katherine Kato
Kucing coder komik CSS murni
Dibuat oleh Annie Bombanie
Bit lucu ini mengolok -olok pengembang. Ini juga menunjukkan beberapa penggunaan CSS yang mengesankan. Komik hitam-putih memanfaatkan jalur klip, gradien, dan flexbox. Strip juga responsif.
Lihat pena Comic Coder Cat – CSS murni oleh Annie
Menghasilkan tipografi gaya komik
Dibuat oleh Antoinette Janus
Gunakan cuplikan ini untuk menghasilkan teks gaya komik. Klik ke dalam kotak dan kemudian mulai mengetik. Anda akan mendapatkan font buku komik klasik di atas latar belakang setengah batu.
Lihat pena Jenis komik oleh Antoinette Janus
Halaman komik responsif & dapat diakses
Dibuat oleh Sarah Frisk
Ini bisa menjadi tantangan untuk membuat strip komik yang dapat diakses. Font tidak selalu terbaca. Dan bagaimana jika Anda menggunakan gambar? Cuplikan ini bertujuan untuk memperbaiki masalah ini. Ini menawarkan mode “CC” yang menyediakan deskripsi teks dari setiap panel. Hasilnya adalah pengalaman pengguna yang lebih baik.
Lihat pena Halaman komik yang responsif dan dapat diakses oleh Sarah Frisk
Bidang kristal gaya komik
Dibuat oleh Tibix
Sangat mudah untuk mengagumi ilustrasi inovatif dalam komik favorit kami. Contoh ini menggabungkan karya seni yang indah dengan kekuatan kode. Klik pada presentasi untuk meregenerasi versi baru bidang kristal ini.
Lihat pena Bidang kristal gaya komik oleh Tibix
Menambahkan beberapa pop ke web
Tidak setiap situs web membutuhkan tampilan perusahaan yang tenang. Gaya komik menawarkan alternatif untuk situs -situs ini. Anda dapat menggunakan teknik ini untuk membuat UX yang menyenangkan dan mengesankan.
Terlebih lagi, Anda tidak harus pergi ke atas untuk menemukan kesuksesan. Bahkan elemen desain komik yang halus dapat membuat dampak positif. Tidak terlihat lagi dari beberapa contoh di atas untuk bukti.
Ingin melihat lebih banyak contoh gaya komik? Gunakan kekuatan super Anda dan pergilah ke kami Koleksi CodepenLai
Atas
