How to Make a Pure CSS Alert Bar

What we will be making:

I have slowly noticed more and more sites using pop from the top style noti­fic­a­tions. They can be very effect­ive if used cor­rectly. Today I am going to run through the cre­ation of such an alert bar using only CSS; no images and no JavaScript. To make things even more inter­est­ing, the bar will per­sist until clicked.

I won’t be using browser pre­fixes in this tutori­al, make sure that you do. If you need help determ­in­ing which pre­fixes to use for what prop­er­ties then check out this handy site: When can I use…

Those with a keen eye may have noticed that I used top: -45px; instead of top: 0;. This is in pre­par­a­tion for the next step…

Step 3: Animation

By default, the alert is hid­den off the top of the screen, we are going to use an anim­a­tion to slide it down. That way, browsers that don’t sup­port anim­a­tions (and prob­ably some of the oth­er advanced tech­niques we will be using) won’t see the alert at all. Here is a simple entrance anim­a­tion for our noti­fic­a­tion:

Step 4: Behaviour

Now we have our alert show­ing, but wouldn’t it be great if there was a way to get rid of it when we had fin­ished read­ing it? That’s where our wrap­per div comes in. We are going to use the :target pseudo-class to style the wrap­per when it becomes the tar­get (the URL’s hash is the value of its ID). If you are unsure what I am talk­ing about look back at the markup, see that the ‘href‘ matches the ID of the wrap­per div?

Here is the rel­ev­ant CSS:

#alert:target {
display: none;
}

Step 5: Instruction

Great, now we can close the alert. There is a slight prob­lem though; how will users know that click­ing closes the alert? Well let’s add a tool­tip to inform them!

We can use pseudo-ele­ments to avoid extra markup. We will use both the :before and :after pseudo-ele­ments, one for the body of the tool­tip, and one for the arrow.