CSS Tutorial: Create Facebook Notification Box

fb notificationOne of new features from CSS3 is animations. You can create animations using css only and no javascript. In this tutorial I will show you how to create a Facebook notification box, the one that usually appear on the bottom left of your browser when some wrote comments on your status or push “like” buttons on your status or photos. This box usually only appear about 2 or 3 seconds and then fading slowly. So let’s get started.

 

Let’s write our simple HTML script. It is only contain the message and a checkbox to activate the notification.

<h1>Create Facebook Notification - no Javascript</h1>
<label for="activate-check">Activate Notification</label>
<input id="activate-check" class="activate-check" type="checkbox">
<div class="notifbox">
	<p>Kangtanto also commented on his own status</p>
</div>

Then we can define the CSS inside our HTML document or separated document. I choose text and background color that similar to Facebook notification box.
.notifbox{
		width:360px;
		position:relative;
		margin: 0 auto 20px auto;
		padding:25px 15px;
		border-radius:5px;
		display:none;
		opacity:0;
		cursor:default;
		background:#e7ebf2;
		color:#4a6ea8;
		border:2px solid #d4dae5;
	}

I set the display to none and opacity to 0 so I can slowly fade in the box.

In this example I use a checkbox and a label. When a user check the checkbox, it will fire the animation. I hide the checkbox(kick it out of the screen) and set a button appearance to label and when user click the label it also check the checkbox. Notice the attribut “for” in the label element.

label {
		-moz-appearance:button;
		cursor:pointer;
	}
	input#activate-check{
		position:absolute;
		top:-999px;
		left:-999px;
	}

When user click the label, it will fire the animation by calling fadeOut animation that defined in the same css document.
input#activate-check:checked ~ .notifbox{
		display:block;
		-webkit-animation: fadeOut 5s linear forwards;
		-moz-animation: fadeOut 5s linear forwards;
		-o-animation: fadeOut 5s linear forwards;
		-ms-animation: fadeOut 5s linear forwards;
		animation: fadeOut 5s linear forwards;
	}

To make it work on Firefox, Safari, Chrome and IE, I wrote all the prefixes and the one without prefixes. the

Let’s define the fadeOut that will slowly increase the opacity.

input#activate-check:checked ~ .notifbox{
		display:block;
		-webkit-animation: fadeOut 5s linear forwards;
		-moz-animation: fadeOut 5s linear forwards;
		-o-animation: fadeOut 5s linear forwards;
		-ms-animation: fadeOut 5s linear forwards;
		animation: fadeOut 5s linear forwards;
	}

the fadeOut will fade in the box first and then fade it out and slowly move it to Y axis or move it up slowly and dissappear.

CSS Animations

We can create animation with CSS to replace images, flash or javascript in many web pages. To create animation in CSS we have to learn about @keyframe rule.

Internet explorer does not yet implemented the animation, while firefox requires the prefix -moz, Opera requires the prefix -o- and Chrome and Safari requires the prefix -webkit. To create animation using @keyframe rule, we have to specify at least two properties:

  • The name of animation
  • the duration of the animation

as an example, let me rewrite the animation that we create above.

 

I hope this article is useful for you.

Be Sociable, Share!

Related Posts:

2 Comments

Add a Comment

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