Notify: Pure CSS notification bar using :target pseudo class

Notify: Pure CSS notification bar using :target pseudo class
pure css notification bar

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 magic. Absolutely no javascript or jquery was used in the making of this notification bar.

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.

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. 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.

:target Pseudo Class

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.

The code in Fiddle

Demo

Before we continue about how to the css/html code, let’s take a look at the fully-functional top-bar here…

The HTML

Copy and paste the below HTML code right after the opening <body> tag

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="topBar" id="notify">
  Your notification message goes here 
 
 
<div class="btnClose"><a href="#notify">X</a></div>
 
 
 
 
<div class="btnOpen"><a href="">notify</a></div>
 
 
</div>

The CSS

Copy and paste the below CSS code inside the <head> section or to the CSS file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
.topBar {
	width: 100%;
	height: 23px;
	position:relative;
	top: 0;
	text-align: center;
	border-bottom: 1px solid #fff;
	box-shadow: 0 2px 5px #ccc;
	padding-top: 7px;
	color: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px; }
.topBar .link {
	padding: 2px 8px;
	background-color: #831e1a;
	color: #fff;
	border-radius: 2px;
	font-size: 12px;
	font-weight: bold; }
.topBar .link:hover {
	background-color: #e62601; }
.btnClose a, .btnOpen a {
	width: 50px;
	position: absolute;
	right: 30px;
	top: -7px;
	font-weight: bold;
	color: #fff;
	text-shadow: 0 0 2px #921d17; }
.btnClose a {
	font-size: 12px;
	line-height: 44px;
	height:25px; }
.btnOpen a {
	font-size: 0;
	border: 1px solid #fff;
	box-shadow: 0 2px 5px #ccc;
	border-top: none;
	border-radius: 0 0 4px 4px; }
.topBar a {
	text-decoration: none; }
.topBar:target {
	top: -36px;
	transition: top 0.4s ease-in; }
.topBar:target .btnOpen a {
	top: 30px;
	height: 30px;
	font-size: 11px;
	line-height: 36px;
	transition-property: top;
	transition-duration: .4s; }
.topBar:target .btnClose {
	display: none; }
.topBar:target .btnOpen a, .topBar {
	background: linear-gradient(top,  rgba(226,87,81,1) 0%,rgba(228,93,86,1) 49%,rgba(213,82,76,1) 50%,rgba(226,87,81,1) 100%); }

Browser Compatibility


This notification bar is fully compatible on all major modern browser versions including IE9.

Internet Explorer Version 6 to 8

The CSS3 pseudo class support can be obtained in Internet Explorer versions 6 to 8 with a cool award winning javascript library called selectivizr. selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest. Selectivizr works automatically so you don’t need any JavaScript knowledge to use it – you won’t even have to modify your style sheets. Just start writing CSS3 selectors and they will work in IE. Selectivizr requires a JavaScript library to work. If your website already uses one of the 7 supported libraries you just need to add the selectivizr script to your pages. If not, you will need to pick a library too.

Downoad

[download id=”10″]

You can use this notification bar for personal and commercial projects at free of charge. What I only expect in return is your comments and backlinks, if you like it. You are not allowed to sell or redistribute this anywhere else. If you like to share this please link to this article.
Do not provide the direct download link nor upload this notification bar onto other servers for your own share, without my permission. If you want to spread the words, just link to this article.

Creative Commons License
Notify: Pure CSS notification bar using :target pseudo class by Deepu Balan is licensed under a Creative Commons Attribution 2.5 India License. Based on a work at deepubalan.com.

About The Author

19 thoughts on “Notify: Pure CSS notification bar using :target pseudo class

  1. Wow, it’s really brilliant.
    I never thought it would be possible to use only CSS for this.

    It’s working great but I have a little question:
    I’m trying to hide the bar after page load with the openning button displayed to make the bar slide down.
    And I stil don’t get at all what to do to make it works this way.
    As you see I’m a newb and without your help I am not going to maket it working.

    Thanks.
    Harald

  2. This is one addon for any site which is required for any blogger or site admin. Thanks for sparing time and creating it Balan. I will use it on my site in the coming days.

    1. You can not have two or more anchor hash tags in your URL, so you’ll actually reopen the notification bar when you click on an anchor. Also make sure to add a # for the close action or you’ll re-render certain elements on the page in a browser (I’ve tested this only in Chrome).

      Thanks for the navbar Deepu. Good work!

  3. Pingback: Weekly Design News – Resources, Tutorials and Freebies (N.121) | Wordpress Themes
    1. Thank you for your feedback Bernard… Could you please explain the scenario in detail, as I couldn’t find any issues while using it on a page with anchor tags. Thanks again!

    1. Very valid point Jon…
      Yes! we cannot wrap a DIV inside A tags as per W3C standards. I have updated the code to make it W3C valid.
      But, personally I don’t care too much about W3C standards in my experiments as long as the code works on all modern browser versions. Bcoz, If we follow the W3C standards, there is very limited scope for experiments and innovations 🙂
      Thanks a lot for you valuable comment… Really appreciate it!

      -Deepu

Leave a Reply

Your email address will not be published. Required fields are marked *