Створення красивих повідомлень за допомогою css

В даному уроці Ви навчитеся створювати красиві повідомлення за допомогою CSS. Крім цього, Ви також дізнаєтеся як ними правильно користуватися.

Створення красивих повідомлень за допомогою css
Створення красивих повідомлень за допомогою css

Давайте почнемо з типів повідомлень

1. Інформаційні повідомлення

Мета цих повідомлень інформування користувача. Такі повідомлення повинні бути блакитними, так як люди асоціюють цей колір з інформацією. Це може бути будь-яка інформація, яка може бути корисна користувачеві.

2. Повідомлення про успіх

Повідомлення про успіх повинні бути показані після того, як користувач успішно виконав будь-яку операцію. Успішно - означає повністю і без помилок. Зазвичай такі повідомлення зеленого кольору.

Подібні повідомлення повинні бути показані користувачеві якщо операція не може бути завершена. Зазвичай вони жовтого кольору.

4. Повідомлення про помилку

Повідомлення про помилку повинні бути показані тільки в тому випадку, якщо операцію неможливо виконати. Червоний ідеальний колір для цього, так як багато хто асоціює цей колір з тривогою :)

5. Повідомлення перевірки

Ще один тип повідомлень. Я вважав за краще для них помаранчевий колір. Подібні повідомлення показують користувачеві його помилки (наприклад, при заповненні форм).

Тепер давайте подивимося як такі повідомлення створити

Нам знадобиться наступний код CSS:

Даний код можна вставити як в той же файл, так і винести в таблицю стилів.

Тепер нам досить в тілі документа створити шар з необхідним класом:

Повідомлення дуже важливий елемент будь-якого інтерфейсу. Дуже часто їх взагалі не використовують. Не повторюйте цю помилку і користуйтеся подібними повідомленнями! І бажаю Вашим користувачам якомога менше повідомлень про помилки. )

Створення красивих повідомлень за допомогою css

За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!

Створення красивих повідомлень за допомогою css

Створення красивих повідомлень за допомогою css

Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!

Створення красивих повідомлень за допомогою css

Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.

Створення красивих повідомлень за допомогою css

Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!

Схожі статті