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.


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;

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>
	<span class="ns-close"></span>

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 {
	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-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


Tagged with:

ML 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


Related Articles

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start leanirng CSS now.

Feedback 64

Comments are closed.
  1. 3

    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.

  2. 5

    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.

    • 6

      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?

  3. 7

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

  4. 8

    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 :)

  5. 10

    Hello Mary,
    Your work looks great and the result looks very nice on my website
    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

  6. 12

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

  7. 13


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

  8. 14


    I was wondering if the notification (notification script) could be started automatically, without the need to push the button (let’s say 3 sec. after the web page has loaded). Thank you.

Comments are closed.