Facebook Style Notification Using HTML CSS

Facebook notification is familiar for all most of the people. So in this article am going to create Facebook like Notification using CSS and Jquery. Recently one of my friends asked how to create Facebook notification. I have used HTML, CSS and Jquery for Facebook Notification clone.

Facebook Style Notification Demo

You can view demo and download Facebook Notification below:

Live Demo Download

First we will create a HTML document with the following HTML tags to create Facebook Notification.

<!-- Link the stylesheet at header -->
<link rel="stylesheet" type="text/css" href="css/fb-notfication.css" media="screen" />

<!-- HTML -->
<div class="maindiv facebook">
	<ul>
		<li><span class="notired">1</span><a class="showfrindreq mesgnotfctn spritimg notifriend" title="Click to View Friend Requests">ws</a></li>
		<li><!--<span class="notired">2</span>--><a class="showmesgreq spritimg messagenormal" title="Click to View New Messages">ws</a></li>
		<li><!--<span class="notired">2</span>--><a class="showmesgreq spritimg nottifinormal" title="Click to View Notifications">ws</a></li>
		<div class="clear"></div>
	</ul>
	<div></div>
</div>

Now we need to style our element using CSS. Copy and paste the below CSS style ina file and save it as fb-notfication.css

.clear{ clear:both;}
.fbbg{background:#374F8A;}
.spritimg{ background-image:url(../images/facebook-icon.png);}
.facebook{width:240px; margin:0px auto; padding:40px; }
.facebook ul{ margin:0px; padding:0px;}
.facebook ul li{margin:0px 30px 0px 0px; padding:0px; float:left; list-style:none; width:36px;}
.facebook ul li a{ display:block; text-indent:-9999px; height:32px; width:36px; cursor:pointer;}
.facebook ul li a:hover{opacity:1;}

/* Icon Normal state*/
.friendnormal{background-position:-10px -6px;}
.messagenormal{background-position:-66px -118px;}
.nottifinormal{background-position:-116px -116px;}

/* Icon highlight state*/
.notifriend{ background-position:-10px -66px;}
.notimesg{ background-position:-66px -180px;}
.notinotg{ background-position:-116px -180px;}

.notifriendhover{background-position:-87px -101px;}
.notireqsch{ background-position:-86px -124px;}
.notireqschhover{background-position:-108px -124px;}
.notimesghover{background-position:-112px -102px;}
.notired{ 
display:block; background:#E43C03; text-align:center; color:#FFF;
font-size:12px; font-weight:bold; -moz-border-radius:6px;
-webkit-border-radius:6px; border-radius:6px;
width:14px; z-index:1; margin:0px 1px 0px 18px;
position:absolute; padding:1px;
}

Done!! Open your HTML file in any Browser and check. Hope that this example of Facebook style notification will be useful. Thank You.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>