8 Cuplikan CSS & JavaScript untuk Membuat UI Notifikasi

Notifikasi website sudah menjadi hal yang lumrah. Kami melihatnya di eCommerce, komunitas keanggotaan, dan media sosial. Mereka sulit untuk melarikan diri.

Dan mereka juga penting bagi pengguna. Notifikasi memberikan detail mengenai pesanan, pesan, dan informasi akun lainnya.

Oleh karena itu, menarik untuk melihat bagaimana UI notifikasi berkembang. Desainer menggunakan kreativitas mereka dan menambahkan kepribadian. Mereka membuktikan bahwa notifikasi dapat memiliki bentuk dan fungsi.

Dengan itu, mari kita lihat delapan UI notifikasi unik. Mereka menggunakan CSS dan (dalam beberapa kasus) JavaScript untuk melampaui dasar-dasarnya.


Sistem Pemberitahuan Neon dengan Efek hover oleh CleverYeti

UI notifikasi ini sangat cocok untuk situs web yang menggunakan mode gelap. Tampilannya elegan sekaligus mudah dicerna. Kami akan memberikan poin bonus untuk menyertakan beberapa efek animasi CSS yang halus.

Lihat Pena Sistem notifikasi neon oleh CleverYeti

Pemberitahuan Garis Waktu Vertikal oleh Alina N.

Inilah cara rapi untuk mengatur banyak notifikasi. Tata letak garis waktu ini membuat setiap item menonjol. Jarak antar entri membuat segala sesuatunya mudah diikuti. Bidang pencarian juga merupakan tambahan yang disambut baik.

Lihat Pena Garis Waktu Vertikal – Pemberitahuan oleh Alina N.

Animasi Lencana Pemberitahuan oleh Valery Alikin

Ingin menambahkan unsur kesenangan? UI kecil yang cerah ini menyerupai karakter “Minion”. Dan jika warnanya tidak menarik perhatian Anda, animasi percikan akan berfungsi.

Lihat Pena Animasi Lencana Pemberitahuan oleh Valery Alikin

Pemberitahuan Proyek oleh Landon Messmer

Mungkin ikon “lonceng” agak berlebihan digunakan. Namun dalam kasus ini, ini lebih tentang apa yang ada di dalamnya. Panel notifikasi ini cantik dan fungsional. Ini menampilkan tampilan yang bersih dan beberapa fitur berguna.

Lihat Pena Pemberitahuan Proyek oleh Landon Messmer

Pemberitahuan Kesalahan, Sukses, Peringatan, dan Peringatan oleh Swarup Kumar Kuila

UI notifikasi ini menghadirkan estetika sederhana namun berteknologi tinggi. Dengan warna cerah dan animasi sederhana pasti menarik perhatian. Ini didukung oleh CSS, dengan bantuan dari perpustakaan ikon Font Awesome yang populer.

Lihat Pena pesan kesalahan, sukses, peringatan dan peringatan oleh Swarup Kumar Kuila

Komponen Situs Info, Peringatan, dan Peringatan oleh Dom Jay

Komponen notifikasi ini cocok untuk konten berdurasi panjang. Gunakan mereka untuk menampilkan detail penting dalam kursus online. Atau sebagai kotak panggilan dalam postingan blog. Lagi pula, peringatan bukan hanya untuk informasi spesifik pengguna.

Lihat Pena Komponen Situs – Info/Peringatan/Peringatan oleh Dom Jay

Sukses, Kesalahan, Notifikasi Datar Peringatan oleh AbrarK

Klik tombol dan sactionkan notifikasi berwarna muncul. Presentasi ini menggunakan gaya datar yang mengingatkan pada Facebook dan layanan populer lainnya. Ini juga menampilkan beberapa animasi yang apik.

Lihat Pena Beritahu Datar oleh AbrarK

Pemberitahuan Media Sosial Pop-Up oleh Nooray Yemon

Berikut tampilan UI notifikasi yang sangat bergaya. Hal ini menunjukkan bahwa notifikasi dapat melampaui kegunaannya. Ini juga bisa menjadi peluang branding.

Lihat Pena Munculkan pemberitahuan umpan sosial oleh Nooray Yemon

Sajikan Pemberitahuan dengan Contoh UI Luar Biasa Ini

UI Notifikasi kini menjadi kebutuhan utama dalam desain web. Mereka memengaruhi semua jenis situs web. Kemungkinannya adalah Anda harus mempertimbangkannya dalam proyek mendatang.

Kita pasti bisa tetap menggunakan tampilan umum. Namun ada peluang untuk berbuat lebih banyak. CSS dan JavaScript memungkinkan kami menciptakan pengalaman pengguna yang unik. Contoh di atas hanyalah puncak gunung es.

Ingin melihat UI notifikasi yang lebih luar biasa? Lihat kami Koleksi CodePen!

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top