Pesan Alert Metro UI Dengan Font Awesome

Pesan Alert Metro UI Dengan Font Awesome - Mengembangkan gaya metro style tentunya menjadi hal yang unik untuk sebuah blog. Mulai dari widget unik, menu metro ui, maupun element - element yang bernuansa blog metro ui style. Setelah artikel sebelumnya tentang kombinasi menu metro ui dengan Fontawesome, kali ini saya akan memberikan contoh penerapan font tersebut ke bentuk pesan alert box. Ini sebagai kelanjutan dari pesan alert metro style sebelumnya. Hanya saja saya sedikit menambahkan tombol close dengan  efek jquery slide up.

Sebagai gambarannya silakan klik demonya.

• DEMO

Penggunaan dasarnya adalah sebagai berikut :

CSS

.alert { padding: 19px 15px; color: #fefefe; position: relative; font: 14px/20px Museo300Regular, Helvetica, Arial, sans-serif; }
.alert :before {
content: "\f05d";
font-family: fontAwesome;
font-size: 30px;
font-style: normal;
background:transparent;
color: #27ae60;
top: 0;
left: 0;
padding: 19px 19px;
position: absolute;margin-right:10px;
}
.alert .msg { padding: 0 20px 0 40px;}
.alert p { margin: 0;}
.alert .toggle-alert { position: absolute; top: 7px; right: 10px; display: block; text-indent: -10000px; width: 20px; height: 20px; border-radius: 10px;background: #222; }
.info-box { background: #444 }
.success-box { background: #444 }
.error-box { background: #444 }
.download-box { background: #444 }

JQuery

jQuery(document).ready(function() { $(".alert .toggle-alert").click(function(){ $(this).closest(".alert").slideUp(); return false; }); });

HTML

<div class="info-box alert"> <div class="msg"> ISI TEXT  </div><a class="toggle-alert" href="#"></a> </div>

<div class="success-box alert"> <div class="msg"> ISI TEXT  </div><a class="toggle-alert" href="#"></a> </div>

<div class="error-box alert"> <div class="msg"> ISI TEXT  </div><a class="toggle-alert" href="#"></a> </div>

<div class="download-box alert"> <div class="msg"> ISI TEXT  </div><a class="toggle-alert" href="#"></a> </div>

Kostumisasi Alert Icon Font Awesome :

Info   : "\06a" color: #3498db
Error : "\05c" color: #e74c3c
Sukses : "\06a" color: #27ae60
Download : "\01a" color: #8e44ad

Silakan sesuaikan tampilan pesan dengan mengubah kode value content dan color iconnya

Demikian Pesan Alert Metro UI Dengan Font Awesome  semoga bermanfaat dan menambah semangat kita untuk terus menulis yang bermanfaat bagi para pembacanya.
Enjoy Blogging