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

Message Boxes using CSS3

CSS3 Code

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

View Live Demo Download

If you enjoyed this article, Get email updates (It’s Free)
http://w3lessons.info/wp-content/uploads/2013/05/Message-Boxes-using-CSS3.pnghttp://w3lessons.info/wp-content/uploads/2013/05/Message-Boxes-using-CSS3-150x150.pngKarthikeyan KCSS3FreebiesjqueryCSS3,freebies,message box,responsive
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.CSS3...