Notifikasi Keren Dengan Css3

33 views

Notifikasi pada website merupakan hal yang penting untuk memberi tahu pengunjung website wacana informasi singkat yang diberikan oleh pemilik website, hal ini akan mempengaruhi User Xperience pengunjung dikala berada pada halaman konten.

Pada Tutorial kali ini, Kita akan mencar ilmu bagaimana untuk menciptakan beberapa pesan notifikasi dengan CSS3 dan jQuery.

 

Jenis pesan

Di bawah ini yaitu daftar dengan notifikasi pesan umum:

• Info

• Error (kesalahan)

• Warning (peringatan)

• Success (berhasil)

 

Info

Tujuannya yaitu untuk menginformasikan pengguna mengenai duduk perkara 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 sanggup menyebabkan duduk perkara 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 sesudah pengunjung berhasil melaksanakan 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 imbas ini, kita harus memakai browser WebKit terbaru menyerupai Chrome / Safari atau Mozilla 5 +.

Pesan notifikasi akan disembunyikan awalnya. Untuk itu kita akan memakai posisi tetap (nilai diktatorial hanya untuk IE6 – alasannya tidak ada posisi: derma tetap).

position: fixed;_position: absolute; /* IE6 only */

jQuery

Tentukan pesan jenis memakai sebuah array:

var myMessages = ['info','warning','error','SUCCESS' ];

 

Fungsi di bawah ini menyembunyikan pesan pemberitahuan. Pesan sanggup mempunyai 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 dikala 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 majemuk notifikasi yang sanggup kita pakai ke website, silahkan dicoba untuk mendapat user xperience yang lebih untuk pengunjung website anda.

 

 

 

 

Author: 
    author
    No related post!