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

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

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

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

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

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

Эта практическая работа посвящена визуальным эффектам. Сегодня мы создадим интересный ховер-эффект для фото, который реализован с помощью CSS: при наведении курсора мыши на область фото одна картинка заменяется другой. Если двигать курсором из стороны в сторону, можно наблюдать забавный эффект «жалюзи». Такой эффект поможет разнообразить веб-сайт.

Ход работы

Файл HTML

Мы создадим HTML файл в который поместим блок div c классом day, в который в свою очередь поместим 20 блоков с классом night . !!!Также не забываем о подключении CSS файла к HTML

Файл CSS

Шаг 1.

Первое что мы пропишем это настройки для тега body.

1. Цвет фона нашей странички. Значение задайте #222

2. Установить шрифты, которые будут использоваться для оформления текста. Нужно установить шрифты: Helvetica, Arial, sans-serif

3. Установить padding с значением «0»

4. Установить margin с значением «0»

Шаг 2.

Для тега p установим выравнивание текста по центру. (Для нашего будущего текста)

Шаг 3.

Для тега a (гипертекстовая ссылка) мы установим цвет шрифта со значением: #ccc

Шаг 4.

Далее мы будем подключать изображения. Мы создадим селектор класса day

В который поместим следующий код:

Этот код должен выводить нашу первую картинку.

Шаг 5.

Далее мы должны наложить на первое изображение второе изображение, но сделаем это с эффектом плавного перехода.

Результат должен быть таким.

Шаг 6.

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

Готово! Hover-эффект создан.

Задание 2.

В созданном вами CSS коде с помощью комментариев поясните какое свойство за что отвечает.

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

1. Что такое hover-эффект и зачем он нужен? 

2. Какие основные свойства CSS можно использовать для создания hover-эффектов для изображений?