Notification Box – Alert Boxes using CSS

Hi guys, Today I am going to share some useful css code to improve your alert/confirmation boxes in your website by adding this simple jquery and css code.

Notification Box using CSS

Features

1. Notification Box with Custom Icon
2. Alert Box
3. Success Blox
4. Information Box

View Demo Download Now

I have already designed cool notification boxes using jquery & css in my previous article - http://w3lessons.info/2012/01/07/cool-notification-alert-message-boxes-using-css/

http://w3lessons.info/2012/02/22/notification-message-boxes-with-css-jquery/

http://w3lessons.info/2012/05/24/stylish-message-boxes-using-css-and-jquery/

CSS Code

div.alert-message {
display: block;
padding: 13px 12px 12px;
font-weight: bold;
font-size: 14px;
color: white;
background-color: #2ba6cb;
border: 1px solid rgba(0, 0, 0, 0.1);
margin-bottom: 12px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
position: relative;
}
div.alert-message .box-icon {
display: block;
float: left;
background-image: url('icon.png');
width: 30px;
height: 25px;
margin-top: -2px;
background-position: -8px -8px;
}
div.alert-message p {
margin: 0px;
}
div.alert-message.success {
background-color: #5da423;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
}
div.alert-message.success .box-icon {
background-position: -48px -8px;
}
div.alert-message.warning {
background-color: #e3b000;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
}
div.alert-message.warning .box-icon {
background-position: -88px -8px;
}
div.alert-message.error {
background-color: #c60f13;
color: #fff;
text-shadow: 0 -1px rgba(0, 0, 0, 0.3);
}
div.alert-message.error .box-icon {
background-position: -128px -8px;
}
div.alert-message a.close {
color: #333;
position: absolute;
right: 4px;
top: -1px;
font-size: 17px;
opacity: 0.2;
padding: 4px;
}
div.alert-message a.close:hover, div.alert-box a.close:focus {
opacity: 0.4;
}

Jquery Code for Close Button

$(function(){
 $(".alert-message").delegate("a.close", "click", function(event) {
	  event.preventDefault();
	  $(this).closest(".alert-message").fadeOut(function(event){
		  $(this).remove();
	  });
  });
})

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!

View Demo Download Now