Проект 9: Интерактивная кнопка

CSS:3часть

content: "";: Создает пустой контент для псевдоэлементов.
position: absolute;: Устанавливает абсолютное позиционирование.
top: 50%; left: 0.5em; transform: translate(-50%, -50%);: Центрирует псевдоэлементы.
height: 50%; aspect-ratio: 1; border-radius: 50%;: Устанавливает размеры и закругленные углы для псевдоэлементов.
background: Устанавливает сложный фон с использованием радиальных градиентов.
box-shadow: Добавляет тени для создания объемного эффекта.



Made in HTML/CSS

Проект 9: Интерактивная кнопка

CSS:4часть

content: "";: Создает пустой контент для псевдоэлементов.
position: absolute;: Устанавливает абсолютное позиционирование.
top: 50%; left: 0.5em; transform: translate(-50%, -50%);: Центрирует псевдоэлементы.
height: 50%; aspect-ratio: 1; border-radius: 50%;: Устанавливает размеры и закругленные углы для псевдоэлементов.
background: Устанавливает сложный фон с использованием радиальных градиентов.
box-shadow: Добавляет тени для создания объемного эффекта.
transition: left 0.3s;: Добавляет плавный переход для изменения положения псевдоэлемента ::after.


Made in HTML/CSS

Проект 9: Интерактивная кнопка

CSS:5часть

left: calc(100% - 0.5em);: Перемещает псевдоэлемент ::after вправо при активации чекбокса.
opacity: 0.25;: Уменьшает прозрачность чекбокса, когда он отключен.


Made in HTML/CSS

Проект 9: Интерактивная кнопка

CSS:6часть

@media print: Устанавливает стили для печати, чтобы цвета отображались корректно.

@media (prefers-reduced-motion): Отключает анимации и переходы для пользователей, предпочитающих уменьшенное количество движений.


Made in HTML/CSS

Проект 9: Интерактивная кнопка

Результат:

Made in HTML/CSS

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

HTML: 1 часть -содержит два фильтра для SVG

Подробнее:

Filter "goo":
feGaussianBlur: Применяет размытие к исходному графическому объекту.
feColorMatrix: Применяет матрицу цветов для создания эффекта "goo" (слизи).
feComposite: Комбинирует исходный графический объект с результатом фильтра "goo".

Filter "pixelate":
feflood: Заполняет область определенным цветом.
fecomposite: Комбинирует заливку с исходным графическим объектом.
fetile: Повторяет заливку по всей области.
fecomposite: Комбинирует повторенную заливку с исходным графическим объектом.
femorphology: Применяет морфологическую операцию для создания эффекта пикселизации.


Made in HTML/CSS

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

HTML: 2 часть - содержит основную структуру HTML для дальнейшей анимации.

Подробнее:

div#wrap: Основной контейнер, содержащий три вложенных div.
Каждый вложенный div содержит еще один div, который будет использоваться для создания анимации.


Made in HTML/CSS

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