Kutipan adalah salah satu elemen desain web yang paling serbaguna. Mereka praktis dapat melompat dari halaman. Dan Anda juga dapat menggunakannya untuk membuat pemisahan dalam bagian teks yang panjang.
Untuk gaya, ada banyak sekali kemungkinan. Kita dapat menggunakan kekuatan CSS dan JavaScript untuk membuat UI kutipan agar sesuai dengan estetika yang kita inginkan. Segala sesuatu mulai dari tata letak tipografi yang halus hingga presentasi interaktif dimungkinkan.
Dengan mengingat hal itu, berikut adalah delapan cara menarik untuk menyajikan kutipan di situs web Anda. Ada gaya di sini untuk memenuhi hampir semua kebutuhan.
Kutip Animasi Partikel oleh isladjan
Jika Anda ingin kutipan menjadi pusat perhatian, cuplikan ini adalah contoh utama tentang cara melakukannya. Latar belakang animasi partikel yang apik tampak memukau. Tapi itu tidak mengganggu overlay teks. Ini juga merupakan tayangan slide, karena mengklik presentasi akan memuat kutipan baru.
Lihat Pena Mengutip animasi yang dibuat oleh partikel oleh isladjan
Animasi Kutipan Efek Air oleh Shane Burns
Anda mungkin mengatakan bahwa efek air dalam kutipan ini cukup imersif. Selain kata-kata buruk, animasi melakukan pekerjaan yang bagus untuk menambahkan konteks. Namun, keterbacaan mungkin menjadi perhatian. Itu bisa diselesaikan dengan beberapa penyesuaian kode.
Lihat Pena Menjadi Piala oleh Shane Burns
Mengutip Kartu Sliding oleh Sabine Robart
Inilah cara penuh gaya untuk memasukkan beberapa kutipan ke dalam area kecil. Kartu kutipan ini memungkinkan Anda mengklik entri satu per satu. Sangat cocok untuk mereka yang menginginkan tampilan yang kompak dan bersahaja.
Lihat Pena Kartu kutipan oleh Sabine Robart
Kutipan Font Variabel oleh Cassie Evans
Cuplikan ini menggunakan font variabel untuk membuat transisi mulus antara gaya karakter. Animasi bertenaga GSAP menargetkan setiap kata, mendorong pengguna untuk membaca bersama. Ini adalah formula sederhana yang menciptakan tampilan yang berani.
Lihat Pena Batu bata oleh Cassie Evans
Blok Teks Fleksibel, Lebar Penuh, dan “Dibenarkan”. oleh Reuben L. Lillie
Penggunaan teks yang dibenarkan memberikan estetika kotak-kotak yang bersih pada kutipan. Di sini, efek digabungkan dengan berbagai ukuran teks untuk membuat presentasi lebih menarik. Ini juga berskala indah agar sesuai dengan layar yang lebih kecil.
Lihat Pena Blok Teks Fleksibel, Lebar Penuh, dan Rata oleh Reuben L. Lillie
UI Kutipan Bergulir oleh Andrew Sims
UI kutipan bergulir ini adalah paket total. Tipografi menarik dan mudah dibaca. Penggunaan warnanya menciptakan kontras yang nyata. Dan efek gulir buram menambah kesan dramatis. apa lagi yang kamu inginkan?
Lihat Pena Desain membawa tantangan ke dalam fokus #Codevember oleh Andrew Sims
Blockquotes Sederhana & Cantik oleh Mark Sotek
Sulit untuk salah dengan kesederhanaan. Cuplikan ini kebetulan kekurangan efek mewah. Tapi itu lebih dari menebusnya dengan spasi dan tipografi yang berorientasi pada detail. Hasilnya adalah tampilan abadi yang cocok dengan desain apa pun.
Lihat Pena Sederhana, Blockquote Cantik oleh Mark Sotek
Mesin Kutipan Acak oleh Skybird Trill
Di dalam sampul usang cuplikan ini terdapat halaman-halaman kutipan. Desain yang terinspirasi dari buku memungkinkan Anda menavigasi antar halaman dengan elegan. Tombol berbagi sosial yang disertakan adalah sentuhan bagus yang dapat diubah agar sesuai.
Lihat Pena Mesin Kutipan Acak oleh Skybird Trill
Cara Membuat Situs Web Anda Dapat Dikutip
Desainer web tidak lagi harus puas dengan presentasi kutipan yang membosankan. Contoh di atas menunjukkan berbagai kasus penggunaan. Dan eksperimen dengan tata letak dan efek khusus hanya menambah kemungkinan.
Apa pun tampilan dan fungsinya, Anda dapat menggunakan CSS dan JavaScript untuk mewujudkannya. Terlebih lagi, kutipan juga bisa menjadi bintang pertunjukan. Teknik canggih mengubahnya menjadi pusat, bukan pemain kecil.
Mencari potongan kode kutipan yang lebih luar biasa? Lihat kami Koleksi CodePen!
