Набір правил CSS для формування повідомлень

63

На сьогоднішній день ефективна інтерактивність і інтуїтивний дизайн є ключовими складовими при створенні успішного проекту. Різні елементи взаємодії з користувачами безсумнівно додають движухи будь-якого сайту або блогу. Одним з таких інтерактивних елементів є інформаційні блоки, повідомлення, які з’являються коли користувач здійснює які-небудь важливі дії.

Найчастіше використовується загальноприйнятий набір повідомлень, що включає 4 види повідомлень:

  • Помилки (error) При виникненні різного роду критичних помилок, краще якщо користувач буде повідомлений.
  • Попередження (warning) Цей вид повідомлень попередить користувача про проблеми в майбутньому ))).
  • Інформаційний (info) Поінформований користувач — це вже не «їжачок у тумані».
  • Успішне виконання завдань (success) Користувач все зробив правильно, це повідомлення повідомить його про це.

Звичайно, різновидів повідомлень може бути і більше, все залежить від потреб і польоту фантазії. Сьогодні ж, я вам пропоную готовий набір правил CSS для формування 4-х, звичних всім, блоків повідомлень, з елементами анімації в оформленні та можливістю закриття по кліку.

Розмітка HTML

Для початку складемо html-каркас наших повідомлень. З цим все дуже просто, помістимо потрібні нам повідомлення в 4 div контейнер з загальним для всіх класом, назвемо його class=”message” і присвоїмо кожному блоку унікальний ідентифікатор id, відповідний типу повідомлення. Наприклад: попереджуючим прописуємо id=”warning”, інформаційної панелі відповідно id=”info” і т. д.
Ідентифікатори нам знадобляться не тільки для прив’язки до CSS, але і для реалізації закриття повідомлень через подія onClick по кліку.

? Увага! Повідомлення про помилку.
? Упс! Застережливе повідомлення.
? Важливо! Просто інформаційне повідомлення.
? Вітаємо! Повідомлення про успішне дії.

?
Увага! Повідомлення про помилку.
?
Упс! Застережливе повідомлення.
?
Важливо! Просто інформаційне повідомлення.
?
Вітаємо! Повідомлення про успішне дії.

Спочатку, для плавного зникнення повідомлень при закритті, в onClick використовував властивості opacity:0; і visibility:hidden;, але так як елемент з нульовою непрозорістю займає те саме місце на сторінці, виходило порожній простір. Довелося пожертвувати плавністю переходу при закритті і використовувати display: none;, одне з тих властивостей, які без js не можна анімувати(може і помиляюся). C допомогою jQuery ця проблема вирішується на раз, тим більше, що для організації спливаючих повідомлень, скористатися цією бібліотекою так і так доведеться, але мова зараз зовсім не про те.

Для заголовків повідомлень використовував тег , в кнопці закриття замість картинки елементарний спецсимвол ×, що позначає традиційний хрестик( x ).

CSS

З формуванням та оформленням зовнішнього вигляду наших повідомлень засобами CSS теж все досить просто. Особливих красивостей і булочок у вигляді тематичних блоків, як бачите, немає. Елементарна суцільна заливка фону певним кольором, злегка розбавлена повторюваним лінійним градієнтом з елементами анімації.

.message{
background-size: 40px 40px;
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
box-shadow: 0 0 8px rgba(0,0,0,.3);
font:16px 'Open Sans';
width: 85%;
margin: 20px auto;
padding:15px;
-moz-animation: bg-animate 5s linear infinite;
-webkit-animation: bg-animate 5s linear infinite;
-ms-animation: bg-animate 5s linear infinite;
animation: bg-animate 5s linear infinite;
}
.message span{font-weight:600;}
.message #close{float:right; color:inherit; text-decoration:none;}

.message#error{
 background-color:tomato;
border-left:7px #dc3d21 solid;
 color:white;
}
.message#warning{
 background-color: #eaaf51;
 border-left:7px #df8b00 solid;
 color:#6b6d31;
}
.message#info{
 background-color: #4ea5cd;
 border-left:7px #3b8eb5 solid;
 color:#beecfc;
}
.message#success{
 background-color: #61b832;
 border-left:7px #55a12c solid;
 color:#296829;
}
@-webkit-keyframes bg-animate {
from {
background-position: 0 0;
}
to {
background-position: -80px 0;
}
}
@-moz-keyframes bg-animate {
from {
background-position: 0 0;
}
to {
background-position: -80px 0;
}
}
@keyframes bg-animate {
from {
background-position: 0 0;
}
to {
background-position: -80px 0;
}
}

.message{
background-size: 40px 40px;
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
transparent 75%, transparent);
box-shadow: 0 0 8px rgba(0,0,0,.3);
font:16px ‘Open Sans’;
width: 85%;
margin: 20px auto;
padding:15px;
-moz-animation: bg-animate 5s linear infinite;
-webkit-animation: bg-animate 5s linear infinite;
-ms-animation: bg-animate 5s linear infinite;
animation: bg-animate 5s linear infinite;
}.message span{font-weight:600;}
.message #close{float:right; color:inherit; text-decoration:none;}.message#error{
background-color:tomato;
border-left:7px #dc3d21 solid;
color:white;
}.message#warning{
background-color: #eaaf51;
border-left:7px #df8b00 solid;
color:#6b6d31;
}.message#info{
background-color: #4ea5cd;
border-left:7px #3b8eb5 solid;
color:#beecfc;
}.message#success{
background-color: #61b832;
border-left:7px #55a12c solid;
color:#296829;
}@-webkit-keyframes bg-animate {
from {
background-position: 0 0;
}
to {
background-position: -80px 0;
}
}@-moz-keyframes bg-animate {
from {
background-position: 0 0;
}
to {
background-position: -80px 0;
}
}@keyframes bg-animate {
from {
background-position: 0 0;
}
to {
background-position: -80px 0;
}
}

Анімацію, яка оживляє лінії градієнта на тлі повідомлень, логічно обізвав bg-animate, щоб відразу було зрозуміло, якогось елементу надаємо движухи. Уповільнення зміщення позиції діагональних смуг виставив в 5s (п’ять секунд). Лівий край блоків повідомлень виділив кольором і зробив його трішки ширше.
Колір і стиль символу кнопки закриття відповідає шрифту повідомлень. У прикладі, шрифт сімейства «Open Sans» підключив з бібліотеки шрифтів Google, ви можете використовувати будь-який інший.

На цьому мабуть і все. Залишається тільки подивитися працюючий приклад і при невгамовному бажанні поколупати код:

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: