Notifikasi Keren dengan CSS3

Transkripsi

1

2 Notifikasi Keren dengan CSS3 Oleh: Sendy PK Notifikasi pada website merupakan hal yang penting untuk memberi tahu pengunjung website tentang informasi singkat yang diberikan oleh pemilik website, hal ini akan mempengaruhi User Xperience pengunjung saat berada pada halaman konten. Pada Tutorial kali ini, Kita akan belajar bagaimana untuk membuat beberap... Notifikasi pada website merupakan hal yang penting untuk memberi tahu pengunjung website tentang informasi singkat yang diberikan oleh pemilik website, hal ini akan mempengaruhi User Xperience pengunjung saat berada pada halaman konten. Pada Tutorial kali ini, Kita akan belajar bagaimana untuk membuat beberapa pesan notifikasi dengan CSS3 dan jquery. Jenis pesan Di bawah ini adalah daftar dengan notifikasi pesan umum: Info Error (kesalahan) Warning (peringatan) Success (berhasil) Info Tujuannya adalah untuk menginformasikan pengguna mengenai masalah yang relevan

3 Berikut source codenya : HTML <div class="info message"> <h3>fyi, something just happened!</h3> <p>this is just an info notification message.</p> </div> CSS.message{ background-size: 40px 40px; background-image: linear-gradient(135deg, rgba(255, 255, 255,.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255,.05) 50%, rgba(255, 255, 255,.05) 75%, transparent 75%, transparent); box-shadow: inset 0-1px 0 rgba(255,255,255,.4); width: 100%; border: 1px solid; color: #fff; padding: 15px; _position: absolute; text-shadow: 0 1px 0 rgba(0,0,0,.5); animation: animate-bg 5s linear infinite;.info{ background-color: #4ea5cd; border-color: #3b8eb5; Error (kesalahan) Ketika operasi gagal, pengguna akan diberitahu. Misalnya: " The account couldn't be deleted." atau " Your settings weren't saved " dan lain lain

4 HTML <div class="error message"> <h3>ups, an error ocurred</h3> <p>this is just an error notification message.</p> </div> CSS.message{ background-size: 40px 40px; background-image: linear-gradient(135deg, rgba(255, 255, 255,.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255,.05) 50%, rgba(255, 255, 255,.05) 75%, transparent 75%, transparent); box-shadow: inset 0-1px 0 rgba(255,255,255,.4); width: 100%; border: 1px solid; color: #fff; padding: 15px; _position: absolute; text-shadow: 0 1px 0 rgba(0,0,0,.5); animation: animate-bg 5s linear infinite;.error{ background-color: #de4343; border-color: #c43d3d; Warning (peringatan) Jenis pesan ini memberitahu pengunjung dari kondisi yang dapat menyebabkan masalah dikedepannya. HTML

5 <div class="warning message"> <h3>wait, I must warn you!</h3> <p>this is just a warning notification message.</p> </div> CSS background-image: linear-gradient(135deg, rgba(255, 255, 255,.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255,.05) 50%, rgba(255, 255, 255,.05) 75%, transparent 75%, transparent); box-shadow: inset 0-1px 0 rgba(255,255,255,.4); width: 100%; border: 1px solid; color: #fff; padding: 15px; _position: absolute; text-shadow: 0 1px 0 rgba(0,0,0,.5); animation: animate-bg 5s linear infinite;.warning{ background-color: #eaaf51; border-color: #d99a36; Success (berhasil) Pesan SUCCESS akan ditampilkan setelah pengunjung berhasil melakukan tindakan HTML <div class=success message">

6 <h3>congrats, you did it!</h3> <p>this is just a success notification message.</p> </div> CSS.message{ background-size: 40px 40px; background-image: linear-gradient(135deg, rgba(255, 255, 255,.05) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255,.05) 50%, rgba(255, 255, 255,.05) 75%, transparent 75%, transparent); box-shadow: inset 0-1px 0 rgba(255,255,255,.4); width: 100%; border: 1px solid; color: #fff; padding: 15px; _position: absolute; text-shadow: 0 1px 0 rgba(0,0,0,.5); animation: animate-bg 5s linear infinite; SUCCESS { background-color: #61b832; border-color: #55a12c;.message h3{ margin: 0 0 5px 0;.message p{ margin: animate-bg { from { background-position: 0 0; to { background-position: -80px 0;

7 Perhatikan animated-bg, yang menganimasikan garis-garis diagonalbackground. Untuk melihat efek ini, kita harus menggunakan browser WebKit terbaru seperti Chrome / Safari atau Mozilla 5 +. Pesan notifikasi akan disembunyikan awalnya. Untuk itu kita akan menggunakan posisi tetap (nilai absolut hanya untuk IE6 - karena tidak ada posisi: dukungan tetap). _position: absolute; /* IE6 only */ jquery Tentukan pesan jenis menggunakan sebuah array: var mymessages = ['info','warning','error','success' ]; Fungsi di bawah ini menyembunyikan pesan pemberitahuan. Pesan bisa memiliki ketinggian dinamis dan untuk itu, tinggi setiap pesan yang dihitung untuk menyembunyikannya dengan baik. function hideallmessages() { var messagesheights = new Array(); // this array will store height for each for (i=0; i<mymessages.length; i++) { messagesheights[i] = $('.' + mymessages[i]).outerheight(); // fill array $('.' + mymessages[i]).css('top', -messagesheights[i]); //move element outside viewport Fungsi ShowMessage dipanggil saat dokumen siap. function showmessage(type) { $('.'+ type +'-trigger').click(function(){ hideallmessages(); $('.'+type).animate({top:"0", 500); ); Saat memuat halaman, pertama-tama kita akan menyembunyikan semua pesan: hideallmessages(). Kemudian, untuk setiap trigger, akan menampilkan pesan setara:

8 $(document).ready(function(){ ); // Initially, hide them all hideallmessages(); // Show message for(var i=0;i<mymessages.length;i++) { showmessage(mymessages[i]); // When message is clicked, hide it $('.message').click(function(){ $(this).animate({top: -$(this).outerheight(), 500); ); Itulah tadi bermacam-macam notifikasi yang dapat kita pakai ke website, silahkan dicoba untuk mendapatkan user xperience yang lebih untuk pengunjung website anda. Tentang Penulis Sendy PK Saya adalah Programmer yang memiliki impian untuk menguasai dunia kunjungi situs pribadi saya di dan Online Shop saya di