Nowadays, UX is a key factor when it comes to creating and designing a product or system. To keep users happy, developers struggle to create a good experience and better interactivity.
The user experience 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 performs important tasks.
In this article, you’ll learn how to create some alert messages with CSS3 and jQuery.
Below is a list with common notification messages:
The info notification type
Its purpose is to inform the user regarding a relevant matter.
The error notification type
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.
The warning notification type
This type of message notifies the user of a condition that might cause a problem in the future.
The success notification type
The success message should be displayed after the user successfully performs an action.
The HTML code
animate-bg, which animate the CSS gradients background diagonal stripes. Of course, to see this effect, you should use the 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
Define the messages types using an array:
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.
showMessage function is called when document ready.
On page load, first of all, we’ll hide all the messages:
hideAllMessages(). Then, for each trigger, show the equivalent message:
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.