Make Simple Notifications using CSS3

Nemu blogger dari Indonesia. Mengawali aktifitas blog sejak 2009. Kesukaan akan anime dia salurkan ke kreasi template buatannya ;)) Unik-unik template karya Johanes Djogan Datangi saja blognya, Koben cuma akan berbagi satu tutorial dari sana mengenai cara membuat notifikasi sederhana dengan CSS3. Sebelum itu harap baca hal serupa dengan berbagai variannya yah :d

Ramuan CSS & HTML notifikasi sederhana CSS3

#notifo {
top: 10px; 
right: 10px; 
width: 320px; 
height: auto; 
color: #eee;
position: fixed; 
z-index: 999999;
overflow: hidden;
border-radius: 5px; 
border: 1px solid #000;
background: rgba(0,0,0,0.7); 

/* waktu notifikasi 7 detik */
-webkit-animation: fadeOutnotif 7s linear forwards;
-moz-animation: fadeOutnotif 7s linear forwards;
-o-animation: fadeOutnotif 7s linear forwards;
-ms-animation: fadeOutnotif 7s linear forwards;
animation: fadeOutnotif 7s linear forwards;
}
#notifo {
float: left;
display: block;
padding: 0 15px;
text-align: left;
}
#notifo h2 {
color: #d00;
font-size: 19px; 
line-height: 10px;
font-weight: bold;
text-align: center;
}
@-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;}
}

Rubahlah lamanya waktu tampil (7s) tepat di bawah tulisan /* waktu notifikasi 7 detik */

Markup

<div id='notifo'>

<h2>Notifikasi: </h2>

<p>Text blahblehbloh1.</p>

<p>Text blahblehbloh2..</p>

<p>Hello world.</p>

</div>

Lihat Notifikasi:

Ini di sini bos...

Eng ing eng...

Aku akan menghilang dalam waktu 7 detik!

Jangan di isi dengan buku tamu, setting waktu harus sedikit agak lama, eh pas ngeutik menghilang deh :)) Jangan lupa diacak-acak blog johanesnya yah :)
Happy blogging \m/