Pop From Top Notification

Chris Coyier — Thu, 25 Aug 2011 14:39:42 +0000

Have you seen that design pattern where a notification pops down from the top of the browser window, then slides away? We can rock that in pure CSS.

View Demo Download Files

We'll just make a div:


//AN_Xml:    You smell good.
//AN_Xml:

Then we'll style it and put it on the top of the screen:

#note {
//AN_Xml:    position: absolute;
//AN_Xml:    z-index: 101;
//AN_Xml:    top: 0;
//AN_Xml:    left: 0;
//AN_Xml:    right: 0;
//AN_Xml:    background: #fde073;
//AN_Xml:    text-align: center;
//AN_Xml:    line-height: 2.5;
//AN_Xml:    overflow: hidden;
//AN_Xml:    -webkit-box-shadow: 0 0 5px black;
//AN_Xml:    -moz-box-shadow:    0 0 5px black;
//AN_Xml:    box-shadow:         0 0 5px black;
//AN_Xml:}

Let's animate it

With a keyframe animation, we can "hide" it above the browser window and bring it down for a short while:

@-webkit-keyframes slideDown {
//AN_Xml:    0%, 100% { -webkit-transform: translateY(-50px); }
//AN_Xml:    10%, 90% { -webkit-transform: translateY(0px); }
//AN_Xml:}
//AN_Xml:@-moz-keyframes slideDown {
//AN_Xml:    0%, 100% { -moz-transform: translateY(-50px); }
//AN_Xml:    10%, 90% { -moz-transform: translateY(0px); }
//AN_Xml:}

Er... let's consider other browsers quick

But let's consider browsers that don't have transforms and animations for a second. For those, we'd want to default to just showing the notification bar at all times, with the ability to dismiss it.

So we'll make a custom build of Modernizr to test for transforms and animations, load that up, then we can write CSS to test for those features and only fire off the animations if we're in a browser that supports them.

.cssanimations.csstransforms #note {
//AN_Xml:    -webkit-transform: translateY(-50px);
//AN_Xml:    -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
//AN_Xml:    -moz-transform:    translateY(-50px);
//AN_Xml:    -moz-animation:    slideDown 2.5s 1.0s 1 ease forwards;
//AN_Xml:}

The 1.0s in there is the delay before the animation runs. Best to wait a minute to make the notification more noticeable.

Now we'll add a close button into the HTML:


//AN_Xml:    You smell good. [close]
//AN_Xml:

And a tiny bit of JavaScript at the bottom of the page so that the non-supporting browsers can close the notification.

CSS-Tricks

Pop From Top Notification

Let's animate it

Er... let's consider other browsers quick