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.

Message Boxes using CSS3
Metro Style Message Boxes using CSS3

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!

Related Posts