Rounded Transparent Notifications with CSS3 and jQuery

Published on: Aug 10 2012 by Anli

CSS3 Rounded Transparent Notifications

In this quick tutorial we’re going to create some rounded transparent notifications using CSS3 and jQuery. The design of these notifications comes from Victor Erixon, a Swedish designer that created them for premiumpixels.com. This design was originally intended to be used as a Growl notification style and today we’re going to make a CSS3 version of it. This way we can improve our CSS3 skills while coding a detailed PSD design with CSS3.

We’ll use CSS3 only for creating the notifications except for the two icons, the cloud and the shopping cart, that will be PNG images. Then we’ll add some jQuery for making the notifications appear when we click on the menu buttons.

VIEW DEMO

Let’s begin!


The HTML

Here is the HTML code for the body of our notifications’ page:

<body>
	<header>
		<h1>* CSS3/jQuery Notifications *</h1>
	</header>
	<nav>
		<ul>
			<li><a class="light" href="#"><strong>LIGHT</strong></a></li>
			<li><a class="dark" href="#"><strong>DARK</strong></a></li>
			<li><a class="clear" href="#"><strong>CLEAR</strong></a></li>
		</ul>
	</nav>
	<div id="notifications-container"></div>

</body>

We have a header, a simple navigation and a “notifications container”. As you can see the “notifications container” is empty. This is because the notifications’ code with be generated with jQuery when the user clicks on the menu buttons.

This is the code for the light notification that will be generated:

<div class="light_notification">
	<div class="icon"></div>
	<div class="info">
		<p class="title"><strong>Blueish Cloud</strong></p>
		<p>3 files were uploaded</p>
	</div>
</div>

I’m not showing the code of the dark notification since it’s very similar with some slight differences that you can see in the source code.

As you can see the code is pretty simple. The notification has a main div with a class named “light_notification” that contains two other divs: “icon” for the PNG icon and “info” for the text. Now we’re going to style these classes with CSS3 and make the notification look like our PSD design:

The CSS

Below is the CSS code for our light notification. I’m not going to show the code of the dark one because, as I said above, it’s very similar.

Also, I’ll not show the CSS code for the header and navigation because this page is only for demonstration. Our main focus here is to code the notification from Photoshop to CSS3 and make it appear and disappear with jQuery.

That said, here is the CSS:

#notifications-container {
	width: 480px;
	margin: 20px auto 0 auto;
	padding-top: 1px;
}

.light_notification {
	display: none;
	width: 270px;
	height: 54px;
	margin: 30px auto 0 auto;
	padding: 1px 0;
	background: rgba(255,255,255,.3);
	background-image:
		-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,.02)), color-stop(50%, rgba(255,255,255,.03)), color-stop(50%, rgba(0,0,0,.02)), color-stop(100%, rgba(0,0,0,.03))),
		-webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,.2)), to(rgba(0,0,0,.05)));
	background-image:
		-webkit-linear-gradient(top, rgba(255,255,255,.02) 0%, rgba(255,255,255,.03) 50%, rgba(0,0,0,.02) 50%, rgba(0,0,0,.03) 100%),
		-webkit-linear-gradient(top, rgba(255,255,255,.2), rgba(0,0,0,.05));
	background-image:
		-moz-linear-gradient(top, rgba(255,255,255,.02) 0%, rgba(255,255,255,.03) 50%, rgba(0,0,0,.02) 50%, rgba(0,0,0,.03) 100%),
		-moz-linear-gradient(top, rgba(255,255,255,.2), rgba(0,0,0,.05));
	background-image:
		-o-linear-gradient(top, rgba(255,255,255,.02) 0%, rgba(255,255,255,.03) 50%, rgba(0,0,0,.02) 50%, rgba(0,0,0,.03) 100%),
		-o-linear-gradient(top, rgba(255,255,255,.2), rgba(0,0,0,.05));
	background-image:
		-ms-linear-gradient(top, rgba(255,255,255,.02) 0%, rgba(255,255,255,.03) 50%, rgba(0,0,0,.02) 50%, rgba(0,0,0,.03) 100%),
		-ms-linear-gradient(top, rgba(255,255,255,.2), rgba(0,0,0,.05));
	background-image:
		linear-gradient(to bottom, rgba(255,255,255,.02) 0%, rgba(255,255,255,.03) 50%, rgba(0,0,0,.02) 50%, rgba(0,0,0,.03) 100%),
		linear-gradient(to bottom, rgba(255,255,255,.2), rgba(0,0,0,.05));
	-moz-border-radius: 28px;
	-webkit-border-radius: 28px;
	border-radius: 28px;
	-moz-box-shadow:
		0 1px 0 0 rgba(255,255,255,.4) inset,
		0 -1px 0 0 rgba(255,255,255,.3) inset,
		0 1px 4px 0 rgba(0,0,0,.35);
	-webkit-box-shadow:
		0 1px 0 0 rgba(255,255,255,.4) inset,
		0 -1px 0 0 rgba(255,255,255,.3) inset,
		0 1px 4px 0 rgba(0,0,0,.35);
	box-shadow:
		0 1px 0 0 rgba(255,255,255,.4) inset,
		0 -1px 0 0 rgba(255,255,255,.3) inset,
		0 1px 4px 0 rgba(0,0,0,.35);
}

.icon {
	float: left;
	width: 65px;
	height: 54px;
	-moz-border-radius-topleft: 30px;
	-moz-border-radius-bottomleft: 30px;
	-webkit-border-top-left-radius: 30px;
	-webkit-border-bottom-left-radius: 30px;
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
	border-right: 1px solid rgba(0,0,0,.3);
	-moz-box-shadow: -1px 0px 0 0 rgba(255,255,255,.2) inset;
	-webkit-box-shadow: -1px 0px 0 0 rgba(255,255,255,.2) inset;
	box-shadow: -1px 0px 0 0 rgba(255,255,255,.2) inset;
}

.light_notification .icon {
	background: rgba(0,0,0,.07) url(../images/cloud.png) 15px center no-repeat;
}

.info {
	float: left;
	width: 204px;
	height: 54px;
	-moz-box-shadow: 1px 0px 0 0 rgba(255,255,255,.2) inset;
	-webkit-box-shadow: 1px 0px 0 0 rgba(255,255,255,.2) inset;
	box-shadow: 1px 0px 0 0 rgba(255,255,255,.2) inset;
}

p {
	margin-left: 13px;
	font-size: 12px;
	color: #000;
	line-height: 20px;
	text-shadow: 0 1px 0 rgba(255,255,255,.5);
	opacity: 0.8;
}

.title {
	margin-top: 8px;
}

We have used the CSS3 properties “linear-gradient”, “box-shadow”, “border-radius” and “text-shadow”. Also, for making the notification transparent, we have used “rgba” colors that are rgb colors with alpha transparency.

Now our light notification looks like this:

CSS3 Light Notification

The jQuery

So, we want to make our notification appear when the user clicks on the menu button (the “LIGHT” button). For this we’ll use jQuery and we’ll “append” the notification’s HTML code to the “notifications container” each time that the user clicks on the button.

Also for making the notifications disappear we’ll have another button (the “CLEAR” button) that removes the HTML of all the notifications from the “notifications container”.

Here is the jQuery code (the “script.js” file) for the “LIGHT” and “CLEAR” buttons:

$(document).ready(function(){

	$('nav a.light').click(function() {
		$('#notifications-container').append('<div class="light_notification">' +
							'<div class="icon"></div>' +
							'<div class="info">' +
								'<p class="title"><strong>Blueish Cloud</strong></p>' +
								'<p>3 files were uploaded</p>' +
							'</div>' +
						     '</div>');
		$('.light_notification').fadeIn('slow');
	});

	$('nav a.clear').click(function() {
		$('#notifications-container').fadeOut('slow', function() {
			$(this).html(''); 
		});
		$('#notifications-container').fadeIn();
	});

});

Try it yourself from the demo link above and see what happens.

Compatibility with Internet Explorer 7, 8 and 9

As you know, CSS3 properties are not supported by Internet Explorer 7 and 8 so I have created a fallback css file (the “ie.css” file) for these browsers. This way our notifications remain usable even on IE 7-8 but without shadows and gradients. We can also use images for the notifications on these browsers, but this is not the purpose of this tutorial.

Here is the simple fallback css file:

header h1 {
	color: #fff;
}

nav {
	background: #805c73;
}

nav a {
	color: #eee;
}

nav a:hover {
	background: #615158;
}

.light_notification {
	background: #cfb9c5;
	border: 1px solid #e1d6dc;
}

.dark_notification {
	background: #957f88;
	border: 1px solid #5f5a5c;
}

.light_notification .icon {
	background: url(../images/cloud.png) 15px center no-repeat;
}

.dark_notification .icon {
	background: url(../images/shopping-cart.png) center center no-repeat;
}

As for Internet Explorer 9, the “linear-gradient” property isn’t supported so you’ll not see some of the gradients used here. But since I don’t have IE 9, let me know if you try it.

Conclusion

We have finished coding these detailed PSD notifications with CSS3 and we have animated them using jQuery. We’ve also created a fallback css file for older browsers like IE 7-8. Now these CSS3 notifications are ready to be used in our pages. We just need to change the icons and the text.

So, what do you think about this tutorial? Did you learn something new?

Demo, Download and License

VIEW DEMO

DOWNLOAD FILE: CSS3 Rounded Transparent Notifications (1453)

RESOURCES USED:

Blueish Cloud Growl Style
Shopping Cart Icons

LICENSE:

You can use these CSS3 notifications in personal and commercial projects, but you can’t sell or redistribute them directly. If you want to publish them somewhere, please refer to this page.

Filed under: CSS3 Tutorials, jQuery

Sorry, the comment form is closed at this time.

Sorry, the comment form is closed at this time.