Web Design: Hide / Show Notification Bar With CSS3

By Thoriq Firdaus. in Coding. Updated on July 15, 2022.

Inspired by one of our readers comment from our previous, we are going to show you how to create a notification bar with a control button in this tutorial. The idea is that we will be able to hide or show the notification bar by clicking on a button – similar to the HelloBar.

As the title said, we will be doing this using (only) some CSS3 features. Well, let’s just get started.

View Demo

HTML Markup

We start off by creating the document and structuring the HTML markups. It is worth noting that the HTML markup plays an important role in order for the “hide-n-show” function work properly, as the function will be built purely using CSS3, which is very sensitive to the element structure and position.

Add the HTML elements in the following order.

<div class="notification-bar">
	<input id="hide" type="radio" name="bar" value="hide">
	<input id="show" type="radio" name="bar" value="show" checked="checked">
	
	<label for="hide">hide</label>
	<label for="show">show</label>
	
	<div class="notification-text">Hello World, you can hide this notification by clicking the close button.</div>
</div>

As you can see from the above code, we added two radio inputs with their labels to control the notification bar visibility – and, by default, the input radio with an id of show is checked.

At this point, some of you might already get the picture on how this works. When the radio input with an id of hide is checked the notification bar will be hidden, and it will be displayed when the radio input an id of show is checked.

Styles

Let’s add some decorative styles to make the notification bar look a little nicer. This includes specifying the notification’s background color, the font color, hiding the radio input and adding representative icons to their labels.

.notification-bar {
	position: absolute;
	width: 100%;
}
.notification-text {
	background-color: #2980B9;
	padding: 15px;
	color: #fff;
	font-size: 14px;
	text-align: center;
	position: absolute;
	width: 100%;
}
.notification-bar input {
	display: none;
}
.notification-bar label {
	cursor: pointer;
	color: #fff;
	position: absolute;
	z-index: 5;
	display: inline-block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.notification-bar label[for=hide] {
	right: 15px;
	top: 11px;
	width: 24px;
	height: 24px;
	background: url('../img/close.png') no-repeat center center;
}
.notification-bar label[for=show] {
	width: 45px;
	height: 50px;
	border-radius: 0px 0px 3px 3px;
	right: 10px;
	background: url('../img/show.png') no-repeat center center #2980B9;
}

Then, our notification bar will turn out to like in the following screenshot.

It’s really simple. You can always add more styles, if you want to.

Build the Function

As we are using the input radio button, we are able to apply the CSS3 :checked pseudo-class and then target the elements that follow using the sibling selector.

.notification-bar input[value=show]:checked ~ label[for=show] {
	-webkit-transition: ease 350ms;
	-moz-transition: ease 350ms;
	-o-transition: ease 350ms;
	transition: ease 350ms;
	
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%);
}

Given the above code, when the radio input with an id of show is checked, its associated label with the for=show attribute is moved to the top by 100% from its original position, whilst the additional transition property will make it move smoothly.

The button that is used to hide the notification bar should be visible, as you can see below.

Next, when the users click on the close button, the notification bar as well as the close button should move to the top and disappear. While the button that is used to pull it down should be back to its original position.

To do so, we can write the rule in this way.

.notification-bar input[value=show]:checked ~ label[for=show],
.notification-bar input[value=hide]:checked ~ label[for=hide],
.notification-bar input[value=hide]:checked ~ .notification-text {
	-webkit-transition: ease 350ms;
	-moz-transition: ease 350ms;
	-o-transition: ease 350ms;
	transition: ease 350ms;
	
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	-o-transform: translateY(-100%);
	transform: translateY(-100%);
}
.notification-bar input[value=hide]:checked ~ label[for=show] {
	-webkit-transition: ease 350ms;
	-moz-transition: ease 350ms;
	-o-transition: ease 350ms;
	transition: ease 350ms;
	
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	-o-transform: translateY(0%);
	transform: translateY(0%);
}

Then, to show the notification bar, we can write the rule, as follows.

.notification-bar input[value=show]:checked ~ label[for=hide],
.notification-bar input[value=show]:checked ~ .notification-text {
	-webkit-transition: ease 350ms;
	-moz-transition: ease 350ms;
	-o-transition: ease 350ms;
	transition: ease 350ms;
	
	-webkit-transform: translateY(0%);
	-moz-transform: translateY(0%);
	-o-transform: translateY(0%);
	transform: translateY(0%);
}

Final Touch

Lastly, I would like to add a little animation effect when the page notification bar is firstly loaded. To do so, I create a @kyeframe rule, like so.

@keyframes initiate {
 	0% {
		transform:translateY(-100%);
 	}
 	50% {
 		transform:translateY(-50%);
 	}
 	100% {
 		transform:translateY(0%);
 	} 
}

And assign the animation to the notification text container.

.notification-text {
	background-color: #2980B9;
	padding: 15px;
	color: #fff;
	font-size: 14px;
	text-align: center;
	position: absolute;
	width: 100%;

	-webkit-animation: initiate 350ms ease;
	-moz-animation: initiate 350ms ease;
	-o-animation: initiate 350ms ease;
	animation: initiate 350ms ease;
}

Check out: Creating Advanced “Marquee” With CSS3 Animation

That’s all the codes we need. You can now see it in action in the demo page or download the source from the following links.