Проект 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
Основные особенности SCSS
5. Функции и математические операции:
- SCSS поддерживает операции с числами и фильтрацию значений через встроенные функции.
6. Файловая структура и импорт:
- SCSS позволяет разбивать код на множество файлов и импортировать их при помощи @import, облегчая организацию проекта.
Made in HTML/CSS
5. Функции и математические операции:
- SCSS поддерживает операции с числами и фильтрацию значений через встроенные функции.
6. Файловая структура и импорт:
- SCSS позволяет разбивать код на множество файлов и импортировать их при помощи @import, облегчая организацию проекта.
Made in HTML/CSS
👍3🔥1
Итог:
SCSS значительно облегчает написание и поддержку стилей, особенно в крупных проектах.
Он позволяет создавать более структурированный и организованный код, что делает разработку удобнее и эффективнее.
SCSS значительно облегчает написание и поддержку стилей, особенно в крупных проектах.
Он позволяет создавать более структурированный и организованный код, что делает разработку удобнее и эффективнее.
Его возможности, такие как переменные, миксины и наследование, позволяют разработчикам повторно использовать код и поддерживать стили более гибко.
👍4🔥1
Проект 16: кнопка с анимацией
HTML
Подробнее:
- Основной контейнер, который центрирует содержимое.
- Кнопка, которая активирует анимацию при нажатии.
- Элемент тени, который создает эффект тени под кнопкой.
Made in HTML/CSS
HTML
Подробнее:
- Основной контейнер, который центрирует содержимое.
- Кнопка, которая активирует анимацию при нажатии.
- Элемент тени, который создает эффект тени под кнопкой.
Made in HTML/CSS
🔥6
Проект 16: кнопка с анимацией
SCSS - 1 часть
Подробнее:
body: Определяет стили для тела страницы, включая центрирование содержимого и градиентный фон.
.content: Определяет высоту контейнера.
.jump: Определяет относительное позиционирование для кнопки.
.moveAndRotate: Применяет анимацию moveAndRotate к кнопке, когда она получает класс moveAndRotate.
Made in HTML/CSS
SCSS - 1 часть
Подробнее:
body: Определяет стили для тела страницы, включая центрирование содержимого и градиентный фон.
.content: Определяет высоту контейнера.
.jump: Определяет относительное позиционирование для кнопки.
.moveAndRotate: Применяет анимацию moveAndRotate к кнопке, когда она получает класс moveAndRotate.
Made in HTML/CSS
🔥7
Проект 16: кнопка с анимацией
SCSS - 2 часть
Подробнее:
@keyframes moveAndRotate: Определяет анимацию, которая включает перемещение, вращение и масштабирование кнопки.
0%: Начальное состояние кнопки.
50%: Кнопка перемещается вверх на 30px.
75%: Кнопка вращается на 720 градусов и увеличивается в два раза.
100%: Кнопка возвращается в исходное положение, но остается повернутой на 720 градусов.
Made in HTML/CSS
SCSS - 2 часть
Подробнее:
@keyframes moveAndRotate: Определяет анимацию, которая включает перемещение, вращение и масштабирование кнопки.
0%: Начальное состояние кнопки.
50%: Кнопка перемещается вверх на 30px.
75%: Кнопка вращается на 720 градусов и увеличивается в два раза.
100%: Кнопка возвращается в исходное положение, но остается повернутой на 720 градусов.
Made in HTML/CSS
👍5🔥2
Проект 16: кнопка с анимацией
SCSS - 3 часть
Подробнее:
.shadow: Определяет стили для элемента тени.
width и height: Размеры тени.
background-color: Цвет тени с прозрачностью.
border-radius: Закругление углов тени.
position: Абсолютное позиционирование.
bottom и left: Позиционирование тени относительно контейнера.
transform: Центрирование тени по горизонтали.
filter: Размытие тени для создания эффекта мягкой тени.
Made in HTML/CSS
SCSS - 3 часть
Подробнее:
.shadow: Определяет стили для элемента тени.
width и height: Размеры тени.
background-color: Цвет тени с прозрачностью.
border-radius: Закругление углов тени.
position: Абсолютное позиционирование.
bottom и left: Позиционирование тени относительно контейнера.
transform: Центрирование тени по горизонтали.
filter: Размытие тени для создания эффекта мягкой тени.
Made in HTML/CSS
👍5
Проект 17: прикольный переключатель
HTML
Подробнее:
<div class="toggle">: Основной контейнер для переключателя.
<input type="checkbox" id="btn" checked>: Скрытый чекбокс, который используется для управления состоянием переключателя.
<label for="btn">: Метка, связанная с чекбоксом, которая визуально представляет переключатель.
<span class="ball off"></span>: Элемент, представляющий шарик в выключенном состоянии.
<span class="ball on"></span>: Элемент, представляющий шарик в включенном состоянии.
<div class="bar"></div>: Элемент, представляющий полосу переключателя.
Made in HTML/CSS
HTML
Подробнее:
<div class="toggle">: Основной контейнер для переключателя.
<input type="checkbox" id="btn" checked>: Скрытый чекбокс, который используется для управления состоянием переключателя.
<label for="btn">: Метка, связанная с чекбоксом, которая визуально представляет переключатель.
<span class="ball off"></span>: Элемент, представляющий шарик в выключенном состоянии.
<span class="ball on"></span>: Элемент, представляющий шарик в включенном состоянии.
<div class="bar"></div>: Элемент, представляющий полосу переключателя.
Made in HTML/CSS
🔥5
Проект 17: прикольный переключатель
CSS - 1 часть
Подробнее:
:root: Определение CSS-переменных для управления размерами, цветами и анимациями.
*: Применение общих стилей ко всем элементам, включая box-sizing и переходы.
body: Стилизация body для центрирования содержимого и установки фонового градиента.
Made in HTML/CSS
CSS - 1 часть
Подробнее:
:root: Определение CSS-переменных для управления размерами, цветами и анимациями.
*: Применение общих стилей ко всем элементам, включая box-sizing и переходы.
body: Стилизация body для центрирования содержимого и установки фонового градиента.
Made in HTML/CSS
👍6
Проект 17: прикольный переключатель
CSS - 2 часть
Подробнее:
.toggle: Основной контейнер для переключателя с заданными размерами и центрированием содержимого.
input: Скрытие чекбокса, так как он управляется через лейбл.
label[for=btn]: Стилизация лейбла, который представляет собой фон переключателя с градиентом, тенями и скругленными углами.
Made in HTML/CSS
CSS - 2 часть
Подробнее:
.toggle: Основной контейнер для переключателя с заданными размерами и центрированием содержимого.
input: Скрытие чекбокса, так как он управляется через лейбл.
label[for=btn]: Стилизация лейбла, который представляет собой фон переключателя с градиентом, тенями и скругленными углами.
Made in HTML/CSS
👍3🔥2
Проект 17: прикольный переключатель
CSS - 3 часть
Подробнее:
label:after: Псевдоэлемент, создающий дополнительный визуальный эффект (например, тень или отражение).
Made in HTML/CSS
CSS - 3 часть
Подробнее:
label:after: Псевдоэлемент, создающий дополнительный визуальный эффект (например, тень или отражение).
Made in HTML/CSS
👍6
Проект 17: прикольный переключатель
CSS - 4 часть
Подробнее:
.ball: Стилизация шарика переключателя с градиентами, тенями и скругленными углами.
Made in HTML/CSS
CSS - 4 часть
Подробнее:
.ball: Стилизация шарика переключателя с градиентами, тенями и скругленными углами.
Made in HTML/CSS
🔥7
Проект 17: прикольный переключатель
CSS - 5 часть
Подробнее:
.ball.off: Стилизация шарика в выключенном состоянии.
#btn:checked + label: Изменение цвета фона переключателя при активации чекбокса.
#btn:checked + label .ball.off:hover: Стилизация шарика в выключенном состоянии при наведении.
Made in HTML/CSS
CSS - 5 часть
Подробнее:
.ball.off: Стилизация шарика в выключенном состоянии.
#btn:checked + label: Изменение цвета фона переключателя при активации чекбокса.
#btn:checked + label .ball.off:hover: Стилизация шарика в выключенном состоянии при наведении.
Made in HTML/CSS
🔥6👨💻1
Проект 17: прикольный переключатель
CSS - 6 часть
Подробнее:
#btn:checked + label .ball.off:hover: Стилизация шарика в выключенном состоянии при наведении.
#btn:checked + label .ball.off: Стилизация шарика в выключенном состоянии при активации чекбокса.
Made in HTML/CSS
CSS - 6 часть
Подробнее:
#btn:checked + label .ball.off:hover: Стилизация шарика в выключенном состоянии при наведении.
#btn:checked + label .ball.off: Стилизация шарика в выключенном состоянии при активации чекбокса.
Made in HTML/CSS
👍4🔥2