Pop From Top Notification

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.

We’ll just make a div:

<div id="note">
    You smell good.
</div>

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

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

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 {
    0%, 100% { -webkit-transform: translateY(-50px); }
    10%, 90% { -webkit-transform: translateY(0px); }
}
@-moz-keyframes slideDown {
    0%, 100% { -moz-transform: translateY(-50px); }
    10%, 90% { -moz-transform: translateY(0px); }
}

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 {
    -webkit-transform: translateY(-50px);
    -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;
    -moz-transform:    translateY(-50px);
    -moz-animation:    slideDown 2.5s 1.0s 1 ease forwards;
}

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:

<div id="note">
    You smell good. <a id="close">[close]</a>
</div>

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

<script>
 close = document.getElementById("close");
 close.addEventListener('click', function() {
   note = document.getElementById("note");
   note.style.display = 'none';
 }, false);
</script>

Look ma, no libraries.

Since we don’t need that close button in browsers that do support the animations, we’ll hide it:

.cssanimations.csstransforms #close {
  display: none;
}

For the record, this should work OK on mobile browsers (tested Mobile Safari). There is no fixed positioning used here, only absolute, and that’s going to be less of a problem moving forward anyway (might want to consider making it fixed so even if the user is scrolled down the page they’ll get it).

Enjoy

View Demo   Download Files