Проект 13: Элемент с анимацией
HTML - 2 часть
Подробнее:
hexy: Основной SVG элемент, содержащий паттерн и анимацию.
pattern: Паттерн с идентификатором hexagons, который повторяется по всему SVG элементу.
path: 12 путей, каждый из которых представляет собой линию, анимированную с помощью элемента animate.
animate: Элемент, который анимирует свойство stroke-dashoffset каждого пути. Каждая анимация имеет длительность 3 секунды и повторяется бесконечно с разными начальными задержками.
rect: Прямоугольник, заполненный паттерном hexagons.
Made in HTML/CSS
HTML - 2 часть
Подробнее:
hexy: Основной SVG элемент, содержащий паттерн и анимацию.
pattern: Паттерн с идентификатором hexagons, который повторяется по всему SVG элементу.
path: 12 путей, каждый из которых представляет собой линию, анимированную с помощью элемента animate.
animate: Элемент, который анимирует свойство stroke-dashoffset каждого пути. Каждая анимация имеет длительность 3 секунды и повторяется бесконечно с разными начальными задержками.
rect: Прямоугольник, заполненный паттерном hexagons.
Made in HTML/CSS
👍6🔥2
Проект 13: Элемент с анимацией
CSS - 1 часть
Подробнее:
Тело документа:
body: Устанавливает маржины на 0 и автоматическое центрирование содержимого. Фон — темно-серый цвет (#111).
SVG элемент:
noscript: Позиционируется абсолютно в центре экрана с помощью transform: translate(-50%, -50%). Максимальная ширина — 400 пикселей. Цвет обводки — белый (#fff).
Made in HTML/CSS
CSS - 1 часть
Подробнее:
Тело документа:
body: Устанавливает маржины на 0 и автоматическое центрирование содержимого. Фон — темно-серый цвет (#111).
SVG элемент:
noscript: Позиционируется абсолютно в центре экрана с помощью transform: translate(-50%, -50%). Максимальная ширина — 400 пикселей. Цвет обводки — белый (#fff).
Made in HTML/CSS
👍4🔥2
Проект 13: Элемент с анимацией
CSS - 2 часть
Подробнее:
Ползунки:
durationSlider и rowColSlider: Позиционируются абсолютно в центре экрана с помощью transform: translate(-50%). Ширина — 95% от родительского элемента, максимальная ширина — 400 пикселей. Ползунок durationSlider расположен выше (top: 10px), а rowColSlider — ниже (top: 50px).
Made in HTML/CSS
CSS - 2 часть
Подробнее:
Ползунки:
durationSlider и rowColSlider: Позиционируются абсолютно в центре экрана с помощью transform: translate(-50%). Ширина — 95% от родительского элемента, максимальная ширина — 400 пикселей. Ползунок durationSlider расположен выше (top: 10px), а rowColSlider — ниже (top: 50px).
Made in HTML/CSS
🔥5
Проект 13: Элемент с анимацией
CSS - 3 часть
Подробнее:
Отображение значений:
offsetVal и rowColVal: Позиционируются абсолютно в центре экрана с помощью transform: translate(-50%). Цвет текста — белый (#fff). Пользователь не может выделять текст (user-select: none) и взаимодействовать с элементом (pointer-events: none).
rowColVal: Расположен ниже (top: 70px).
Made in HTML/CSS
CSS - 3 часть
Подробнее:
Отображение значений:
offsetVal и rowColVal: Позиционируются абсолютно в центре экрана с помощью transform: translate(-50%). Цвет текста — белый (#fff). Пользователь не может выделять текст (user-select: none) и взаимодействовать с элементом (pointer-events: none).
rowColVal: Расположен ниже (top: 70px).
Made in HTML/CSS
👍4🔥1
Проект 13: Элемент с анимацией
CSS - 4 часть
Подробнее:
Кнопка:
randCol: Позиционируется абсолютно внизу экрана (bottom: 20px) и центрируется горизонтально (left: 50%, transform: translate(-50%)). Цвет текста — белый (#fff), фон — прозрачный (background: none), обводка — белая (border: 2px solid #fff). Внутренние отступы — 5 пикселей по вертикали и 10 пикселей по горизонтали. Шрифт — Roboto. Углы кнопки скруглены (border-radius: 5px). Курсор изменяется на указатель при наведении (cursor: pointer).
randCol:hover: При наведении на кнопку цвет обводки и текста изменяется на стальной синий (steelblue).
randCol:active: При нажатии на кнопку цвет обводки и текста изменяется на голубой (#0ff).
Made in HTML/CSS
CSS - 4 часть
Подробнее:
Кнопка:
randCol: Позиционируется абсолютно внизу экрана (bottom: 20px) и центрируется горизонтально (left: 50%, transform: translate(-50%)). Цвет текста — белый (#fff), фон — прозрачный (background: none), обводка — белая (border: 2px solid #fff). Внутренние отступы — 5 пикселей по вертикали и 10 пикселей по горизонтали. Шрифт — Roboto. Углы кнопки скруглены (border-radius: 5px). Курсор изменяется на указатель при наведении (cursor: pointer).
randCol:hover: При наведении на кнопку цвет обводки и текста изменяется на стальной синий (steelblue).
randCol:active: При нажатии на кнопку цвет обводки и текста изменяется на голубой (#0ff).
Made in HTML/CSS
👍4🔥1
Проект 13: Элемент с анимацией
JS - 1 часть
Подробнее:
Обработчик событий:
Добавляет обработчик событий input для ползунка durationSlider.
При изменении значения ползунка получает новое значение (sliderValue).
Выбирает все элементы animate внутри SVG элемента hexy.
Обновляет текст внутри элемента offsetVal на новое значение ползунка.
Для каждого элемента animate обновляет атрибут dur на новое значение ползунка.
Made in HTML/CSS
JS - 1 часть
Подробнее:
Обработчик событий:
Добавляет обработчик событий input для ползунка durationSlider.
При изменении значения ползунка получает новое значение (sliderValue).
Выбирает все элементы animate внутри SVG элемента hexy.
Обновляет текст внутри элемента offsetVal на новое значение ползунка.
Для каждого элемента animate обновляет атрибут dur на новое значение ползунка.
Made in HTML/CSS
👍3🔥1
Проект 13: Элемент с анимацией
JS - 2 часть
Подробнее:
Обработчик событий:
Добавляет обработчик событий input для ползунка rowColSlider.
При изменении значения ползунка получает новое значение (sliderValue).
Выбирает элемент паттерна hexagons.
Обновляет атрибуты height и width паттерна на новое значение ползунка, деленное на 100.
Обновляет текст внутри элемента rowColVal на новое значение ползунка.
Made in HTML/CSS
JS - 2 часть
Подробнее:
Обработчик событий:
Добавляет обработчик событий input для ползунка rowColSlider.
При изменении значения ползунка получает новое значение (sliderValue).
Выбирает элемент паттерна hexagons.
Обновляет атрибуты height и width паттерна на новое значение ползунка, деленное на 100.
Обновляет текст внутри элемента rowColVal на новое значение ползунка.
Made in HTML/CSS
👍3
Проект 13: Элемент с анимацией
JS - 3 часть
Подробнее:
Функция randInt:
Принимает два аргумента: min и max.
Возвращает случайное целое число в диапазоне от min до max включительно.
Функция colorWheel:
Выбирает все элементы path внутри паттерна hexagons.
Генерирует случайные значения для оттенка (h), насыщенности (sOffset) и светлоты (lOffset).
Для каждого элемента path обновляет атрибут stroke на новый случайный цвет в формате HSL (оттенок, насыщенность, светлота).
Обработчик событий:
Добавляет обработчик событий click для кнопки randCol.
При нажатии на кнопку вызывает функцию colorWheel, которая изменяет цвета элементов анимации на случайные.
Made in HTML/CSS
JS - 3 часть
Подробнее:
Функция randInt:
Принимает два аргумента: min и max.
Возвращает случайное целое число в диапазоне от min до max включительно.
Функция colorWheel:
Выбирает все элементы path внутри паттерна hexagons.
Генерирует случайные значения для оттенка (h), насыщенности (sOffset) и светлоты (lOffset).
Для каждого элемента path обновляет атрибут stroke на новый случайный цвет в формате HSL (оттенок, насыщенность, светлота).
Обработчик событий:
Добавляет обработчик событий click для кнопки randCol.
При нажатии на кнопку вызывает функцию colorWheel, которая изменяет цвета элементов анимации на случайные.
Made in HTML/CSS
👍4🔥2
Проект 14: интерактивная рамка
HTML
Подробнее:
Это HTML-код, который включает два изображения. Первое изображение имеет alt текст "a lighthouse", а второе изображение имеет alt текст "an old city" и дополнительный класс alt.
Made in HTML/CSS
HTML
Подробнее:
Это HTML-код, который включает два изображения. Первое изображение имеет alt текст "a lighthouse", а второе изображение имеет alt текст "an old city" и дополнительный класс alt.
Made in HTML/CSS
👍4🔥1
Проект 14: интерактивная рамка
CSS - 1 часть
Подробнее:
Этот CSS-код определяет два пользовательских свойства --a и --i. Свойство --a представляет собой угол с начальным значением -100turn, а свойство --i представляет собой число с начальным значением 1. Оба свойства не наследуются.
Made in HTML/CSS
CSS - 1 часть
Подробнее:
Этот CSS-код определяет два пользовательских свойства --a и --i. Свойство --a представляет собой угол с начальным значением -100turn, а свойство --i представляет собой число с начальным значением 1. Оба свойства не наследуются.
Made in HTML/CSS
👍4🔥1
Проект 14: интерактивная рамка
CSS - 2 часть
Подробнее:
Этот CSS-код определяет стили для всех изображений. Изображения имеют фиксированную ширину 230px, соотношение сторон 1, скругленные углы 30px, границу 5px серого цвета и внутренний отступ 10px. Маска изображения создается с использованием градиентов и переменных --a и --i. Также определены переходы для этих переменных и курсор в виде указателя.
Made in HTML/CSS
CSS - 2 часть
Подробнее:
Этот CSS-код определяет стили для всех изображений. Изображения имеют фиксированную ширину 230px, соотношение сторон 1, скругленные углы 30px, границу 5px серого цвета и внутренний отступ 10px. Маска изображения создается с использованием градиентов и переменных --a и --i. Также определены переходы для этих переменных и курсор в виде указателя.
Made in HTML/CSS
👍3🔥1
Проект 14: интерактивная рамка
CSS - 3 часть
Подробнее:
Этот CSS-код определяет дополнительное свойство --_a для изображений с классом alt. Значение этого свойства установлено на -45deg.
Также определяет стили для изображений при наведении курсора. При наведении значения переменных --i и --a изменяются на 0 и 0turn соответственно. Также определены переходы для этих переменных.
Made in HTML/CSS
CSS - 3 часть
Подробнее:
Этот CSS-код определяет дополнительное свойство --_a для изображений с классом alt. Значение этого свойства установлено на -45deg.
Также определяет стили для изображений при наведении курсора. При наведении значения переменных --i и --a изменяются на 0 и 0turn соответственно. Также определены переходы для этих переменных.
Made in HTML/CSS
👍5🔥1
Проект 14: интерактивная рамка
CSS - 4 часть
Подробнее:
Этот CSS-код определяет стили для элемента body. Устанавливаются нулевые отступы, минимальная высота 100vh, отображение в виде сетки с центрированием содержимого, автоматическое расположение элементов в колонки, зазор между элементами 50px и черный фон.
Made in HTML/CSS
CSS - 4 часть
Подробнее:
Этот CSS-код определяет стили для элемента body. Устанавливаются нулевые отступы, минимальная высота 100vh, отображение в виде сетки с центрированием содержимого, автоматическое расположение элементов в колонки, зазор между элементами 50px и черный фон.
Made in HTML/CSS
🔥6👍1
Проект 15: хомяк в колесе
HTML
Подробнее:
.wrapper: Основной контейнер, который центрирует содержимое.
.wheel-frame: Контейнер для колеса, который также имеет класс pix для стилизации изображений.
.wheel: Колесо, которое будет вращаться. Внутри него находятся:
.wheel-support: Поддержка колеса, также с классом pix.
.hamster: Хомяк, который бежит в колесе. Внутри него находятся:
.ear: Ухо хомяка, с классом pix.
.head: Голова хомяка, с классами puff и pix.
.bum: Задняя часть хомяка, с классами puff и pix.
input[type="range"]: Ползунок для регулировки скорости, с минимальным значением 0, максимальным значением 11 и начальным значением 3.
Made in HTML/CSS
HTML
Подробнее:
.wrapper: Основной контейнер, который центрирует содержимое.
.wheel-frame: Контейнер для колеса, который также имеет класс pix для стилизации изображений.
.wheel: Колесо, которое будет вращаться. Внутри него находятся:
.wheel-support: Поддержка колеса, также с классом pix.
.hamster: Хомяк, который бежит в колесе. Внутри него находятся:
.ear: Ухо хомяка, с классом pix.
.head: Голова хомяка, с классами puff и pix.
.bum: Задняя часть хомяка, с классами puff и pix.
input[type="range"]: Ползунок для регулировки скорости, с минимальным значением 0, максимальным значением 11 и начальным значением 3.
Made in HTML/CSS
👍4🔥1
Проект 15: хомяк в колесе
CSS - 1 часть
Подробнее:
*: Устанавливает box-sizing: border-box для всех элементов, чтобы включать padding и border в общую ширину и высоту элементов.
body: Сбрасывает отступы, задает шрифт, цвет фона и текста, а также определяет CSS-переменные для ширины колеса и цвета ручки ползунка.
p, h1, h2, h3, h4: Сбрасывает отступы и задает display: inline-block для заголовков и параграфов.
Made in HTML/CSS
CSS - 1 часть
Подробнее:
*: Устанавливает box-sizing: border-box для всех элементов, чтобы включать padding и border в общую ширину и высоту элементов.
body: Сбрасывает отступы, задает шрифт, цвет фона и текста, а также определяет CSS-переменные для ширины колеса и цвета ручки ползунка.
p, h1, h2, h3, h4: Сбрасывает отступы и задает display: inline-block для заголовков и параграфов.
Made in HTML/CSS
👍4🔥1
Проект 15: хомяк в колесе
CSS - 2 часть
Подробнее:
.wrapper: Центрирует содержимое по горизонтали и вертикали, задает ширину и высоту 100%, а также определяет CSS-переменные для скорости хомяка, скорости колеса и угла поворота колеса.
Made in HTML/CSS
CSS - 2 часть
Подробнее:
.wrapper: Центрирует содержимое по горизонтали и вертикали, задает ширину и высоту 100%, а также определяет CSS-переменные для скорости хомяка, скорости колеса и угла поворота колеса.
Made in HTML/CSS
👍6🔥1
Проект 15: хомяк в колесе
CSS - 3 часть
Подробнее:
.pix, .pix:after: Задает абсолютное позиционирование, ширину и высоту на основе CSS-переменных, а также стили для фона и рендеринга изображений.
.puff: Задает ширину и высоту, а также фоновое изображение для элементов с этим классом.
:before, :after: Задает абсолютное позиционирование и размеры для псевдоэлементов.
Made in HTML/CSS
CSS - 3 часть
Подробнее:
.pix, .pix:after: Задает абсолютное позиционирование, ширину и высоту на основе CSS-переменных, а также стили для фона и рендеринга изображений.
.puff: Задает ширину и высоту, а также фоновое изображение для элементов с этим классом.
:before, :after: Задает абсолютное позиционирование и размеры для псевдоэлементов.
Made in HTML/CSS
👍5🔥1
Проект 15: хомяк в колесе
CSS - 4 часть
Подробнее:
.ear: Задает фоновое изображение, ширину и высоту, а также позиционирование для уха хомяка.
.hamster: Задает flex-контейнер для хомяка, выравнивание элементов, отступы и z-index.
.hamster:before и .hamster:after: Задают фоновый цвет, размеры и позиционирование для псевдоэлементов хомяка.
.ear, .hamster:before, .hamster:after: Задают анимацию для уха и псевдоэлементов хомяка.
Made in HTML/CSS
CSS - 4 часть
Подробнее:
.ear: Задает фоновое изображение, ширину и высоту, а также позиционирование для уха хомяка.
.hamster: Задает flex-контейнер для хомяка, выравнивание элементов, отступы и z-index.
.hamster:before и .hamster:after: Задают фоновый цвет, размеры и позиционирование для псевдоэлементов хомяка.
.ear, .hamster:before, .hamster:after: Задают анимацию для уха и псевдоэлементов хомяка.
Made in HTML/CSS
🔥6
Проект 15: хомяк в колесе
CSS - 5 часть
Подробнее:
.head, .bum: Задают z-index, позиционирование и анимацию для головы и задней части хомяка.
.hamster div:after: Задает фоновое изображение, размеры, позиционирование и анимацию для псевдоэлементов частей хомяка.
.head и .bum: Задают позиционирование и угол поворота для головы и задней части хомяка.
.head:after и .bum:after: Задают позиционирование, смещение по оси X и угол поворота для псевдоэлементов головы и задней части хомяка.
Made in HTML/CSS
CSS - 5 часть
Подробнее:
.head, .bum: Задают z-index, позиционирование и анимацию для головы и задней части хомяка.
.hamster div:after: Задает фоновое изображение, размеры, позиционирование и анимацию для псевдоэлементов частей хомяка.
.head и .bum: Задают позиционирование и угол поворота для головы и задней части хомяка.
.head:after и .bum:after: Задают позиционирование, смещение по оси X и угол поворота для псевдоэлементов головы и задней части хомяка.
Made in HTML/CSS
👍3🔥2