Notification Styles Inspiration

Today we’d like to share a couple of simple styles and effects for website notifications. There are a lot of ways to show an unobtrusive message to a user: from the classic growl-like notification to a bar at the top of the viewport. There’s really no limit to making creative notification styles and effects but you should keep in mind to not overdo it if you don’t want to make your user fall off a chair when he gets a notification 🙂 If you want the notification to be a discreet message to the user, keep simplicity and subtlety in mind for the effect of appearance and also the disappearance.

In this small set of notification style variations our aim was to do exactly that. We use CSS animations for showing and hiding the notifications. Some of them are preceded by a dummy loading animation, which could be a nice idea for specific actions that require some time in a system (i.e. saving, sending a message, etc.).

Note that the effects will only work in browsers that support CSS animations and 3D transforms.

There are several issues in IE: Animating the stroke-dashoffset of the SVG path for the circular loading animation using a CSS animation does not work. There also seems to be some kind of problem with the flipping animation that is at the bottom of the page (if it’s at the top it seems to work). The genie effect does not work because IE seems to have trouble with the translation value being in percentage.

Firefox (Win) does not seem to like box shadows when flipping things, but we’ve left it nonetheless in the bouncy flip effect because it looks so neat in all the other browsers.

We’ve used some great resources that helped creating the effects:

• Some animations were made with the help of bounce.js for some jelliness and bounciness in some of the effects.
• Snap.svg was used for animating/morphing the shape for the corner effect.
• One of SpinKit’s animations was used for the loading/spinning effect that precedes one of the notification styles.
• An adapted Animate.css animation was used for the bouncy flip effect.

The icons used in some of the demos are from the Linecons icon set and the web font was created with the IcoMoon App.

Note that this for inspiration purposes only (although you’ll find a very simple notification script that you might find useful for your own implementation). There are plenty of great plugins and scripts for notifications out there, which one suits you best depends of course on what you intend to do and in which context.

And here’s how we are using the effects. We’ve created a little notification script and, as an example, it can be added like this:

// create the notification
var notification = new NotificationFx({

	// element to which the notification will be appended
	// defaults to the document.body
	wrapper : document.body,

	// the message
	message : '<p>This is a message</p>',

	// layout type: growl|attached|bar|other
	layout : 'growl',

	// effects for the specified layout:
	// for growl layout: scale|slide|genie|jelly
	// for attached layout: flip|bouncyflip
	// for other layout: boxspinner|cornerexpand|loadingcircle|thumbslider
	// ...
	effect : 'slide',

	// notice, warning, error, success
	// will add class ns-type-warning, ns-type-error or ns-type-success
	type : 'error',

	// if the user doesn´t close the notification then we remove it 
	// after the following time
	ttl : 6000,

	// callbacks
	onClose : function() { return false; },
	onOpen : function() { return false; }

});

// show the notification
notification.show();

This creates the following division:

<div class="ns-box ns-growl ns-effect-slide ns-type-notice ns-show">
	<div class="ns-box-inner">
		<p>This is a message</p>
	</div>
	<span class="ns-close"></span>
</div>	

The default styles for the notifications can be found in ns-default.css which we include for every effect. Individual effects are in the single style sheets, i.e. ns-style-growl.css. If only one effect would be in use, you’d of course just use the rules needed for the style/effect.

An example for a layout and effect style is the following:

/* Growl-style layout  */
.ns-growl {
	top: 30px;
	left: 30px;
	max-width: 300px;
	border-radius: 5px;
}

.ns-growl p {
	margin: 0;
	line-height: 1.3;
}

/* For hiding the notification, we'll simply reverse the applied animation by default */

[class^="ns-effect-"].ns-growl.ns-hide,
[class*=" ns-effect-"].ns-growl.ns-hide {
	animation-direction: reverse;
}

/* Scale effect */
.ns-effect-scale {
	background: #67c58f;
	box-shadow: 0 25px 10px -15px rgba(0,0,0,0.05);
}

.ns-effect-scale a {
	color: #1f8a4c;
}

.ns-effect-scale a:hover,
.ns-effect-scale a:focus {
	color: #fff;
}

.ns-effect-scale .ns-close::before,
.ns-effect-scale .ns-close::after {
	background: #1f8a4c;
}

.ns-effect-scale .ns-close:hover::before,
.ns-effect-scale .ns-close:hover::after {
	background: #fff;
}

.ns-effect-scale.ns-show,
.ns-effect-scale.ns-hide {
	animation-name: animScale;
	animation-duration: 0.25s;
}

@keyframes animScale {
	0% { opacity: 0; transform: translate3d(0,40px,0) scale3d(0.1,0.6,1); }
	100% { opacity: 1; transform: translate3d(0,0,0) scale3d(1,1,1); }
}

We hope you enjoyed these little ideas and find them inspiring!