Thursday, April 25, 2013

Cara Membuat Notifikasi Windows Dengan Css3


Fungsi dari "Notifikasi" itu sendiri hanya sebagai pesan. Notifikasi biasanya sering digunakan pada blog untuk memberitahukan kepada pengunjung bahwa blog tersebut sedang dalam perbaikan/maintenance....!!!
GambarPertama
Berikut Cara Membuat Notifikasi Windows Dengan Css3 :

Tambahkan kode css3 ini diatas kode ]]></b:skin>
.container {right: 10px;top: 10px;margin: 20px auto;width: 380px;z-index: 999999;
position: fixed;
-webkit-animation: fadeOutnotif 10s linear forwards; /* Waktu notifikasi 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;
}
.container .notif {margin: 10px 0;}
.notif {position: relative;padding: 25px 30px 25px 100px;min-height: 50px;line-height: 22px; background: white;border-radius: 2px;}
.notif:before {content: '';position: absolute;top: 25px;left: 30px;width: 40px;height: 40px;border: 5px solid;border-radius: 25px;}
.notif p {font-size: 11px;color: #666;}
.notif-title { margin: 0 0 5px; font-size: 14px; font-weight: bold; color: #333;}
.notif-title:before, .notif-title:after {content: ''; position: absolute;background: white;border-radius: 2px;}
.notif-notice:before {background: #a7d155;border-color: #8fb14f;}
.notif-notice .notif-title:before, .notif-notice .notif-title:after {top: 44px;left: 55px;width:4px; height: 12px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.notif-notice .notif-title:after {top: 50px; left: 48px;width: 8px;height: 4px;}
.notif-controls { position: absolute; top: 0; right: 0; height: 16px; padding: 4px 3px 5px;background: #f0f0f0;border: solid #dcdcdc; border-width: 0 0 1px 1px;border-radius: 0 2px;}
.notif-controls > a {position: relative;float: left;margin: 0 1px;width: 16px;height: 16px;  font: 0/0 serif;text-shadow: none;color: transparent;}
.notif-minimize:before {content: '';position: absolute;top: 11px;left: 4px;width: 7px;height: 2px;background: #bbb;}
.notif-minimize:hover:before {background: #888;}
.notif-zoom:before {content: '';position: absolute;top: 6px;left: 3px;width: 5px;height: 3px;border: 2px solid #bbb;}
.notif-zoom:hover:before {border-color: #888;}
.notif-close:before, .notif-close:after {content: '';position: absolute;top: 4px;left: 7px;width: 2px;height: 10px;
  background: #bbb;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.notif-close:after {top: 8px;left: 3px;width: 10px;height: 2px;}
.notif-close:hover:before, .notif-close:hover:after {background: #888;}
.lt-ie9 .notif-notice .notif-title:before {content: '\2714';display: block;top: 25px;left: 30px;width: 50px;font: bold 18px/50px "Arial Unicode MS";color: white;text-align: center;background: none;}
.lt-ie9 .notif-notice .notif-title:after {display: none;}
.lt-ie9 .notif-alert .notif-title:before {content: '\2716'; display: block;top: 25px;left: 30px;width: 50px;font: bold 17px/50px "Arial Unicode MS";color: white;text-align: center;background: none;}
.lt-ie9 .notif-alert .notif-title:after { display: none;}
.lt-ie9 .notif-close:before {content: '\2716';display: block;top: 0;left: 0;width: 16px;font: 11px/19px 'Arial Unicode MS';color: #bbb;text-align: center;background: none;}
.lt-ie9 .notif-close:after {display: none;}
.lt-ie9 .notif-close:hover:before {color: #999;}
@-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;}
}
Untuk menempatkan "Notifikasi" ini pada bagian kiri atas blog, Cukup edit kode ini :
.container {right: 10px;top: 10px;..............} Menjadi .container {left: 10px;top: 10px;.....}

Untuk kode HTML-nya cukup tambahkan kode ini di bawah kode <body> atau diatas kode </body>.
   <div class="container">
    <section class="notif notif-notice">
      <h6 class="notif-title">Perhatian!</h6>
      <p>Ganti dengan pesan yang ingin anda tampilkan</p>
      <div class="notif-controls">
        <a href="#" class="notif-minimize">Minimize</a>
        <a href="#" class="notif-zoom">Zoom</a>
        <a href="#" class="notif-close">Close</a>
      </div>
    </section>
  </div>
Ganti text berwarna "Biru" dengan pesan yang akan anda tampilkan.
______________________________________________________
Sumber : http://maz-waone.blogspot.com/2013/04/cara-membuat-notifikasi-windows-dengan.html

0 comments:

Post a Comment

| Guru Madrasah Blog © 2013. All Rights Reserved | Template Style by My Blogger Tricks .com | Edited by Abdul Hanan | Back To Top |