In a series of blog posts, we’ll discuss web design’s best practices when it comes to usability, responsiveness and accessibility. We care about great design and we’d love to show you that a little CSS love goes a long way. In this post, I’ll show you how to create a neat notification bar, as it’s currently in place on WordPress.org.

A notification bar glued to the top of a page, informing you about a discount, new feature, or – in this case – a user survey, is a very unobtrusive way to catch your visitors attention. Opening  up Firebug, I replicated the notification bar as displayed on WordPress.org and saved it to Codepen:

Recreating the notification bar

WordPress is mainly using div wrappers to style the bar, giving it its red background and top position. Defining a border-radius makes for the friendly rounded corners. I love how WordPress uses a nice #DDD color for the text, avoiding a harsh white-on-red combination.

Feel free to use my Codepen blurb for your own website! For the next Tidbits edition I’ll look at Kippt’s fancy buttons.