Pesan Alert Box Metro Ui

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

CSS KODE :

Code:

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

Code:

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

HTML :

Code:

<div class="info-box alert"> <div class="msg"> ISI TEXT  </div>[url=#][/url] </div>
<div class="success-box alert"> <div class="msg"> ISI TEXT  </div>[url=#][/url] </div>
<div class="error-box alert"> <div class="msg"> ISI TEXT  </div>[url=#][/url] </div>
<div class="download-box alert"> <div class="msg"> ISI TEXT  </div>[url=#][/url] </div>

Untuk kosumisasi icon fontawesomenya :

Code:

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

Sebagai gambarannya silakan klik demonya.

SUMBER

 

berimasukan sedikit...

lampirkan tutorialnya dan codenya disini gan...

kemudian buat link sumbernya, kalo boleh jangan pakai readmore, tapi bagusnya pakai link sumber. agar kita salaing membahas thread ini di forum ini...
terimakasih..

 

makasih mas...udah dibenahi

makasih mas...udah dibenahi tuh threadnya..maksih sarannya

 

Keren dah Metro Style jaman

Keren dah Metro Style jaman sekarang nih

 

Bagus,