Cara Membuat Notifikasi Dengan CSS

Pertama, dalam pemasangan Notifikasi ini kalian kopikan dulu css berikut:

#notifikasi {
right: 10px; /* posisi di paling kanan */
top: 10px; /* posisi di paling atas */
width: 320px; /* lebar notif */
height: auto; /* tinggi notif otomatis */
overflow: hidden;
background: rgba(255,255,255,0.9); /* warna background */
border-radius: 5px; /* nilai sudut bundar */
border: 1px solid #ddd; /* garis batas luar */
z-index: 999999;
position: fixed; /* posisi melayang */
-webkit-animation: fadeOutnotif 10s linear forwards; /* notif 10 detik */
-moz-animation: fadeOutnotif 10s linear forwards;
-o-animation: fadeOutnotif 10s linear forwards;
-ms-animation: fadeOutnotif 10s linear forwards;
animation: fadeOutnotif 10s linear forwards;
}
#notifikasi a {
display:block;
text-decoration:none;}
#notifikasi span {
display: block;
padding: 15px 15px;
pointer-events: none;
text-align: left;
float: left;
}
#notifikasi span h2 {
font-size: 12px; /* Ukuran text */
line-height: 21px;
color: #222; /* Warna text */
font-weight: normal;
letter-spacing: 0px;
}
/* Fansublogger.blogspot.com */
@-webkit-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -webkit-transform: translateY(0px);}
99% { opacity: 0; -webkit-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-moz-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-o-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@-ms-keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}
@keyframes fadeOutnotif {
0% { opacity: 1;}
10% { opacity: 1;}
90% { opacity: 1; -moz-transform: translateY(0px);}
99% { opacity: 0; -moz-transform: translateY(-30px);}
100% { opacity: 0;}
}

Jika sudah, sekarang anda tempatkan HTML dibawah ini, tepat di atas </body>

<div id='notifikasi'>
<span>
<h2><b>Notifikasi :</b>
<p>1. Text Kamu.</p>
<p>2. Admin mantap.</p>
<p>3. Admin mantap.</p>
<p>4. Hello world.</p>
</h2>
</span>
</div>

Kalo pingin nambahin slot notifikasinya tinggal nambahin

<p> Text kamu <p>
diantara
<h2> ..... </h2> 

Sementara untuk pengaturan posisii sbagai berikut:

#notifikasi {
...
...
right: 10px; /* posisi di paling kanan */
top: 10px; /* posisi di paling atas */
...
...
}

Kalian tinggal ganti aja right atau top di atas. top: diatas bottom: dibawah right: dikanan left: dikiri Itu default dari CSS diatas letaknya di atas kanan. Silahkan ubah lagi sesuai dengan keinginan. Kalian juga boleh memvariasikan CSS nyah. Terserah kalian deh itu mah. Terimakasih, semoga membantu.

Buat demo nyah bisa di lihat di bawah sini:

See the Pen eNYeOv by hilmanfad (@hilmanfad) on CodePen.

Sumber: Djogz