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