{"id":13815,"date":"2011-08-25T07:39:42","date_gmt":"2011-08-25T14:39:42","guid":{"rendered":"http:\/\/css-tricks.com\/?p=13815"},"modified":"2011-08-25T07:39:42","modified_gmt":"2011-08-25T14:39:42","slug":"pop-from-top-notification","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/pop-from-top-notification\/","title":{"rendered":"Pop From Top Notification"},"content":{"rendered":"

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. <\/p>\n

\n\"\"
View Demo<\/a>   Download Files<\/a><\/figcaption><\/figure>\n

We’ll just make a div:<\/p>\n

<div id=\"note\">\r\n    You smell good.\r\n<\/div><\/code><\/pre>\n
Then we’ll style it and put it on the top of the screen:<\/p>\n
#note {\r\n    position: absolute;\r\n    z-index: 101;\r\n    top: 0;\r\n    left: 0;\r\n    right: 0;\r\n    background: #fde073;\r\n    text-align: center;\r\n    line-height: 2.5;\r\n    overflow: hidden; \r\n    -webkit-box-shadow: 0 0 5px black;\r\n    -moz-box-shadow:    0 0 5px black;\r\n    box-shadow:         0 0 5px black;\r\n}<\/code><\/pre>\n
Let’s animate it<\/h3>\n
With a keyframe animation, we can “hide” it above the browser window and bring it down for a short while:<\/p>\n
@-webkit-keyframes slideDown {\r\n    0%, 100% { -webkit-transform: translateY(-50px); }\r\n    10%, 90% { -webkit-transform: translateY(0px); }\r\n}\r\n@-moz-keyframes slideDown {\r\n    0%, 100% { -moz-transform: translateY(-50px); }\r\n    10%, 90% { -moz-transform: translateY(0px); }\r\n}<\/code><\/pre>\n
Er… let’s consider other browsers quick<\/h3>\n
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. <\/p>\n
So we’ll make a custom build of Modernizr<\/a> 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. <\/p>\n
.cssanimations.csstransforms #note {\r\n    -webkit-transform: translateY(-50px);\r\n    -webkit-animation: slideDown 2.5s 1.0s 1 ease forwards;\r\n    -moz-transform:    translateY(-50px);\r\n    -moz-animation:    slideDown 2.5s 1.0s 1 ease forwards;\r\n}<\/code><\/pre>\n
The 1.0s<\/code> in there is the delay before the animation runs. Best to wait a minute to make the notification more noticeable. <\/p>\n
Now we’ll add a close button into the HTML:<\/p>\n
<div id=\"note\">\r\n    You smell good. <a id=\"close\">[close]<\/a>\r\n<\/div><\/code><\/pre>\n
And a tiny bit of JavaScript at the bottom of the page so that the non-supporting browsers can close the notification. <\/p>\n
<script>\r\n close = document.getElementById(\"close\");\r\n close.addEventListener('click', function() {\r\n   note = document.getElementById(\"note\");\r\n   note.style.display = 'none';\r\n }, false);\r\n<\/script><\/code><\/pre>\n
Look ma, no libraries.<\/p>\n
Since we don’t need that close button in browsers that do support the animations, we’ll hide it:<\/p>\n
.cssanimations.csstransforms #close {\r\n  display: none;\r\n}<\/code><\/pre>\n
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).<\/p>\n
Enjoy<\/h3>\n
View Demo<\/a>   Download Files<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
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.<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":375412,"url":"https:\/\/css-tricks.com\/adding-box-shadows-to-wordpress-blocks-and-elements\/","url_meta":{"origin":13815,"position":0},"title":"Adding Box Shadows to WordPress Blocks and Elements","date":"December 7, 2022","format":false,"excerpt":"The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/11\/wordpress-box-shadow.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":284681,"url":"https:\/\/css-tricks.com\/stacked-borders\/","url_meta":{"origin":13815,"position":1},"title":"Stacked “Borders”","date":"March 19, 2019","format":false,"excerpt":"A little while back, I was in the process of adding focus styles to An Event Apart\u2019s web site. Part of that was applying different focus effects in different areas of the design, like white rings in the header and footer and orange rings in the main text. But in\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/03\/stacked-boxes.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":254179,"url":"https:\/\/css-tricks.com\/now-css-custom-properties-thing-value-parts-can-changed-individually\/","url_meta":{"origin":13815,"position":2},"title":"Now that CSS Custom Properties are a Thing, All Value Parts Can Be Changed Individually","date":"April 25, 2017","format":false,"excerpt":"CSS Custom Properties give us the ability to reach into a property value and change certain parts of it. That's useful in a bunch of places, but in particular, it's useful in properties which don't allow us to do it any other way.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":285899,"url":"https:\/\/css-tricks.com\/using-box-shadows-and-clip-path-together\/","url_meta":{"origin":13815,"position":3},"title":"Using “box shadows” and clip-path together","date":"April 10, 2019","format":false,"excerpt":"Let's do a little step-by-step of a situation where you can't quite do what seems to make sense, but you can still get it done with CSS trickery. In this case, it'll be applying a shadow to a shape. You make a box .tag { background: #FB8C00; color: #222; font:\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/tag-shape-box-shadow-filter.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":8711,"url":"https:\/\/css-tricks.com\/currentcolor\/","url_meta":{"origin":13815,"position":4},"title":"currentcolor","date":"March 17, 2011","format":false,"excerpt":"CSS variables are always a hot topic when \"the future of CSS\" is discussed. They are actually coming natively, but using them in production (without a CSS preprocessor framework) is a long way off. However there is a feature that actually has some browser support now that has a CSS\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/cssconf-color3.gif?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":306182,"url":"https:\/\/css-tricks.com\/creating-playful-effects-with-css-text-shadows\/","url_meta":{"origin":13815,"position":5},"title":"Creating Playful Effects With CSS Text Shadows","date":"April 20, 2020","format":false,"excerpt":"Let\u2019s have a look at how we can use the CSS text-shadow property to create truly 3D-looking text. You might think of text-shadow as being able to apply blurred, gradient-looking color behind text, and you would be right! But just like box-shadow, you can control how blurred the shadow is,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/04\/text-shadow-depth-effect.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/13815"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=13815"}],"version-history":[{"count":7,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/13815\/revisions"}],"predecessor-version":[{"id":13823,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/13815\/revisions\/13823"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=13815"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=13815"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=13815"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}