Псевдоклассы и псевдоэлементы, переходы и анимации

Цель: изучить псевдоклассы и псевдоэлементы, получить навыки стилизации элементов, используя псевдоклассы и псевдоэлементы; изучить свойства css для создания переходов, преобразований и анимаций, овладеть навыками работы с ними.

Порядок выполнения лабораторной работы:

1. Изучить:

   • Псевдоклассы: :root, :link, :visited, :hover, :active, :focus, Псевдоклассы группы child, Псевдоклассы группы type, :checked, :disabled, :enabled, :required, :placeholder-shown;
   • Псевдоэлементы: ::before, ::after, ::placeholder, ::marker, ::selection, ::first-letter;
   • Статья по псевдоклассам и псевдоэлементам
   • transform;
   • transition;
   • animation и keyframes;
   • примеры их использования.

2. Для выполнения работы необходимо:

   1. В index.html:

      • заменить стандартное выделение (::selection) под цвета макета;
      • оформить поля формы (цвета, шрифты, размеры);
      • для ссылок и кнопок создать стили с псевдоклассами hover, active, focus;
      • для элементов, у которых заданы стили с псевдоклассом :hover добавить плавное изменение свойств через transition (масштабирование и поворот кнопки при наведении с добавлением тени и изменением цветов фона и текста);
      • стилизовать подсказки (placeholder) в полях;

   2. В form.html:

      • логотип в футере (если его нет, то добавьте) поверните на 30 градусов, увеличьте элемент в 1,5 раза, добавьте перекос (skew) элемента по горизонтали и вертикали.
      • выделить ярлык, с которым связано поле, находящееся в фокусе;
      • для текста у выбранных радиокнопок и чекбоксов изменить оформление;
      • стилизовать поля, обязательные для заполнения;
      • добавить еще одну форму:
        • в начале формы добавить список определений псевдоэлемента и псевдокласса (теги: dl, dt, dd);
        • для термина (dt) задать буквицу;
        • для определения (dd) через псевдоэлемент добавить ”🛈” (U+1F6C8);
        • два список чекбоксов: для псевдоэлементов и для псевдоклассов. Отметить с помощью атрибута checked те элементы и классы, которые использованы в работе.
        • ярлыки отмеченных элементов должны быть вычеркнуты;
        • четные элементы списка псевдоэлементов и нечетные элементы списка псевдоэлементов должны быть стилизованы иначе.

   3. создать третью страницу (demo.html) на которую добавить примеры:

      • Добавить двустороннюю карту, которая при наведении переворачивается с видимым эффектом перспективы;
      • Добавить имитацию бесконечно бегущей строки из изображений или других элементов.

3. Зафиксировать результаты работы с помощью системы контроля версий git и отправить репозиторий на github.

4. Загрузить проект на хостинг.

Требования к html и css:

• Корректное использование тегов;
• Код html и css отформатирован;
• Корректно выбранные форматы изображений;
• Страница должна соответствовать принципам адаптивной верстки;
• Отсутствие ошибок на валидаторе для html и css.

Результаты выполнения лабораторной работы:

Результаты работы проверены наставником.

Статическая веб-страница на хостинге, со структурой и оформлением, которая соответствует требованиям и сохранена в системе контроля версий.

Источники

• MDN: Псевдоклассы и псевдоэлементы

Псевдоклассы

• Doka
• MDN

Псевдоэлементы

• Doka
• MDN
• CSS-Tricks

Переходы

• CSS transitions

Анимации

• Doka
• MDN
• Создание ключевых кадров

Идеи и вдохновение

• Пример поиска на codepen, но разбирайтесь как там все работает.

Вопросы для защиты

1. Что такое псевдокласс?
2. Что такое псевдоэлемент?
3. Приведите примеры псевдоклассов/псевдоэлементов.
4. Чем отличаются псевдоклассы группы child от type?
5. Какие псевдоклассы нужны чтобы стилизовать радиокнопки во всех состояниях?
6. Где в дереве создаются псевдоэлементы ::before и ::after?
7. Какое свойство обязательно используется с псевдоэлементами ::before и ::after?
8. Обязательные свойства для создания анимации (animation).
9. Обязательные свойства для создания перехода (transition).
10. Какие свойства можно задать для перехода?
11. Какие свойства можно задать для анимации?
12. Назовите примеры преобразований (transform).
13. Какие свойства не подходят для анимаций и переходов из-за проблем с производительностью?

Задать вопрос наставнику