Cool notification messages with CSS3 & Jquery
  5digg
Nowadays, UX is a key factor when it comes about creating/designing a product or system. To keep users happy, developers struggle to create a good experience and a better interactivity.
UX is a term used to describe the overall experience and satisfaction a user has when using a product or system. So, a good UX will always make users happy and businesses more successful.
Notification messages are an important part of the user experience and you can’t afford to omit them. A notification alert message should appear every time the user perform important tasks.
In this article, you’ll learn how to create some alert messages with CSS3 and Jquery.


View demo

Message Types
Bellow is a list with common notification messages:
Info
Error
Warning
Success
Info
Its purpose is to inform user regarding a relevant matter.


Error
When an operation has failed, the user must be notified. For example: “The account couldn’t be deleted.” or “Your settings weren’t saved” etc.


Warning
This type of message notify the user of a condition that might cause a problem in the future.


Success
The success message should be displayed after user successfully performs an action.


The HTML
<div class="info message">
                 <h3>FYI, something just happened!</h3>
                 <p>This is just an info notification message.</p>
</div>

<div class="error message">
                 <h3>Ups, an error ocurred</h3>
                 <p>This is just an error notification message.</p>
</div>

<div class="warning message">
                 <h3>Wait, I must warn you!</h3>
                 <p>This is just a warning notification message.</p>
</div>

<div class="success message">
                 <h3>Congrats, you did it!</h3>
                 <p>This is just a success notification message.</p>
</div>
The CSS
.message
{
                -webkit-background-size: 40px 40px;
                -moz-background-size: 40px 40px;
                background-size: 40px 40px;
                background-image: -webkit-gradient(linear, left top, right bottom,
                                                        color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
                                                        color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
                                                        color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
                                                        to(transparent));
                background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                                                        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                                                        transparent 75%, transparent);
                background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                                                        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                                                        transparent 75%, transparent);
                background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                                                        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                                                        transparent 75%, transparent);
                background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                                                        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                                                        transparent 75%, transparent);
                background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                                                        transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                                                        transparent 75%, transparent);
                 -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
                 -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
                 box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
                 width: 100%;
                 border: 1px solid;
                 color: #fff;
                 padding: 15px;
                 position: fixed;
                 _position: absolute;
                 text-shadow: 0 1px 0 rgba(0,0,0,.5);
                 -webkit-animation: animate-bg 5s linear infinite;
                 -moz-animation: animate-bg 5s linear infinite;
}

.info
{
                 background-color: #4ea5cd;
                 border-color: #3b8eb5;
}

.error
{
                 background-color: #de4343;
                 border-color: #c43d3d;
}

.warning
{
                 background-color: #eaaf51;
                 border-color: #d99a36;
}

.success
{
                 background-color: #61b832;
                 border-color: #55a12c;
}

.message h3
{
                 margin: 0 0 5px 0;
}

.message p
{
                 margin: 0;
}

@-webkit-keyframes animate-bg
{
    from {
        background-position: 0 0;
    }
    to {
       background-position: -80px 0;
    }
}

@-moz-keyframes animate-bg
{
    from {
        background-position: 0 0;
    }
    to {
       background-position: -80px 0;
    }
}
Note the animate-bg, which animate the background diagonal stripes. Of course, to see this effect, you should use latest Webkit browsers like Chrome/Safari or Mozilla 5+.
The notification messages will be hidden initially. For that we’ll use fixed positioning (absolute value just for IE6 – as there is no position:fixed support).
    position: fixed;
     _position: absolute; /* IE6 only */
The Jquery
Define the messages types using an array:
var myMessages = ['info','warning','error','success'];
The below function hides the notification messages. Messages could have dynamic heights and for that, each message’s height is calculated in order to hide it properly.
function hideAllMessages()
{
                 var messagesHeights = new Array(); // this array will store height for each

                 for (i=0; i<myMessages.length; i++)
                 {
                                  messagesHeights[i] = $('.' + myMessages[i]).outerHeight(); // fill array
                                  $('.' + myMessages[i]).css('top', -messagesHeights[i]); //move element outside viewport
                 }
}
The showMessage function is called when document ready.
function showMessage(type)
{
        $('.'+ type +'-trigger').click(function(){
                  hideAllMessages();
                  $('.'+type).animate({top:"0"}, 500);
        });
}
On page load, first of all we’ll hide all the messages: hideAllMessages(). Then, for each trigger, show the equivalent message:
$(document).ready(function(){

                 // Initially, hide them all
                 hideAllMessages();

                 // Show message
                 for(var i=0;i<myMessages.length;i++)
                 {
                        showMessage(myMessages[i]);
                 }

                 // When message is clicked, hide it
                 $('.message').click(function(){
                                  $(this).animate({top: -$(this).outerHeight()}, 500);
                  });

});
View demo

Conclusion
Using CSS3, I think you can find endless possibilities to design notification messages. The above is just a minimal example, with no images (for simplicity’s sake).
But, the design is not everything, as functionality and interactivity have a very important role here.
Updates
Added CSS3 animation support for Mozilla 5+ (thanks Magne). I also fixed the proper CSS3 animation (thanks Glukki )
CSS3 gradients syntax updated. Now, Safari also renders background stripes.
Related content
CSS3 dropdown menu
How to create a cool and usable CSS3 search box
Sexy CSS3 menu
Pure CSS3 accordion
HTML5 & CSS3 envelope contact form

Written by Red
Catalin Rosu, a.k.a Red, is a professional web designer and developer who loves to be creative and enjoys CSS techniques. Stay tuned for latest updates, subscribe to RSS and follow him on Twitter.



13 Responses to “Cool notification messages with CSS3 & Jquery”
GLuKKi says:
July 5, 2011 at 16:35
There’s a glitch in example animation due to wrong background position shifting number. The result is the jumping background every 5 seconds.
Fix animate-bg background-position to the value ’40px * N’

@-webkit-keyframes animate-bg
{
from {
background-position: 0 0;
}
to {
background-position: -80px 0;
}
}

REPLY
Red says:
July 5, 2011 at 17:19
Thanks for noticing, I’ll fix that soon!

REPLY
Magne Andersson says:
July 5, 2011 at 19:37
You may want to know that support for CSS-animations is available in Firefox starting with (current) version 5. Seeing as you’ve added prefixes for other properties, you may want to do that for animations in Gecko-based browsers as well

REPLY
Red says:
July 5, 2011 at 21:26
Updates were made, thanks for your valuable feedback!

REPLY
Paul Crowe says:
July 5, 2011 at 21:28
I think this could be used for Email subscription.Click on an Email icon and the form slides down.Might try it…

REPLY
Red says:
July 5, 2011 at 23:31
Paul, with some modifications, you could use the above also for other purposes. Good luck!

REPLY
Subhsh says:
July 6, 2011 at 07:26
An auto-close after x seconds will be a great help. Please consider adding it.

REPLY
Red says:
July 6, 2011 at 10:14
Subhsh,
thanks for your suggestion.

This can be done calling hideAllMessages(); function using a setTimeout() method.

Though, auto hiding could be an important drawback. The user may not have time to actually read the notification message.

Catalin

REPLY
infocyde says:
July 8, 2011 at 19:24
Thanks for posting your demo, I like the technique. How about message blocks that pop up from the bottom of the view port? I’ll take your example and see what I can come up with.

Thanks again for sharing, this example has been very helpful.

REPLY
Red says:
July 9, 2011 at 09:35
infocyde, nice to hear you like this technique.

Of course, messages that pop out from the bottom are another option when it comes to notification messages.

Thanks for your comment!

REPLY
Tim says:
July 9, 2011 at 02:53
Great examples! I’m a backend guy and don’t know much about js. How would you go about showing a message after a form submission?

REPLY
Red says:
July 9, 2011 at 09:56
Thanks Tim!

If you’re submitting form without page refresh, using jQuery’s Ajax function, then you need to call the showMessage('success'); function within .success() method and showMessage('error'); function within .error() method.

REPLY
Tim says:
July 9, 2011 at 17:04
Thank you. Yeah, I should have specified there’s a page refresh.

REPLY
Leave a Reply
  Name (required)
 Mail (will not be published) (required)
 Website


Notify me of follow-up comments via e-mail
Subscribe to the Newsletter:


DesignerThemes.com
We're teaming up with awesome designers to build some amazing WordPress themes!
via Ad Packs
Categories
CSS
Graphic Design
Tools
Tutorials
Web Design
Friends
Accesorii iPhone
Crazy cool gadgets
Science and technology blog
Six Revisions
StudioPress Genesis
Total Computers
Webtide