◄ Min  Size Fonts: + | - | ± Color: Max ►

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 :dRamuan 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/
Loading...
XMake Simple Notifications using CSS3
Membuat notifikasi sederhana dengan atribut CSS3. Pengumuman singkat langsung menghilang.
Subscribe my posts Register For Free!

2 comments

[?] g+ convert

DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...

al-Quran

MISC

Resources

WANT BE HERE!!! CONTACT ME :P
1 2 3 4 5 6 7 8 9

FACEBOOK PAGE