X
Юрий Немец

Красивое уведомление на CSS3

Часто заходишь на сайт и тебе тычут этими всплывающими окнами, всяческие всплывающие окна, ты всё пытаешься их закрыть. А бывают и такие окна, в которых отсутствует кнопка закрыть. Чего не сделают ради рекламы и ради денег. Но с таких сайтов пытаешься быстрее сбежать. А легче всего это включить плагин AdBlock(для пользователей Firefox) и не думать о рекламе, а если и появится — просто кликнуть блокировать и всё. А в этом уроке мы создадим красивое уведомление, которое не будет отпугивать посетителей, а имеет приятный вид.

Реальный пример уведомления находится здесь:

Посмотреть примерСкачать




HTML часть

Начнем с создания структуры уведомления в HTML:

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">Показать</label>
    <label for="show">Скрыть</label>
 
    <div class="notification-text">Привет! Вы можете спрятать данное уведомление кликнув на кнопку справа.</div>
</div>

Оно состоит из кнопок навигации, в качестве которых будут использованы радио кнопки. И по умолчанию выбрана кнопка показа уведомления.



CSS часть

Давайте придадим вид нашему уведомлению с помощью таблицы стилей:

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
41
42
43
44
45
46
47
48
49
50
51
52
53

.notification-bar {
    position: absolute;
    width: 99%;
    top: 0;
}
 
.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;
}
.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 #2980B9;
}

Это лишь основные стили. Вы можете добавить свои стили, чтобы уведомление не сильно выделялось на фоне дизайна сайта.

А сейчас реализуем переключение с помощью псевдо-селектора :checked, так как мы используем радио кнопки:

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

 
.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%);
}

Когда первый раз смотришь демо, уведомление сразу показывается, поэтому добавим небольшую анимацию:

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%);  
    }   
 }


Вывод

Действительно красивое уведомление, которое, если не применять яркие цвета, не будет отпугивать посетителя, а имеет приятный вид и красиво прячется и выезжает при показе.


Успехов!

Источник: http://www.hongkiat.com/blog/show-n-hide-notification-bar/

Категории: CSS3