{"id":2024,"date":"2012-02-14T00:09:53","date_gmt":"2012-02-14T00:09:53","guid":{"rendered":"https:\/\/deepubalan.com\/blog\/?p=2024"},"modified":"2019-06-08T00:02:49","modified_gmt":"2019-06-07T18:32:49","slug":"notify-pure-css-notification-bar-using-target-pseudo-class","status":"publish","type":"post","link":"https:\/\/deepubalan.com\/blog\/2012\/02\/14\/notify-pure-css-notification-bar-using-target-pseudo-class\/","title":{"rendered":"Notify: Pure CSS notification bar using :target pseudo class"},"content":{"rendered":"
\"pure<\/div>\n

For quite some time now, I have had this little idea of a CSS based notification bar floating in my head… and was wondering, would there be a way to create it purely using CSS. Finally I decided to spend some time this weekend, and the time spent on it was well worth it. Yes it’s all driven by the CSS3<\/a> magic. Absolutely no javascript or jquery was used in the making of this notification bar.<\/p>\n

I tried a third party service called hellobar for some days in my blog to display a notification bar, It’s indeed a good option with so many premium features like detailed traffic analysis and things like that. But it refers to external javascript files, moreover the free version has got some functional restrictions as well. So, I want to make my notification bar to be as simple as it can be with no extra http requests.<\/p>\n

so the basic idea is to create a decent looking lightweight pure css top notification bar. No images, no javascript… that means no extra http requests<\/a>. You will get a fast loading, less bandwidth burning, fully customizable simple menu for free. The notification-bar will load automatically on page load and it can easily be turned off and on anytime.<\/p>\n

:target Pseudo Class<\/h2>\n

This notification bar is created using the css3 feature called :target Pseudo Class. You can read more about CSS pseudo classes and :target pseudo class in one of my previous posts here<\/a><\/strong>.<\/p>\n

The code in Fiddle<\/h2>\n