Проект 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
Проект 15: хомяк в колесе
JS - 1 часть
Подробнее:
wrapper: Получает элемент с классом .wrapper.
wheel: Получает элемент с классом .wheel.
defaultHamsterEnergy: Задает начальную энергию хомяка.
hamster: Объект, содержащий состояние хомяка (энергия, коэффициент скорости, флаг бега).
Made in HTML/CSS
JS - 1 часть
Подробнее:
wrapper: Получает элемент с классом .wrapper.
wheel: Получает элемент с классом .wheel.
defaultHamsterEnergy: Задает начальную энергию хомяка.
hamster: Объект, содержащий состояние хомяка (энергия, коэффициент скорости, флаг бега).
Made in HTML/CSS
🔥5
Проект 15: хомяк в колесе
JS - 2 часть
Подробнее:
setSpeed: Функция для установки скорости хомяка и колеса на основе коэффициента скорости. Она обновляет CSS-переменные --hamster-speed, --wheel-speed и --wheel-angle.
document.querySelector('input').addEventListener('input', e => { ... }): Обработчик события input для ползунка, который обновляет коэффициент скорости хомяка и вызывает функцию setSpeed для обновления скорости.
Made in HTML/CSS
JS - 2 часть
Подробнее:
setSpeed: Функция для установки скорости хомяка и колеса на основе коэффициента скорости. Она обновляет CSS-переменные --hamster-speed, --wheel-speed и --wheel-angle.
document.querySelector('input').addEventListener('input', e => { ... }): Обработчик события input для ползунка, который обновляет коэффициент скорости хомяка и вызывает функцию setSpeed для обновления скорости.
Made in HTML/CSS
🔥6
Проект 15: хомяк в колесе
JS - 3 часть
Подробнее:
setInterval(() => { ... }, 500): Интервал, который обновляет энергию хомяка и управляет анимацией колеса.
Если хомяк бежит, его энергия уменьшается.
Если энергия хомяка становится отрицательной, он перестает бежать, колесо начинает вращаться, а через 6 секунд хомяк восстанавливает энергию и начинает бежать снова.
setSpeed(): Вызывает функцию setSpeed для установки начальной скорости хомяка и колеса.
window.addEventListener('DOMContentLoaded', init): Добавляет обработчик события DOMContentLoaded, который вызывает функцию init при загрузке DOM.
Made in HTML/CSS
JS - 3 часть
Подробнее:
setInterval(() => { ... }, 500): Интервал, который обновляет энергию хомяка и управляет анимацией колеса.
Если хомяк бежит, его энергия уменьшается.
Если энергия хомяка становится отрицательной, он перестает бежать, колесо начинает вращаться, а через 6 секунд хомяк восстанавливает энергию и начинает бежать снова.
setSpeed(): Вызывает функцию setSpeed для установки начальной скорости хомяка и колеса.
window.addEventListener('DOMContentLoaded', init): Добавляет обработчик события DOMContentLoaded, который вызывает функцию init при загрузке DOM.
Made in HTML/CSS
🔥6
Что такое SCSS (часть 1)
SCSS — "диалект" языка SASS. А что такое SASS? SASS это язык похожий на HAML (весьма лаконичный шаблонизатор), но предназначенный для упрощения создания CSS-кода.
Отличие SCSS от SASS заключается в том, что SCSS больше похож на обычный CSS код.
Made in HTML/CSS
SCSS — "диалект" языка SASS. А что такое SASS? SASS это язык похожий на HAML (весьма лаконичный шаблонизатор), но предназначенный для упрощения создания CSS-кода.
Проще говоря, SASS это такой язык, код которого специальной ruby-программой транслируется в обычный CSS код. Синтаксис этого языка очень гибок, он учитывает множество мелочей, которые так желанны в CSS. Более того, в нём есть даже логика (@if, each), математика (можно складывать как числа, строки, так и цвета). Возможно, некоторые возможности SCSS покажутся вам избыточными, но, на мой взгляд, лишними они не будут, останутся "про запас".
Отличие SCSS от SASS заключается в том, что SCSS больше похож на обычный CSS код.
Made in HTML/CSS
🔥7
Основные особенности SCSS
1. Вложенность:
- SCSS позволяет использовать вложенные селекторы, чтобы сделать код более читаемым и иерархическим.
2. Переменные:
- Вы можете объявлять переменные для хранения значений, таких как цвета, размеры и другие свойства, что облегчает масштабируемость.
Made in HTML/CSS
1. Вложенность:
- SCSS позволяет использовать вложенные селекторы, чтобы сделать код более читаемым и иерархическим.
2. Переменные:
- Вы можете объявлять переменные для хранения значений, таких как цвета, размеры и другие свойства, что облегчает масштабируемость.
Made in HTML/CSS
👍5🔥1
Основные особенности SCSS:
3. Миксины:
- Миксины позволяют вам создавать повторно используемые блоки кода, которые можно вставить в другие селекторы.
4. Наследование:
- SCSS поддерживает наследование стилей с помощью директивы @extend, что позволяет избежать дублирования кода.
Made in HTML/CSS
3. Миксины:
- Миксины позволяют вам создавать повторно используемые блоки кода, которые можно вставить в другие селекторы.
4. Наследование:
- SCSS поддерживает наследование стилей с помощью директивы @extend, что позволяет избежать дублирования кода.
Made in HTML/CSS
🔥5