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....!!!

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

Tweet