Просмотр содержимого документа
«Проектирование и дизайн ИС Практическая работа №20»
Практическое занятие №20
Тема: hover-эффект для фото с помощью CSS
Цель работы: научиться создавать адаптивное боковое навигационное меню с помощью CSS
Приобретаемые умения и навыки: Умение работать с СSS
Норма времени: 2 часа.
Оборудование: Компьютер с установленным программным обеспечением и подключенный к Internet
Эта практическая работа посвящена визуальным эффектам. Сегодня мы создадим интересный ховер-эффект для фото, который реализован с помощью CSS: при наведении курсора мыши на область фото одна картинка заменяется другой. Если двигать курсором из стороны в сторону, можно наблюдать забавный эффект «жалюзи». Такой эффект поможет разнообразить веб-сайт.
Ход работы
Файл HTML
Мы создадим HTML файл в который поместим блок div c классом day, в который в свою очередь поместим 20 блоков с классом night . !!!Также не забываем о подключении CSS файла к HTML
Файл CSS
Шаг 1.
Первое что мы пропишем это настройки для тега body.
Цвет фона нашей странички. Значение задайте #222
Установить шрифты, которые будут использоваться для оформления текста. Нужно установить шрифты: Helvetica, Arial, sans-serif
Установить padding с значением «0»
Установить margin с значением «0»
Шаг 2.
Для тега p установим выравнивание текста по центру. (Для нашего будущего текста)
Шаг 3.
Для тега a (гипертекстовая ссылка) мы установим цвет шрифта со значением: #ccc
Шаг 4.
Далее мы будем подключать изображения. Мы создадим селектор класса day
В который поместим следующий код:
Этот код должен выводить нашу первую картинку.
Шаг 5.
Далее мы должны наложить на первое изображение второе изображение, но сделаем это с эффектом плавного перехода.
Результат должен быть таким.
Шаг 6.
Последним шагом будет добавление правила анимации которая будет менять наш рисунок один на другой с определенным интервалом времени. Для этого мы пропишем следующий код:
Готово! Hover-эффект создан.
Задание 2.
В созданном вами CSS коде с помощью комментариев поясните какое свойство за что отвечает.
Контрольные вопросы:
Что такое hover-эффект и зачем он нужен?
Какие основные свойства CSS можно использовать для создания hover-эффектов для изображений?