Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views :

Metro Style Message Boxes using CSS3

/
/

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!

  • Facebook
  • Twitter
  • Google+
  • Linkedin