Проект 12: Анимация взаимодействия со стеком
HTML
Подробнее:
Этот блок создает основной контейнер и внутренний контейнер, а также три секции парка с изображениями, заголовками, описаниями и датами.
Также этот блок создает кнопку "Show All", которая будет использоваться для отображения всех секций парка.
Made in HTML/CSS
HTML
Подробнее:
Этот блок создает основной контейнер и внутренний контейнер, а также три секции парка с изображениями, заголовками, описаниями и датами.
Также этот блок создает кнопку "Show All", которая будет использоваться для отображения всех секций парка.
Made in HTML/CSS
👍6🔥1
Проект 12: Анимация взаимодействия со стеком
CSS - 1 часть
Подробнее:
@import: Импортирует шрифт Poppins из Google Fonts.
body: Задает базовые стили для тела документа, включая отступы, шрифт и фон.
Made in HTML/CSS
CSS - 1 часть
Подробнее:
@import: Импортирует шрифт Poppins из Google Fonts.
body: Задает базовые стили для тела документа, включая отступы, шрифт и фон.
Made in HTML/CSS
👍7🔥2
Проект 12: Анимация взаимодействия со стеком
CSS - 2 часть
Подробнее:
.container: Задает стили для основного контейнера, включая его позиционирование, максимальную ширину, отступы, минимальную высоту и выравнивание.
.inner_container: Задает стили для внутреннего контейнера, включая его позиционирование, максимальную ширину, отступы, скругление углов и модель бокса.
Made in HTML/CSS
CSS - 2 часть
Подробнее:
.container: Задает стили для основного контейнера, включая его позиционирование, максимальную ширину, отступы, минимальную высоту и выравнивание.
.inner_container: Задает стили для внутреннего контейнера, включая его позиционирование, максимальную ширину, отступы, скругление углов и модель бокса.
Made in HTML/CSS
👍5🔥2
Проект 12: Анимация взаимодействия со стеком
CSS - 3 часть
Подробнее:
.park_sec: Задает стили для секций парка, включая их позиционирование, размеры, отступы, границы, скругление углов, модель бокса, выравнивание, анимации и тень.
.park_sec.active: Убирает трансформацию для активных секций.
.park_sec1, .park_sec2, .park_sec3: Задает уникальные стили для каждой секции парка, включая z-index и трансформации.
Made in HTML/CSS
CSS - 3 часть
Подробнее:
.park_sec: Задает стили для секций парка, включая их позиционирование, размеры, отступы, границы, скругление углов, модель бокса, выравнивание, анимации и тень.
.park_sec.active: Убирает трансформацию для активных секций.
.park_sec1, .park_sec2, .park_sec3: Задает уникальные стили для каждой секции парка, включая z-index и трансформации.
Made in HTML/CSS
👍6🔥2
Проект 12: Анимация взаимодействия со стеком
CSS - 4 часть
Подробнее:
.park_inside: Задает стили для внутреннего контейнера секций парка, включая его позиционирование и выравнивание.
.content_sec: Задает стили для контейнера контента, включая его позиционирование и отступы.
.img: Задает стили для изображений, включая их размеры, фон и скругление углов.
.content_sec h2: Задает стили для заголовков, включая их позиционирование, отступы, размер шрифта и жирность.
.content_sec span, .park_sec span: Задает стили для текста, включая их позиционирование, цвет и размер шрифта.
Made in HTML/CSS
CSS - 4 часть
Подробнее:
.park_inside: Задает стили для внутреннего контейнера секций парка, включая его позиционирование и выравнивание.
.content_sec: Задает стили для контейнера контента, включая его позиционирование и отступы.
.img: Задает стили для изображений, включая их размеры, фон и скругление углов.
.content_sec h2: Задает стили для заголовков, включая их позиционирование, отступы, размер шрифта и жирность.
.content_sec span, .park_sec span: Задает стили для текста, включая их позиционирование, цвет и размер шрифта.
Made in HTML/CSS
👍8🔥1👨💻1
Проект 12: Анимация взаимодействия со стеком
CSS - 5 часть
Подробнее:
.btn_grp: Задает стили для контейнера кнопки, включая его позиционирование и выравнивание.
.btn: Задает стили для кнопки, включая её позиционирование, отступы, фон, скругление углов, границы, модель бокса, тень, размер шрифта, жирность и курсор.
.btn::after: Задает стили для псевдоэлемента после кнопки, включая его позиционирование, содержимое, границы, размеры, позицию, трансформацию и анимацию.
.btn.active::after: Изменяет трансформацию и позицию псевдоэлемента для активной кнопки.
Made in HTML/CSS
CSS - 5 часть
Подробнее:
.btn_grp: Задает стили для контейнера кнопки, включая его позиционирование и выравнивание.
.btn: Задает стили для кнопки, включая её позиционирование, отступы, фон, скругление углов, границы, модель бокса, тень, размер шрифта, жирность и курсор.
.btn::after: Задает стили для псевдоэлемента после кнопки, включая его позиционирование, содержимое, границы, размеры, позицию, трансформацию и анимацию.
.btn.active::after: Изменяет трансформацию и позицию псевдоэлемента для активной кнопки.
Made in HTML/CSS
🔥7👍1
Проект 12: Анимация взаимодействия со стеком
JS
Подробнее:
Этот блок JavaScript получает элементы кнопки и секций парка, а также добавляет обработчик события для кнопки, который переключает видимость секций парка при нажатии.
Made in HTML/CSS
JS
Подробнее:
Этот блок JavaScript получает элементы кнопки и секций парка, а также добавляет обработчик события для кнопки, который переключает видимость секций парка при нажатии.
Made in HTML/CSS
🔥5👍2
Проект 13: Элемент с анимацией
HTML - 1 часть
Подробнее:
Ползунки:
durationSlider: Ползунок для управления длительностью анимации. Минимальное значение — 0.25 секунды, максимальное — 16 секунд, шаг — 0.25 секунды. Начальное значение — 3 секунды.
rowColSlider: Ползунок для управления количеством рядов и колонн в паттерне. Минимальное значение — 1, максимальное — 20, шаг — 1. Начальное значение — 8.
Отображение значений:
offsetVal: Элемент для отображения текущего значения ползунка durationSlider. Начальное значение — 3 секунды.
rowColVal: Элемент для отображения текущего значения ползунка rowColSlider. Начальное значение — 8.
Кнопка:
randCol: Кнопка для изменения цвета анимации. При нажатии вызывает функцию colorWheel, которая случайным образом изменяет цвета элементов анимации.
Made in HTML/CSS
HTML - 1 часть
Подробнее:
Ползунки:
durationSlider: Ползунок для управления длительностью анимации. Минимальное значение — 0.25 секунды, максимальное — 16 секунд, шаг — 0.25 секунды. Начальное значение — 3 секунды.
rowColSlider: Ползунок для управления количеством рядов и колонн в паттерне. Минимальное значение — 1, максимальное — 20, шаг — 1. Начальное значение — 8.
Отображение значений:
offsetVal: Элемент для отображения текущего значения ползунка durationSlider. Начальное значение — 3 секунды.
rowColVal: Элемент для отображения текущего значения ползунка rowColSlider. Начальное значение — 8.
Кнопка:
randCol: Кнопка для изменения цвета анимации. При нажатии вызывает функцию colorWheel, которая случайным образом изменяет цвета элементов анимации.
Made in HTML/CSS
🔥7
Проект 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