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.

From our sponsor: Learn from healthcare leaders in Northwestern’s Online MS in Healthcare Administration.

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!

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 64

Comments are closed.
  1. Muito bom!

    Por favor, não deixe esse blog de lado… vocês inspiram muita gente por ai!

    Parabéns!

  2. Epic! The thumb slider is a “must-have” for sites with member registration and internal messages. And works fine on IE 11.
    Thank you!

  3. This is really cool, I just loved it.
    Going to use in my current project.
    Thanx MARY LOU.

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

  5. 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!

  6. Brilliant!

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

  7. 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?

  8. 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?

  9. 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?

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

    • I need to dispatch 3 or 4 on load with transition delays, too … did you find a solution for multiple instances ?

  10. 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…

  11. 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 );

  12. 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!!!

  13. I cannot for the life of me figure out how to get these to function Onload rather than the button on click. Anyone?

    • add these lines:
      var notification = new NotificationFx({ ttl: 6000, type: 'notice', layout: 'growl', effect: 'slide', message: '<p>Your Message Here.</p>' }); notification.show();

  14. //This is for stacking those notifications with the thumbnail etc
    var margin = 90;

    if($(‘div’).hasClass(‘ns-box’)){
    margin = parseInt($(‘div.ns-box’).first().css(‘margin-top’).replace(‘px’,”)) + parseInt(70);
    }
    this.ntf = document.createElement( ‘div’ );
    this.ntf.style.marginTop = margin + ‘px’;

    // this is for removing div.ns-box after hiding
    setTimeout( function() {
    self.ntf.parentNode.removeChild( self.ntf );
    }, this.options.ttl / 2);

    For those who wondered how to stack notifications. I only used it on the one with thumbnail

  15. Here’s my solution for stacking notifications:

    for(i=1; i <= $('.ns-box').length; i++){

    $('.ns-box').eq(i).css('margin-top','+=90px');
    }

  16. I am using the bouncy flip, it works and shows fine. Only thing is that I’m not sure why I’m not able to get the same bouncy effect as shown in the demo. I’m not able to get the bouncy effect to work. I’m displaying the notification on a delay after page load.

  17. If you want to make it support multiple notifications add:
    position: relative; float: left;
    to the .ns-box rule of ns-default.css (line 3) and remove the
    position: fixed;
    from it.

    • Doesn’t seem to work for me, it puts the notification 30 pixels before the top of the screen.
      Did you manage to make it work?

  18. Just an FYI, the CSS has a couple of typos on the animScaleUp keyframes: both the 100% states are down as opacity 1 (missing the colon). Just had grunt throw a couple of SASS errors at me!!

    Amazing plugin though!!

  19. There is a bug in the downloadable code for the Thumb Slider effect. It seems the thumbnail image disappears for just a moment when preparing to animate out. Changing file ns-style-other.css lines 446 & 447 from ‘both’ to ‘forward’ fixes it. This bug is only in the downloaded code.

    Awesome stuff though, as usual. Thanks for sharing 🙂

  20. Hello Mary,
    Your work looks great and the result looks very nice on my website http://copocorp.free.fr
    But I have discovered a little bug on my job which I can not explain. If I switch on an other the panel in my browser (firefox 40.0) when the pop-up message is showed, when I come back later, the pop-up message is fixed and the click on the close cross button do nothing.
    Can you explain me this behaviour ?
    Thanks you very much

  21. Wow, great job! Thanks for that! I’ll be using these on my website! Once it’s done I’ll credit you! 🙂

  22. Hi.

    I want the notification to auto popup (without pushing the button). Is it possible ? Thanks.