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 Keren dengan CSS3

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

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: fixed;
     _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

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: fixed;
     _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

<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: fixed;
     _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">
 <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: fixed;
     _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: 0;                                                  
}

@keyframes animate-bg {
    from {
        background-position: 0 0;
    }
    to {
       background-position: -80px 0;
    }
}

 

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: fixed;
    _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:

$(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.

 

 

 

 


About Author

Sendy PK

Saya adalah Programmer yang memiliki impian untuk menguasai dunia kunjungi situs pribadi saya di www.spk.my.id dan Online Shop saya di www.spkshop.web.id


Comment & Discussions

    Please LOGIN before if you want to give the comment.