Building CSS3 Notification Boxes With Fade Animations
Modern web design techniques have allowed developers to quickly implement animations supported by most browsers. I think alert messages are very commonplace, because the default JavaScript alert boxes tend to be pretty intrusive and poorly designed. This leads developers down a path to figure out which solutions would work out better for a more user-friendly interface.
For this tutorial I want to explain how we can put together CSS3 notification boxes which appear at the top of the page body. Users may then click on the notifications to have them fade away and eventually remove them from the DOM. As a fun added feature, I have also included buttons where you may click to append a new alert box into the top of the page. Check out my sample demo to get a better idea of what we’ll be making.
2 Million+ Digital Assets, With Unlimited Downloads
Get unlimited downloads of 2 million+ design resources, themes, templates, photos, graphics and more. Envato Elements starts at $16 per month, and is the best creative subscription we've ever seen.
Building the Page
To get started, we need to make two files named “index.html” and “style.css”. I will be including a reference to the latest jQuery library hosted by Google’s code CDN. The HTML is fairly straightforward since we just need to create some dummy text within an alert box. And all of the JavaScript has been added into the bottom of the page to save on HTTP requests.
<!doctype html> <html lang="en-US"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <title>CSS3 Notification Boxes Demo</title> <link rel="shortcut icon" href="https://designshack.net/favicon.ico"> <link rel="icon" href="https://designshack.net/favicon.ico"> <link rel="stylesheet" type="text/css" media="all" href="style.css"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> </head>
This is my header code for setting the external documents and the HTML5 doctype. Not very convoluted since we are just building a sample demo. For the notification windows I have setup two different styles – success and error. There are other design styles like warnings and info boxes, however I did not create alternate styles because I wanted to focus more on the effects.
<div id="content">
<!-- Icons source http://dribbble.com/shots/913555-Flat-Web-Elements -->
<div class="notify successbox">
<h1>Success!</h1>
<span class="alerticon"><img src="images/check.png" alt="checkmark" /></span>
<p>Thanks so much for your message. We check e-mail frequently and will try our best to respond to your inquiry.</p>
</div>
<div class="notify errorbox">
<h1>Warning!</h1>
<span class="alerticon"><img src="images/error.png" alt="error" /></span>
<p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p>
</div>
<p>Click the error boxes to dismiss with a fading effect.</p>
<p>Add more by appending dynamic HTML into the page via jQuery. Plus the notifications are super easy to customize.</p>
<div class="btns clearfix">
<a href="#" id="newSuccessBox" class="flatbtn">New Success Box</a>
<a href="#" id="newAlertBox" class="flatbtn">New Alert Box</a>
</div>
</div><!-- @end #content -->
Each icon image was created from this freebie PSD of flat elements and UI pieces. The icons were vector shapes which I scaled and resized to fit as a checkmark and X error button. If you need a warning/info icon it shouldn’t be hard to update the colors and create your own. The generic class .notify is added onto each of the message boxes. This will generate the box shadow and internal font styles.
Then additional classes such as .successbox and .errorbox allow us to change colors and details within the alert window. You can see this in my demo where the page loads with two existing alert messages. Each of the buttons at the bottom may be clicked to append a new alert box at the top of the page.
CSS Box Styles
I won’t go into too much detail on the CSS resets which are typical in all my other tutorials. I have created a default batch of typography and also centered the wrapper element with an inner #content div. This creates the box area which allows jQuery to append new warning elements at the very top of the page.
/** typography **/
h1 {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 2.5em;
line-height: 1.5em;
letter-spacing: -0.05em;
margin-bottom: 20px;
padding: .1em 0;
color: #444;
position: relative;
overflow: hidden;
white-space: nowrap;
text-align: center;
}
h1:before,
h1:after {
content: "";
position: relative;
display: inline-block;
width: 50%;
height: 1px;
vertical-align: middle;
background: #f0f0f0;
}
h1:before {
left: -.5em;
margin: 0 0 0 -50%;
}
h1:after {
left: .5em;
margin: 0 -50% 0 0;
}
h1 > span {
display: inline-block;
vertical-align: middle;
white-space: normal;
}
p {
display: block;
font-size: 1.35em;
line-height: 1.5em;
margin-bottom: 22px;
}
/** page structure **/
#w {
display: block;
width: 750px;
margin: 0 auto;
padding-top: 30px;
}
#content {
display: block;
width: 100%;
background: #fff;
padding: 25px 20px;
padding-bottom: 35px;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px 0px;
}
.flatbtn {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: inline-block;
outline: 0;
border: 0;
color: #f9f8ed;
text-decoration: none;
background-color: #b6a742;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
font-size: 1.2em;
font-weight: bold;
padding: 12px 22px 12px 22px;
line-height: normal;
text-align: center;
vertical-align: middle;
cursor: pointer;
text-transform: uppercase;
text-shadow: 0 1px 0 rgba(0,0,0,0.3);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
-moz-box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
box-shadow: 0 1px 0 rgba(15, 15, 15, 0.3);
}
.flatbtn:hover {
color: #fff;
background-color: #c4b237;
}
.flatbtn:active {
-webkit-box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
box-shadow:inset 0 1px 5px rgba(0, 0, 0, 0.1);
}
The website layout is quite simple to keep the effects noticeable. Anybody who is familiar with frontend web development should be able to port over these classes into their own stylesheet. I am using a unique style for the flat buttons to generate new alert box windows. Similarly I have updated the internal styles for each of the .notify class elements.
/** notifications **/
.notify {
display: block;
background: #fff;
padding: 12px 18px;
max-width: 400px;
margin: 0 auto;
cursor: pointer;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-bottom: 20px;
box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px 0px;
}
.notify h1 { margin-bottom: 6px; }
.successbox h1 { color: #678361; }
.errorbox h1 { color: #6f423b; }
.successbox h1:before, .successbox h1:after { background: #cad8a9; }
.errorbox h1:before, .errorbox h1:after { background: #d6b8b7; }
.notify .alerticon {
display: block;
text-align: center;
margin-bottom: 10px;
}
I setup a few default assumptions which work best in my sample layout. Each of the message notifications are limited to a 400px width and centered on the page using margin: 0 auto. Also I have updated the cursor icon to a pointer hand so that users know the entire element is clickable. We need to create a jQuery event listener which performs a function whenever the user clicks to dismiss a notification.
jQuery Animation
My JS codes actually perform two distinct operations. First we are detecting any existing .notify elements which are contained inside the #content div. Once a user clicks on this .notify box we need to fade the box down to 0% opacity with display: none, and then remove() the element out of the DOM altogether.
$(function(){
$('#content').on('click', '.notify', function(){
$(this).fadeOut(350, function(){
$(this).remove(); // after fadeout remove from DOM
});
});
If you are familiar with jQuery then this selector may appear strange at first. We are not selecting the #content div but actually looking for any .notify boxes within the content container. If you check out the documentation for jQuery’s .on() method you will notice we have the ability to pass another selector as the 2nd parameter which will update after the page has been rendered. Here is an excellent thread on Stack Overflow which explains this concept in greater detail.
The other piece of my script will check whenever a user clicks on either of the two buttons at the bottom of the page. These buttons are using the IDs #newSuccessBox and #newAlertBox. Whenever the user clicks we stop the default action of loading the HREF value and instead create a new HTML block to prepend onto the page.
// handle the additional windows
$('#newSuccessBox').on('click', function(e){
e.preventDefault();
var samplehtml = $('<div class="notify successbox"> <h1>Success!</h1> <span class="alerticon"><img src="images/check.png" alt="checkmark" /></span> <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p> </div>').prependTo('#content');
});
$('#newAlertBox').on('click', function(e){
e.preventDefault();
var samplehtml = $('<div class="notify errorbox"> <h1>Warning!</h1> <span class="alerticon"><img src="images/error.png" alt="error" /></span> <p>You did not set the proper return e-mail address. Please fill out the fields and then submit the form.</p> </div>').prependTo('#content');
});
});
Each function has its own variable containing a copy/paste mirror of the HTML I used for the box items. This HTML content is stored inside a string using the jQuery selector as an object. I can use the method prependTo() and select the content div so the new alert boxes will appear at the very top of the page. All of the new boxes may also be dismissed in the same fashion since their HTML codes are identical to the boxes which are hard-coded in static HTML.
