Проект 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
Проект 15: хомяк в колесе
CSS - 6 часть
Подробнее:
@keyframes squidge: Анимация для сжатия и поворота головы и задней части хомяка.
@keyframes run: Анимация для бега хомяка.
@keyframes up-down: Анимация для движения уха хомяка вверх и вниз.
Made in HTML/CSS
CSS - 6 часть
Подробнее:
@keyframes squidge: Анимация для сжатия и поворота головы и задней части хомяка.
@keyframes run: Анимация для бега хомяка.
@keyframes up-down: Анимация для движения уха хомяка вверх и вниз.
Made in HTML/CSS
👍4🔥1
Проект 15: хомяк в колесе
CSS - 7 часть
Подробнее:
.wheel-frame: Задает относительное позиционирование, размеры, фоновое изображение и отступы для контейнера колеса.
.wheel: Задает размеры, flex-контейнер, выравнивание элементов и поворот для колеса.
.wheel.spinning: Задает анимацию вращения для колеса.
.wheel.spinning .hamster: Отключает анимацию для хомяка, когда колесо вращается.
.wheel-support: Задает фоновое изображение, анимацию вращения, размеры и позиционирование для поддержки колеса.
@keyframes spin: Анимация для вращения колеса.
Made in HTML/CSS
CSS - 7 часть
Подробнее:
.wheel-frame: Задает относительное позиционирование, размеры, фоновое изображение и отступы для контейнера колеса.
.wheel: Задает размеры, flex-контейнер, выравнивание элементов и поворот для колеса.
.wheel.spinning: Задает анимацию вращения для колеса.
.wheel.spinning .hamster: Отключает анимацию для хомяка, когда колесо вращается.
.wheel-support: Задает фоновое изображение, анимацию вращения, размеры и позиционирование для поддержки колеса.
@keyframes spin: Анимация для вращения колеса.
Made in HTML/CSS
👍5
Проект 15: хомяк в колесе
CSS - 8 часть
Подробнее:
.sign: Задает фиксированное позиционирование, шрифт, цвет, отступы и размер текста для подписи.
a: Задает цвет и отключает подчеркивание для ссылки.
a:hover: Задает подчеркивание при наведении на ссылку.
Made in HTML/CSS
CSS - 8 часть
Подробнее:
.sign: Задает фиксированное позиционирование, шрифт, цвет, отступы и размер текста для подписи.
a: Задает цвет и отключает подчеркивание для ссылки.
a:hover: Задает подчеркивание при наведении на ссылку.
Made in HTML/CSS
👍5