How to Show/Hide Notification Bar using CSS3

first example

Hello friends today we gonna learn about How to Show/Hide Notification Bar using CSS3. So read this article, How to Show/Hide Notification Bar using CSS3 step by step so you may understand it in a better way. If you have query related to same article you may contact us. So Lets begin:

Guide: How to Show/Hide Notification Bar using CSS3

Inspired by one of our reader comments from our previous one, we’re going to show you how to create a notification bar with a control button in this tutorialThe idea is that we can hide or show the notification bar by clicking one button – similar to the HelloBar.

As the title said, we’ll do this with (just) some CSS3 featuresWell, let’s get started.

back to menu ↑

HTML formatting

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

Add the HTML elements in the following order.

Hello world, you can hide this message by clicking close button.

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

At this point, some of you may already be getting a sense of how this works. When the radio entry with an id of hide is checked, the notification bar will be hidden and will be displayed when the radio entry an id of show is checked.

back to menu ↑

Styles

Let’s add some decorative styles to make the notification bar look a little more fun. This includes specifying the background color of the notification, 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;}. label on the notification bar[for=hide] {right: 15px; top: 11px; width: 24px; height: 24px; background: url (‘../ img / close.png’) don’t repeat in the middle;}. label on the notification bar[for=show] {width: 45px; height: 50px; border radius: 0px 0px 3px 3px; right: 10px; background: url (‘../ img / show.png’) don’t repeat middle middle # 2980B9;}

Then our notification bar will turn out to be nice in the following screenshot.

It’s very simple. You can always add more styles if you want.

back to menu ↑

Build the function

Because we use the input radio button, we are able to apply the CSS3: controlled pseudoclass and then target the elements that follow using the sibling selector.

.notification bar entry[value=show]: checked ~ label[for=show] {-webkit transition: convenience 350 ms; -moz transition: convenience 350 ms; -o transition: ease 350 ms; transition: ease 350 ms;

-webkit-transform: translateY (-100%); moz-transform: translateY (-100%); o-transform: translateY (-100%); transform: translateY (-100%);}

Given the above code, when the radio entry with an id of show is checked, the corresponding label with the for = show attribute will be moved upwards by 100% of the original position, while the additional transition property will make it move smoothly .

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

close to button

Then, when the users click close button, the notification bar and the close button must go to the top and disappear. While the button used to pull it down must be back to its original position.

To do this, we can write the line like this.

.notification bar entry[value=show]: checked ~ label[for=show], .notification bar entry[value=hide]: checked ~ label[for=hide], .notification bar entry[value=hide]: checked ~ .notification-text {-webkit-transition: convenience 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: convenience 350 ms; -moz transition: convenience 350 ms; -o transition: ease 350 ms; transition: ease 350 ms;

-webkit-transform: translateY (0%); moz transform: translateY (0%); o-transform: translateY (0%); transform: translateY (0%);}

To display the notification bar, we can write the line as follows.

.notification bar entry[value=show]: checked ~ label[for=hide], .notification bar entry[value=show]: checked ~ .notification-text {-webkit-transition: convenience 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%);}

back to menu ↑

Final Touch

Finally, I want to add a little animation effect when the page notification bar first loads. To do this I create a @ kyeframe line like so.

Initiate @keyframes {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: start 350 ms convenience; -moz animation: start 350 ms convenience; -o animation: start 350 ms convenience; animation: start 350 ms convenience;}

Those are all the codes we need. You can now see it in action on the demo page or download the resource from the following links.

  • View demo
  • Download source
back to menu ↑

How to Show/Hide Notification Bar using CSS3: benefits

  • The How to Show/Hide Notification Bar using CSS3 tutorial is free .
  • This guide already helps so many users follow up with interest in a timely manner.
  • The price of the How to Show/Hide Notification Bar using CSS3 guide is free.

back to menu ↑

Faq

Tutorial summary of How to Show/Hide Notification Bar using CSS3

In this guide, we told you about the How to Show/Hide Notification Bar using CSS3; please read all steps so that you understand How to Show/Hide Notification Bar using CSS3 in case if you need any assistance from us, then contact us.

How this tutorial helping you?

So in this guide, we discuss the How to Show/Hide Notification Bar using CSS3, which undoubtedly helps you.

What is actual time in which this method complete?

The time to complete the How to Show/Hide Notification Bar using CSS3 tutorial is 10+ minutes.

What are the supported Device?

PC Laptop or Desktop


back to menu ↑

Final note

I hope you like the guide How to Show/Hide Notification Bar using CSS3. In case if you have any query regards this article you may ask us. Also, please share your love by sharing this article with your friends.

For our visitors: If you have any queries regards the How to Show/Hide Notification Bar using CSS3, then please ask us through the comment section below or directly contact us.
Education: This guide or tutorial is just for educational purposes.
Misinformation: If you want to correct any misinformation about the guide “How to Show/Hide Notification Bar using CSS3”, then kindly contact us.
Want to add an alternate method: If anyone wants to add more methods to the guide How to Show/Hide Notification Bar using CSS3, then kindly contact us.
Our Contact: Kindly use our contact page regards any help. You may also use our social and accounts by following us on Whatsapp, Facebook, and Twitter for your questions. We always love to help you. We answer your questions within 24-48 hours (Weekend off).
Channel: If you want the latest software updates and discussion about any software in your pocket, then here is our Telegram channel.

Compsmag
Logo
Shopping cart