Notification Styles Inspiration

Some simple ideas and effects for unobtrusive website notifications. A little script is employed for showcasing some styles and CSS animations are used for the effects.

NotificationStyles

View demo Download source

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!

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 38

  1. 3

    These are literally so awesome. Codrops is the only site I can come to expect quality every time from! Using in my next project.

  2. 4

    These are great! I can’t believe internet explorer is so backword in terms of displaying CSS! It’s really frustrating because quite a few people still use it!

  3. 5

    Brilliant!

    But it doesn’t seem to be working in Chrome. Should I turn off any of Chrome’s experimental features?

  4. 8

    Absolutely love these notifications, particularly the “Slide on Top”, my only disappointment is that they don’t seem to stack if you have multiple. Does anyone have any ideas on getting that to work?

  5. 10

    I’ve got this when the slidetop hide in console.. “Uncaught NotFoundError: Failed to execute ‘removeChild’ on ‘Node': The node to be removed is not a child of this node.” Whats wrong?

  6. 12

    Really fantastic work!!!!
    Just a question, I’m not good at scripting and I’m trying to create the notification at window.onload/document.onload, but not a clue how to do it….any tip?

    • 13

      I need this too, at window.onload notification with this cool style, please any help will be appreciated.

  7. 15

    Hi, this codes very good, thanks.

    but I ask question. This Notications not work in telephone browser (for example: Samsung S3, HTC onex, Iphone…). Can you solve this problem. Notification opens but not close.

    Thanks…

  8. 16

    In IE9 the childNode does not get removed after ttl completes. To fix, change
    >> self.options.wrapper.removeChild( this );
    to:
    >> self.ntf.parentNode.removeChild( self.ntf );

  9. 17

    Ehi! Great job, but I’m trying to show notification on page load, and so not with click on button.
    How can I do this?

    I hope in yours support!!!

Follow this discussion

Leave a Comment

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=""> <strike> <strong>