Красиве повідомлення на css3

Часто заходиш на сайт і тобі тицяють цими спливаючими вікнами, всілякі спливаючі вікна, ти все намагаєшся їх закрити. А бувають і такі вікна, в яких відсутня кнопка закрити. Чого не зроблять заради реклами і заради грошей. Але з таких сайтів намагаєшся швидше втекти. А найлегше це включити плагін AdBlock (для користувачів Firefox) і не думати про рекламу, а якщо і з`явиться - просто клікнути блокувати і все. А в цьому уроці ми створимо красиве повідомлення, яке не буде відлякувати відвідувачів, а має приємний вигляд.

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

Подивитися прімерСкачать

HTML частина

Почнемо зі створення структури повідомлення в HTML:

Відео: Уроки по CSS / CSS3 HTML5 Форма пошуку

123456789

lt;div class="Notification-bar"gt;lt;input id="Hide" type="Radio" name="Bar" value="Hide"gt;lt;input id="Show" type="Radio" name="Bar" value="Show" checked="Checked"gt;lt;label for="Hide"gt; Показатиlt;/labelgt;lt;label for="Show"gt; Приховатиlt;/labelgt;lt;div class="Notification-text"gt; Привіт! Ви можете заховати дане повідомлення клікнувши на кнопку праворуч.lt;/divgt;lt;/divgt;

Воно складається з кнопок навігації, в якості яких будуть використані радіо кнопки. І за замовчуванням обрана кнопка показу повідомлення.

Відео: Красиве меню за 7 хвилин / CSS + HTML

CSS частина

Давайте надамо вид нашому повідомленню за допомогою таблиці стилів:

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253

.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.jpg`) 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.jpg`) no-repeat center center # 2980B9-}

Це лише основні стилі. Ви можете додати свої стилі, щоб сповіщення не сильно виділялося на тлі дизайну сайту.

А зараз реалізуємо перемикання за допомогою псевдо-селектора : checked, так як ми використовуємо радіо кнопки:

1234567891011121314151617181920212223242526

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

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

1234567891011

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

висновок

Дійсно гарне повідомлення, яке, якщо не застосовувати яскраві кольори, що не буде відлякувати відвідувача, а має приємний вигляд і красиво ховається і виїжджає при показі.

Відео: Мега Красиве меню на CSS і HTML

Успіхів!

джерело: https://hongkiat.com/blog/show-n-hide-notification-bar/

Поділися в соц мережах: