Box Message Win 8 UI

Box Message Win 8 UI By PalmaHutabarat

by Palma Hutabarat92

HTML

<div class="container">
    <section class="notif notif-notice">
      <h6 class="notif-title">Perhatian!</h6>
      <p>Box Message By Palma Hutabarat, Thanks For View Here Now</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>

CSS

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