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.
1
2
3
4
5
6
7
8
9
| <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.
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
| .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.
1
2
3
4
5
6
7
8
9
10
11
| .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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| .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.
1
2
3
4
5
6
7
8
9
10
11
12
| .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.
1
2
3
4
5
6
7
8
9
10
11
| @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;
}
That’s all the codes we need. Thank you for reading this article.
No comments: