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.
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 }
.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
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
Like THIS :
Jika Anda menyukai Artikel di blog ini, Silahkan
klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di BDariku
Belum ada komentar untuk "Pesan Alert Metro UI Dengan Font Awesome"
Posting Komentar