Create CSS Notification Badge

Create CSS Notification Badge

The Notification Badge likely is seen on different social sites like Facebook etc. Today our small tutorial about making CSS Notification with Animation that looks nice on website or web applications.

We are going to show you how to make such kind of Badge using CSS and HTML. These CSS Notification Boxes Badges can be very effective in alerting the consumer to new things for your web page.

We can use these notification message alert boxes in the different area of a website. We can use them in mobile application development while letter the user know about accurate information such as Task, Login, Message, and Chat, etc.

How to Create CSS Notification Badge

Let’s start creating the box with HTML and our markup is simple with few different divs.

<div class="bocata">
	<div class="message_length">
	   <span>100</span>
	</div>
	<div class="text_wrapper">
		<div class="dots_wrapper">
			<span class="dots dot_one"></span>
		</div>
		<div class="dots_wrapper">
			<span class="dots dot_two"></span>
		</div>
		<div class="dots_wrapper">
			<span class="dots dot_three"></span>
		</div>
	</div>
	<div class="shadow"><div>
</div>

The Styling

To style the box you need to copy and paste following CSS.

.bocata {
position: relative;
}
.bocata:after, .bocata:before {
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
z-index: 99;
}
.bocata {
background-color: #ffffff;
width: 100px;
padding: 1em 1.5em;
position: relative;
border: 4px solid #008fa5;
border-radius: 5px;
}
.bocata:after {
top: 100%;
left: 28%;
border-top-color: #fff;
left: 28%;
border-width: 10px;
margin-top: -10px;
margin-top: 0;
}
.bocata:before {
border-width: 16px;
border-top-color: #008fa5;
left: 28%;
bottom: -32px;
margin-left: -6px;
}
.bocata.new_message {
-webkit-transition: width cubic-bezier(0.11, 0.92, 0.52, 0.98);
transition: width cubic-bezier(0.11, 0.92, 0.52, 0.98);
-webkit-animation: collapsing 0.7s;
animation: collapsing 0.7s;
}
.bocata.new_message .message_length {
-webkit-animation: zoom 0.6s 0.7s;
animation: zoom 0.6s 0.7s;
}
.bocata.new_message .text_wrapper .dots.dot_one {
-webkit-animation: blink 1s 0.6s infinite alternate;
animation: blink 1s 0.6s infinite alternate;
}
.bocata.new_message .text_wrapper .dots.dot_two {
-webkit-animation: blink 1s 0.75s infinite alternate;
animation: blink 1s 0.75s infinite alternate;
}
.bocata.new_message .text_wrapper .dots.dot_three {
-webkit-animation: blink 1s 0.9s infinite alternate;
animation: blink 1s 0.9s infinite alternate;
}
.bocata .message_length {
position: absolute;
min-width: 18px;
top: -15px;
right: -18px;
text-align: center;
zoom: 100%;
background-color: #008fa5;
color: white;
border-radius: 10px;
padding: 0.5em;
}
.bocata .text_wrapper {
text-align: center;
}
.bocata .text_wrapper .dots_wrapper {
float: left;
width: 33%;
text-align: center;
}
.bocata .text_wrapper .dots {
width: 5px;
height: 5px;
line-height: 0;
border-radius: 50%;
display: inline-block;
background-color: black;
}
.bocata .shadow {
content: "";
height: 2px;
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
box-shadow: 0 25px 20px 0px #008fa5;
}
@-webkit-keyframes collapsing {
0% {
width: 100px;
}
20% {
width: 80px;
}
70% {
width: 75px;
}
75% {
width: 110px;
}
90% {
width: 90px;
}
100% {
width: 100px;
}
}
@keyframes collapsing {
0% {
width: 100px;
}
20% {
width: 80px;
}
70% {
width: 75px;
}
75% {
width: 110px;
}
90% {
width: 90px;
}
100% {
width: 100px;
}
}
@-webkit-keyframes blink {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes blink {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes zoom {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes zoom {
0% {
-webkit-transform: scale(1);
transform: scale(1);
}
50% {
-webkit-transform: scale(1.15);
transform: scale(1.15);
}
100% {
-webkit-transform: scale(1);
transform: scale(1);
}
}

The Javascript.

In most cases you don’t need this Javascript but if you want to add a setTimout function than here it is. Just make sure to add the main jQuery file to run this function.

setTimeout(function(){
$('.bocata').addClass('new_message');
}, 1000);
setTimeout(function(){
$('.message_length span').html('101');
}, 2200);

Code ExamplesYou May Also Like