Проект 9: Анимированная графика

CSS: 7 часть

Подробнее:

@keyframes: Определяет ключевые кадры для анимаций перемещения, вращения и движения. Эти анимации используются для создания динамичных эффектов.


Made in HTML/CSS

Проект 9: Анимированная графика

CSS: 8 часть

Подробнее:

#wrap > div:first-of-type, #wrap > div:nth-of-type(2), #wrap > div:nth-of-type(3): Устанавливает z-index и дополнительные стили для каждого из трех вложенных div.

Второй и третий div имеют свои собственные цвета фона и тени, а также масштабирование для псевдоэлемента :after.

Made in HTML/CSS

Проект 9: Анимированная графика

Результат:

Made in HTML/CSS

Проект 10: Стилизованная ошибка 404

CSS: 1 часть
Подробнее:

box-sizing: border-box;: Устанавливает модель расчета размеров элементов, включая padding и border в общий размер элемента.
Далее:
Устанавливает фоновый цвет, центрирует содержимое и определяет CSS-переменные для размеров и цветов.



Made in HTML/CSS

Проект 10: Стилизованная ошибка 404

CSS: 2 часть
Подробнее:

Создает миксин для создания кругов с заданным размером.
Создает стили для элемента с классом four, включая псевдоэлемент :after.


Made in HTML/CSS

Проект 10: Стилизованная ошибка 404

CSS: 3 часть
Подробнее:

Создает стили для элемента с классом sheep, включая псевдоэлементы :after и :before.



Made in HTML/CSS

Проект 10: Стилизованная ошибка 404

CSS: 4 часть
Подробнее:

Стили для элемента с классом head, включая псевдоэлементы :after и :before.



Made in HTML/CSS

Проект 10: Стилизованная ошибка 404

CSS: 5 часть
Подробнее:

Стили для элемента с классом ear, включая анимацию для правого и левого уха.


Made in HTML/CSS

Проект 10: Стилизованная ошибка 404

CSS: 6 часть
Подробнее:

Стили для элемента с классом eye, включая анимацию для глаз.


Made in HTML/CSS

Проект 10: Стилизованная ошибка 404

CSS: 7 часть
Подробнее:

Определяет анимации для движения головы, ушей и глаз.


Made in HTML/CSS

Проект 10: Стилизованная ошибка 404

Результат:

Made in HTML/CSS

Проект 11: Прикольный свайпер

HTML
Подробнее:

Создает слайдер с использованием библиотеки Swiper.

Внутри контейнера .swiper находится обертка .swiper-wrapper, содержащая несколько слайдов .swiper-slide, каждый из которых содержит изображение.

Также присутствуют кнопки навигации для перехода к следующему и предыдущему слайду.



Made in HTML/CSS

Проект 11: Прикольный свайпер

CSS: 1 часть
Подробнее:

Эта часть кода импортирует стили Swiper из CDN и использует слой base для организации стилей.


Made in HTML/CSS

Проект 11: Прикольный свайпер

CSS: 2 часть
Подробнее:

Эта часть кода стилизует основной контейнер слайдера и его обертку.

Основные стили включают:
Установка ширины и высоты контейнера слайдера.
Стилизация обертки слайдера для отображения элементов в виде flex-контейнера и центрирования их по вертикали.


Made in HTML/CSS

Проект 11: Прикольный свайпер

CSS: 3 часть
Подробнее:

Эта часть кода стилизует слайды и их содержимое.

Основные стили включают:
Установка начального масштаба и анимации для слайдов.
Стилизация активного слайда, предыдущего и следующего слайдов.
Стилизация изображений внутри слайдов, включая их размеры, объектное покрытие и закругленные углы.


Made in HTML/CSS

Проект 11: Прикольный свайпер

CSS: 4 часть
Подробнее:

Эта часть кода стилизует кнопки навигации слайдера.

Основные стили включают:
Установка размеров, цвета фона и закругленных углов для кнопок.
Позиционирование кнопок "предыдущий" и "следующий".
Стилизация состояния наведения курсора на кнопки.
Стилизация псевдоэлемента ::after для отображения иконок или текста внутри кнопок.


Made in HTML/CSS

Проект 11: Прикольный свайпер

CSS: 5 часть
Подробнее:

Эта часть кода сбрасывает стили для всех элементов и стилизует body.

Основные стили включают:
Сброс отступов и полей для всех элементов.
Установка box-sizing на border-box для всех элементов.
Стилизация body для центрирования контента и установки минимальной высоты и фона.


Made in HTML/CSS

Проект 11: Прикольный свайпер

JS:
Подробнее:

Этот JavaScript-код инициализирует слайдер Swiper и добавляет функциональность для динамического расчета высоты слайдов.

Основные части включают:

Инициализация Swiper с настройками, такими как количество видимых слайдов, центрирование, бесконечный цикл и навигация.

Функция calculateHeight, которая рассчитывает высоту слайдов на основе их ширины, сохраняя пропорции 16:9.
Обработчики событий для вызова calculateHeight при загрузке страницы и изменении размера окна.


Made in HTML/CSS

Проект 11: Прикольный свайпер

Результат:

Made in HTML/CSS