Animated CSS3 Notifications Bar

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

The experiment for today is a lightweight and responsive JavaScript-less solution that can be used for displaying important information on the top of a website, purely CSS3-driven and fully customizable in terms of colors, fonts, sizes and default state (expanded or collapsed):

css3-notification-bar

The CSS3 Hello Bar works with all modern browsers plus IE9+ (excluding transitions). Older browsers that do not understand the :root element of CSS3 will not display the bar, which is a good trade-off considering their small market share.

Related Posts and Links

19 comments

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s