Now a days Windows metro style design is very popular among web designers. So I am very glad to share a simple css3 code to display metro style message boxes. I have used little jQuery code to close the message boxes as well. I hope you will like this.
Contents
CSS3 Code – Metro Style Alert Box
.alert {
padding: 19px 15px;
color: #fefefe;
position: relative;
font: 14px/20px Museo300Regular, Helvetica, Arial, sans-serif;
}
.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;
-webkit-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(255, 255, 255, 0.1);
-moz-box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.1), 1px 1px 1px rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.08) url(images/alert.png) no-repeat 6px 6px;
}
.info-box { background: #2fa9f6 url(images/info.png) no-repeat 14px 14px;}
.success-box { background: #7EB62E url(images/success.png) no-repeat 14px 14px;}
.error-box { background: #f64b2f url(images/error.png) no-repeat 14px 14px;}
.notice-box { background: #f6ca2f url(images/notice.png) no-repeat 14px 14px;}
.download-box { background: #a555ca url(images/download.png) no-repeat 14px 14px;}
jQuery Code
jQuery(document).ready(function() {
$(".alert .toggle-alert").click(function(){
$(this).closest(".alert").slideUp();
return false;
});
});
HTML Code
<div class="success-box alert">
<div class="msg">Success – Your message will goes here</div>
<a class="toggle-alert" href="#">Toggle</a>
</div>
<div class="error-box alert">
<div class="msg">Error – Message will goes here</div>
<a class="toggle-alert" href="#">Toggle</a>
</div>
<div class="info-box alert">
<div class="msg">Info – Information message will goes here</div>
<a class="toggle-alert" href="#">Toggle</a>
</div>
<div class="notice-box alert">
<div class="msg">Notice – Notification message will goes here</div>
<a class="toggle-alert" href="#">Toggle</a>
</div>
<div class="download-box alert">
<div class="msg">Download – Download message will goes here</div>
<a class="toggle-alert" href="#">Toggle</a>
</div>
Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!
Thanks!
File RAR. unknown or damaged
IMO, it would look cleaner if you added a padding or margin to the toggle buttons to match the padding of the text and icon.
You might also want to add an rgb or hex color background for older browsers that don’t support rgba. See http://css-tricks.com/rgba-browser-support/ .
Another small improvement would be to put “background: #2fa9f6 url(images/info.png) no-repeat 14px 14px;” into your “.alert” selector and overwrite the “background-color” and “background-image” for different alert types. That would allow you to change the background-position for all alert types on one spot (the “.alert” selector).
I also notice you define a “.alert p” selector, yet you don’t use a tag anywhere in your HTML. So you could just delete that line.
Except for those little details, it looks pretty nice 🙂