8 Cuplikan CSS yang Menghidupkan Claymorphism

8 Cuplikan CSS yang Menghidupkan Claymorphism

Kami desainer web sangat menyukai tren desain. Neumorphism, Glassmorphism, dan sekarang… Claymorphism. Lihat yang menarik dan tambahkan “morfisme” di akhir – begitulah cara kami menggulung.

Jadi, apa itu Claymorphism? Ini sedikit retro dengan sedikit Desain Material yang tercampur. Elemen-elemen ini biasanya menampilkan sudut membulat bersama dengan tepi miring. Hasilnya adalah bentuk 3D dengan detail lembut yang praktis melompat dari layar.

Dalam beberapa hal, ini mengingatkan pada gambar ultra-tebal yang digunakan pada 1990-an. Hanya saja kali ini, desainer tidak perlu membuka Photoshop. Sebaliknya, semua yang dibutuhkan seseorang tersedia melalui CSS.

Jika Anda mencari untuk menggunakan elemen Claymorphic dalam desain Anda, Anda telah datang ke tempat yang tepat. Kami telah mengumpulkan delapan contoh menyenangkan yang telah dimodelkan dengan kreativitas (lihat apa yang kami lakukan di sana?) – selamat menikmati!

Desain UI oleh Brandon Caples

Apakah Anda kesulitan melacak tren desain? Cuplikan bermanfaat ini memberikan contoh berlabel untuk Anda – termasuk Claymorphism. Anda mungkin ingin mencetak ini dan menyimpannya untuk referensi di masa mendatang.

Lihat Pena Desain UI oleh Brandon Caples

Claymorphism di Antarmuka Pengguna oleh Shakhzod Tojiyev

UI kartu tampaknya ada di mana-mana akhir-akhir ini. Mereka menawarkan cara yang efektif untuk membuat item konten serupa menonjol. Di sini, Claymorphism digunakan untuk memberikan beberapa dampak ekstra tanpa berlebihan secara visual. Cahaya biru di sekitar elemen individu adalah sentuhan yang bagus.

Lihat Pena Claymorphism di Antarmuka Pengguna oleh Shakhzod Tojiyev

Ventilo oleh Bailh

Cuplikan ini menunjukkan bahwa Claymorphism dapat melampaui elemen statis. Di sini, bentuk 3D terbang di sekitar layar dalam animasi seperti konfeti. JavaScript memperkuat gerakan, tetapi tanah liat menambah estetika keseluruhan.

Lihat Pena Ventilo oleh Bailh

Dasbor Claymorphic * (Responsif, Hanya CSS) oleh Mozzarella

Contoh tren desain yang kami bagikan cenderung berfokus pada satu elemen. Tapi itu adalah suguhan istimewa untuk menemukan seluruh layar yang dikhususkan untuk suatu subjek. Desain dasbor ini menampilkan tombol, kartu, dan bahkan gambar pahlawan. Pastikan untuk memeriksa efek hover yang indah juga.

Lihat Pena Dasbor Claymorphic * (Responsif, Hanya CSS) oleh MOZZARELLA

Komponen Bentuk Claymorphism oleh Albert

Berikut adalah contoh dunia nyata dari wadah Claymorphic yang menampung formulir. Bayangkan ini digunakan di bilah sisi atau bahkan jendela modal. Efeknya halus – membuatnya sangat cocok untuk situs web bisnis.

Lihat Pena Komponen Bentuk Claymorphism oleh Albert

tanah liat oleh Preethi

Meskipun tidak ada yang istimewa dari cuplikan ini, cuplikan ini menawarkan pandangan tentang bagaimana tren ini dapat diterapkan pada pesan peringatan. Ada sesuatu yang bisa dikatakan untuk kesederhanaan di sini. Itu menarik perhatian Anda, tetapi dengan cara yang ramah (emoji juga tidak menyakitkan).

Lihat Pena tanah liat oleh Preethi

hapus oleh Ward Larson

Kami menemukan beberapa developer yang berani menggabungkan Claymorphism dengan tampilan trendi lainnya. Yang ini memasangkan pemula dengan Glassmorphism, menghasilkan UI yang sangat keren. Wadah kaca semi-transparan berjalan dengan indah dengan tombol miring yang mulus.

Lihat Pena hapus oleh Ward Larson

Tanpa Judul oleh Scott Shields

Mungkin judul cuplikan ini tidak menarik – tetapi karya itu sendiri cukup bermakna. Ini menggunakan Clay.css, kerangka kerja yang menambahkan Claymorphism ke elemen desain. Ini mungkin solusi tercepat bagi mereka yang ingin terjun lebih dulu ke gaya ini.

Lihat Pena Tanpa Judul oleh SS

Desain Lebih Baik melalui Tanah Liat

Sepintas, Claymorphism mungkin terlihat sedikit ringan dan konyol. Dan tentu saja mampu melakukan estetika semacam itu. Namun, ada potensi untuk masuk lebih dalam.

Ketika digunakan dengan tingkat kehalusan, gaya bisa menjadi hal yang tepat untuk menghidupkan semua jenis situs web. Ini membantu menciptakan pemisahan alami antara elemen desain (seperti kartu) dan membuat UI yang lebih intuitif (tombol 3D). Itu bisa menguntungkan semua orang mulai dari blogger hingga pengecer dan seterusnya.

Mencari lebih banyak cuplikan Claymorphism? Lihat kami Koleksi CodePen!

Hit play on your imagination