Notify: Pure CSS notification bar using :target pseudo class

By: Deepu Balan    |    In: CSS       
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.

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

Notify: Pure CSS notification bar using :target pseudo class

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.

Written by Deepu Balan

Deepu Balan is a self-taught web UI designer and developer who is really passionate about web design related stuffs. You can follow his updates on twitter @bdeepu