8 CSS & JavaScript Cuplikan untuk Membuat Efek Arahkan UI Kartu Keren

8 CSS & JavaScript Cuplikan untuk Membuat Efek Arahkan UI Kartu Keren

Tata letak UI kartu cukup populer akhir-akhir ini – dan mudah untuk mengetahui alasannya. Mereka sangat serbaguna, dengan kemampuan untuk menampung apa pun mulai dari daftar produk hingga penggoda posting blog.

Elemen-elemen ini juga merupakan tempat yang tepat untuk menambahkan berbagai efek hover. Ini tidak hanya menarik tetapi juga sarana untuk meningkatkan pengalaman pengguna. Bahkan efek halus dapat membantu kartu menonjol di antara kelompok, sehingga membuat fitur lebih intuitif.

Komunitas desain telah menciptakan beberapa contoh yang luar biasa. Dari transformasi berani hingga sorotan sederhana, ada sesuatu untuk hampir setiap kasus penggunaan.

Dengan mengingat hal itu, berikut adalah beberapa contoh utama efek hover UI kartu yang telah ditingkatkan dengan CSS dan JavaScript.

Interaksi Arahkan Kartu oleh Ryan Mulligan

Menampilkan konten dalam jumlah besar sekaligus dapat membuat pengguna kewalahan. Di situlah cuplikan ini masuk. Ini terdiri dari judul sederhana yang digabungkan dengan gambar latar belakang. Arahkan kursor ke kartu dan Anda akan menemukan beberapa teks deskriptif dan ajakan bertindak. Yang terbaik dari semuanya, itu telah dibangun dengan CSS murni.

Lihat Pena Interaksi Arahkan Kartu oleh Ryan Mulligan

Efek Arahkan Kartu Profil oleh P

Ini konsep yang serupa, tetapi lebih minimalis. Efek memperbesar foto kartu dan mengungkapkan nama subjek dan tautan media sosial. Secara keseluruhan, itu sangat menyenangkan mata tanpa menjadi terlalu sibuk.

Lihat Pena Efek Arahkan Kartu Profil oleh P

Efek Holo Kartu Pokemon oleh Simon Goellner

Semua orang suka Pokemon, bukan? Tapi itu bukan satu-satunya hal keren tentang cuplikan ini. Setiap kartu menampilkan efek holografik yang menakjubkan. Ini adalah pengaturan yang dirancang dengan cerdik yang menggunakan GIF animasi dan gradien untuk menghasilkan keindahan yang berkilauan. Mungkin efeknya tidak untuk semua orang, tetapi tidak dapat disangkal unik.

Lihat Pena Efek Holo Kartu Pokemon oleh Simon Goellner

Efek Arahkan Kartu CSS oleh Jhonier Riascos Zapata

Jika Anda mencari cara untuk membuat UI kartu Anda menonjol, efek melayang ini akan berhasil. Dibutuhkan kartu skala abu-abu dan mengubahnya menjadi ledakan warna. Di luar rona merah muda cerah, ukuran kartu juga diperluas untuk mengungkapkan konten yang lebih detail. Semua mengatakan, pengguna tidak bisa tidak memperhatikan.

Lihat Pena Efek Arahkan Kartu CSS oleh Jhonier Riascos Zapata

Kartu Lipat Fitur Liburan CSS Murni oleh Madalena

Kartu mini ini memiliki gaya yang lebih mirip dengan tombol daripada kartu konten biasa. Apapun, efek hover mereka adalah sihir murni. Setiap kartu “terbuka” untuk menampilkan video bersama teks dan ajakan bertindak. Sungguh menakjubkan betapa banyak yang bisa masuk ke dalam ruang sekecil itu. Selain itu, daya tanggap UI juga mengesankan.

Lihat Pena Kartu Lipat Fitur Liburan [Pure CSS] oleh Madalena

UI Kartu Profil oleh JotForm

Pengungkapan penuh, efek hover di sini hanyalah sebagian kecil dari apa yang dilakukan cuplikan ini. Tetapi tab di bagian bawah kartu profil ini bagus. Mereka memungkinkan Anda untuk memasukkan sejumlah besar konten ke dalam elemen desain yang relatif kecil. Penggunaan glassmorphism juga tepat.

Lihat Pena UI Kartu Profil oleh JotForm

Kartu Pemain/Pengguna oleh Alvaro Montoro

Dibuat dengan gaya kartu koleksi dua sisi, UI ini menampilkan informasi tambahan saat melayang. Ini bersih, penuh warna, dan menahan diri dari mengambil alih sisa halaman. Cuplikan ini akan cocok dengan proyek mana pun yang menggunakan kartu untuk menampilkan data.

Lihat Pena Kartu Pemain/Pengguna oleh Alvaro Montoro

Korsel Kartu Trik CSS oleh William Goldsworthy

Inilah pandangan berbeda tentang korsel tradisional. Kartu tumpang tindih – menjadikannya sarana yang efektif untuk menghemat ruang. Arahkan kursor ke satu kartu, dan kartu itu akan muncul dengan sendirinya. Dan sementara contoh ini menunjukkan animasi melingkar pada kartu aktif, itu dapat dengan mudah disesuaikan untuk menampilkan teks atau gambar.

Lihat Pena Korsel Kartu Trik CSS oleh William Goldsworthy

Menambahkan Interaktivitas ke Pokok Desain Web

Efek hover hadir untuk menghadirkan interaktivitas dan bahkan sedikit kesenangan ke elemen apa pun. Tetapi ada sesuatu yang unik tentang penerapannya dalam UI kartu. Mereka menambahkan kepribadian pada apa yang bisa menjadi fitur yang agak statis.

Cuplikan di atas menunjukkan bahwa ada beberapa cara berbeda untuk mencapai ini. Efeknya bisa halus atau substansial, berdasarkan jenis dampak yang ingin Anda buat. Ini adalah sesuatu yang bahkan dapat dimanfaatkan oleh situs web perusahaan yang dikancingkan.

Kami harap Anda menikmati tampilan efek hover UI kartu ini! Jika Anda ingin melihat lebih banyak contoh, kunjungi kami Koleksi CodePen.

Hit play on your imagination