/ / / Tutorial Membuat Hide and Show Notification Bar dengan CSS3 (Source Code)

Tutorial Membuat Hide and Show Notification Bar dengan CSS3 (Source Code)

, Edit
print this page Print this page
Tutorial Membuat Hide and Show Notification Bar dengan CSS3-Notification Bar adalah tampilan pesan singkat berbentuk teks dalam web toolbar yang bertujuan untuk menarik perhatian user atau visitor dengan informasi terpenting dalam website anda.
Karena itu pada tulisan ini saya akan membahas bagaimana caranya membuat Notification Bar. Konsepnya cukup simpe, yaitu Notification akan sembunyi atau muncul by clicking on a button.
Seperti biasa source code dan imagesnya dapat di download pada akhir tutorial.
So, what we need?

Pertama buat script HTMLnya, script HTMLnya saya beri nama index.html
script index.html
<!doctype html>
<html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Hide-n-Show Notification Bar</title>
<!-- demo scripts -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- demo content -->
<div class="demo-wrapper">
<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">kamu bisa menyembunyikan notifikasi ini dengan mengklik close button.</div>
</div>
</div>
</body>
</html>

Saya membuat dua radio inputs sebagain labels untuk mengontrol notification bar visibility
sebagai gambaranya, ketika radio input dengan id hide di click, notification bar akan bersembunyi, dan akan muncul ketika radio input dengan id show di click

Kedua buat CSS untuk mempercantik tampilan Notification bar, sebisa mungkin Notification bar haruslah menonjol atau cukup contrast gunanya agar memancing perhatian visitor. 
Script CSSnya saya beri nama Style.css
Script style.css

 @font-face {
    font-family: 'AnagramRegular';
    src: url('Anagram-webfont.eot');
    src: url('Anagram-webfont.eot?#iefix') format('embedded-opentype'),
         url('Anagram-webfont.woff') format('woff'),
         url('Anagram-webfont.ttf') format('truetype'),
         url('Anagram-webfont.svg#AnagramRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.notification-bar {
position: absolute;
width: 100%;
top: 0;
}
.notification-text {
background-color: #2ecc71;
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;
}
.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;
-webkit-animation: initiate 350ms ease;
-moz-animation: initiate 350ms ease;
-o-animation: initiate 350ms ease;
animation: initiate 350ms ease;
}
.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 #2ecc71;
}

 /* Function */
.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],
.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%);
}

 /* Inital Animation */
@-webkit-keyframes initiate {
  0% {
-webkit-transform:translateY(-100%);
  }
  50% {
  -webkit-transform:translateY(-50%);
  }
  100% {
  -webkit-transform:translateY(0%);
  } 
}
@-moz-keyframes initiate {
  0% {
-moz-transform:translateY(-100%);
  }
  50% {
  -moz-transform:translateY(-50%);
  }
  100% {
  -moz-transform:translateY(0%);
  } 
}
@-o-keyframes initiate {
  0% {
-o-transform:translateY(-100%);
  }
  50% {
  -o-transform:translateY(-50%);
  }
  100% {
  -o-transform:translateY(0%);
  } 
}
@keyframes initiate {
  0% {
transform:translateY(-100%);
  }
  50% {
  transform:translateY(-50%);
  }
  100% {
  transform:translateY(0%);
  } 

}
setelah dijalankan scriptnya, maka hasilnya adalah seperti ini


Setelah di klik ikon close maka akan seperti gambar di bawah ini

Semoga tutorial ini dapat berguna, script dan gambar ikon-ikonnya dapat di donwload di bawah

Download

Share on Google Plus

About kodekidi

KodeKidi.com Situs Tutorial Pemograman Berbahasa Indonesia
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment

Subscribe to: Post Comments ( Atom )