Ranzhie

Halo Bertemu lagi dengan saya di blog saya dan di post saya >,<
Oh ya Saya Ingin Mengeshare " 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....!!!

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;} }