CSS3 / jQuery Notification boxes

Yesterday, I was making something for a client. It required two notification boxes, for  acceptance and rejection. So I thought why not share a professional notification boxes tutorial with you guys! Initial planning The first and the foremost thing you need to make an attractive notification box are the colors and the icons used. In basic terms, Yellowish-Green = Success Light Red = Error Pale yellow = Alert Sky Blue = Other Information Step 1 : HTML Lets start by placing simple HTML content to our webpage

</pre>
<div class="green">Success!
 Lorem ipsum dolor sit amet, consectetur.
<div class="cross">x</div>
</div>
<pre>

This is the basic structure of a notification box, without THE CSS or javasript. Here, I have used the class green, to set the background of the notification as greenish type. Another class, cross, is also used here. It is meant for closing a notification box (Will discuss about this when jQuery section comes up) Step 2 : CSS

span{
color:#444;
margin-right:10px;
}

.green{
background:#e8f1c4 url(images/success.png) no-repeat left;
background:url(images/success.png) no-repeat left, -moz-linear-gradient(top, #eff7dc 5%, #e4efb6 6%, #e8f1c4 21%, #eaf7ca 50%, #e8f1c4 93%, #d6e0b8 100%); /* FF3.6+ */
background:url(images/success.png) no-repeat left, -webkit-gradient(linear, left top, left bottom, color-stop(5%,#eff7dc), color-stop(6%,#e4efb6), color-stop(21%,#e8f1c4), color-stop(50%,#eaf7ca), color-stop(93%,#e8f1c4), color-stop(100%,#d6e0b8)); /* Chrome,Safari4+ */
background:url(images/success.png) no-repeat left, -webkit-linear-gradient(top, #eff7dc 5%,#e4efb6 6%,#e8f1c4 21%,#eaf7ca 50%,#e8f1c4 93%,#d6e0b8 100%); /* Chrome10+,Safari5.1+ */
background:url(images/success.png) no-repeat left, -o-linear-gradient(top, #eff7dc 5%,#e4efb6 6%,#e8f1c4 21%,#eaf7ca 50%,#e8f1c4 93%,#d6e0b8 100%); /* Opera11.10+ */
background:url(images/success.png) no-repeat left, -ms-linear-gradient(top, #eff7dc 5%,#e4efb6 6%,#e8f1c4 21%,#eaf7ca 50%,#e8f1c4 93%,#d6e0b8 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eff7dc', endColorstr='#d6e0b8',GradientType=0 ); /* IE6-9 */
background:url(images/success.png) no-repeat left, linear-gradient(top, #eff7dc 5%,#e4efb6 6%,#e8f1c4 21%,#eaf7ca 50%,#e8f1c4 93%,#d6e0b8 100%); /* W3C */
border:1px solid #cad883;
padding:10px 0px 10px 30px;
margin:10px 0;
color:#4e871c;
font-weight:700;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
width:400px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}

.cross{
float:right;
margin:5px 5px 0 0;
font-size:12px;
line-height:10px;
font-variant:small-caps;
font-weight:bolder;
cursor:pointer;

}

.cross:hover{
color:#000;
}

This is the backbone of our notification boxes, CSS3 is powerful enough to provide gradients, curved border edges, shadows. These are the prime ingredients of any eye-candy notice box! Lets understand the code, We will start by class green. We have included CSS3 gradient along with a background image. This way we have reduced the unnecessary use of additional img or div tags. Another important thing to be noticed is that, I have used multiple gradients instead of a simple two colors fade. This can be easily understood in the above code. Ok, so we have styled out container for the notification, but we must also give some button to close it! Otherwise it will look really stupid to have a success and an error notification for a same object. For this I have used an “X” button (ASCII 088) for the close option. You can close the notification box automatically or u can ask the user to close it. I am making the latter. I have used cross class to stylize the “X”. Up-till now we have made a static notification box. Step 3 : jQuery As stated earlier, we are only using javascript to hide the notification boxes. This effect can also be done using CSS3 transitions. First you have to include jQuery to you file.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

It is very important to specify this code, else our jQuery functions will not work. I have specially mentioned this because newbies like me often tend to forget these lines and after hours of headbanging with my JS function I find out this ugly and humiliating error! Anyways, let’s get back to our notification box.

$(document).ready(function(){
	$(".cross").click(function(){
	$(this).parent("div").fadeOut('slow');
	})
});

A simple function, where when we click on cross the notification box closes. This is how it works. When a user clicks on “.cross” class, the control moves to the inner function. I have used “this” function so that we can only close the parent division (which is the “green” in this case). Step 4 : Sum up Similarly, we can make all other notification boxes for other colors to!