Проектирование и дизайн ИС Практическая работа №22

Практическое занятие №22

Цель работы: Создание анимации всплывающих окон с уведомлением

Приобретаемые умения и навыки: Умение работать с СSS

Норма времени: 2 часа.

Оборудование: Компьютер с установленным программным обеспечением и подключенный к Internet

В данном уроке мы рассмотрим способ создания маленьких всплывающих сообщений с использованием CSS. Такие окошки могут пригодиться, когда надо красиво и ненавязчиво уведомить посетителя о результате каких-то действий.

Ход работы

Файл HTML

Мы создадим HTML файл в который поместим блок div c классом container, это наш основной контейнер в котором будут находиться кнопка для просмотра наших уведомлений, три блока с классами notif и notif-color-1, notif-color-2, notif-color-3 – для каждого окошка трех цветов. В блоке будем указывать содержание (текст сообщения) и добавим внутрь еще один для прогресс-бара (класс notif-progress). Помимо основного кода, в HTML тега head мы добавим дополнительные мета надстройки для лучшей работы в других браузерах.

Данный код должен отображать у вас следующий результат.

Файл CSS

Для начала мы создадим стиль страницы и кнопку запуска:

Далее зададим стиль уведомлений:

После мы устанавливаем цвета всплывающих уведомлений:

Далее мы займемся разработкой анимации

Также мы добавим варианты анимации для 2 и 3 уведомления

Вот таким довольно несложным способом можно создать аккуратные всплывающие сообщения.

Доп. Задание: с помощью комментариев в коде практической работы поясните какой код за что отвечает!

Контрольные вопросы:

1. Что такое модальное окно (modal window) и для чего оно используется?

2. Какие атрибуты aria-можно использовать для улучшения доступности модального окна?