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

CSS: 1 часть

Подробнее:

body: Устанавливает сетку для центрирования контента на странице.
height и width задают полную высоту и ширину окна браузера.
place-items: center центрирует контент по горизонтали и вертикали.
noscript: Позиционирует SVG элементы абсолютно, чтобы они могли быть использованы для фильтров без влияния на поток документа.


Made in HTML/CSS

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

CSS: 2 часть

Подробнее:


#wrap: Основной контейнер с фиксированными размерами, скругленными углами, относительным позиционированием и обрезкой содержимого. box-shadow добавляет тень для создания эффекта глубины.

&:before: Псевдоэлемент, который создает черный фон с небольшим отступом от краев контейнера. Он абсолютно позиционирован и центрирован относительно контейнера.


Made in HTML/CSS

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

CSS: 3 часть

Подробнее:

#wrap > div: Вложенные div с абсолютным позиционированием, занимающие всю область контейнера.
Применяются фильтры "goo" и "pixelate". Анимация вращения длится 30 секунд и повторяется бесконечно.

Made in HTML/CSS

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

CSS: 4 часть

Подробнее:

#wrap > div > div: Вложенные div с абсолютным позиционированием, круглой формой, фоном и анимацией перемещения. Анимация длится 8 секунд и повторяется бесконечно с альтернативным направлением.

Made in HTML/CSS

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

CSS: 5 часть

Подробнее:

#wrap > div > div:before, #wrap > div > div:after: Псевдоэлементы для создания дополнительных анимаций вращения и перемещения. Они наследуют стили от родительского элемента и имеют свои собственные анимации.

Made in HTML/CSS

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

CSS: 6 часть

Подробнее:

#wrap > div > div:after: Дополнительные стили для псевдоэлемента :after, включая изменение точки вращения, угол вращения, длительность анимации, перемещение и масштабирование.


Made in HTML/CSS

Проект 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