Проект 8: Интерактивные карточки

HTML-создает структуру страницы:

Подробнее:

Контейнер wrapper: Содержит четыре карточки.
Карточки card: Пустые блоки, которые будут стилизованы с помощью CSS.



Made in HTML/CSS

Проект 8: Интерактивные карточки

CSS-определяет стили и поведение элементов на странице

Подробнее:

Общие стили для body: Устанавливают шрифт, фон, цвет текста, размеры и центрирование содержимого.
Стили для ссылок a: Ссылки наследуют цвет текста от родительского элемента.
Стили для контейнера wrapper: Используют flexbox для расположения карточек с зазором между ними.
Стили для карточек card: Задают размеры, скругленные углы, фон, курсор и плавный переход при изменении состояния.
Эффект наведения: При наведении на контейнер wrapper, все карточки, кроме той, на которую наведен курсор, становятся размытыми и полупрозрачными.



Made in HTML/CSS

Проект 8: Интерактивные карточки

Результат:

Made in HTML/CSS

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

HTML- создает чекбокс с атрибутами:


type="checkbox": Указывает, что это чекбокс.
role="switch": Указывает, что чекбокс должен вести себя как переключатель.
class="circle": Присваивает чекбоксу класс circle, который будет использоваться для стилизации.
checked: Указывает, что чекбокс изначально отмечен.



Made in HTML/CSS

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

CSS:1часть


display: grid;: Устанавливает сетку для отображения содержимого.
margin: 0;: Убирает внешние отступы.
place-items: center;: Центрирует содержимое по горизонтали и вертикали.
min-height: 100vh;: Устанавливает минимальную высоту страницы равной высоте окна браузера.
font-size: 15vmin;: Устанавливает размер шрифта относительно меньшего из ширины и высоты окна браузера.
background: #ccc;: Устанавливает серый фон.



Made in HTML/CSS

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

CSS:2часть


--c: #333;: Определяет переменную для цвета.
appearance: none;: Убирает стандартное отображение чекбокса.
position: relative;: Устанавливает относительное позиционирование.
box-sizing: content-box;: Устанавливает модель расчета размеров элемента.
font-size: 1em;: Устанавливает размер шрифта.
height: 1em;: Устанавливает высоту элемента.

aspect-ratio: 2;: Устанавливает соотношение сторон элемента.
border: max(1px, 0.025em) solid var(--c);: Устанавливает границу с использованием переменной цвета.
border-radius: 1em;: Закругляет углы элемента.
background: Устанавливает сложный фон с использованием линейных градиентов и переменной цвета.
background-repeat: no-repeat;: Отключает повторение фона.
box-shadow: Добавляет тени для создания объемного эффекта.


Made in HTML/CSS

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