Основные особенности 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
Проект 17: прикольный переключатель
CSS - 7 часть
.ball.on: Стилизация шарика во включенном состоянии.
.ball.on:hover: Стилизация шарика во включенном состоянии при наведении.
#btn:checked + label .ball.on: Стилизация шарика во включенном состоянии при активации чекбокса.
Made in HTML/CSS
CSS - 7 часть
.ball.on: Стилизация шарика во включенном состоянии.
.ball.on:hover: Стилизация шарика во включенном состоянии при наведении.
#btn:checked + label .ball.on: Стилизация шарика во включенном состоянии при активации чекбокса.
Made in HTML/CSS
🔥6
Проект 17: прикольный переключатель
CSS - 8 часть
.bar: Стилизация дополнительного элемента (полоски) с градиентами, тенями и поворотом.
#btn:checked + label + .bar: Изменение угла поворота полоски при активации чекбокса.
Made in HTML/CSS
CSS - 8 часть
.bar: Стилизация дополнительного элемента (полоски) с градиентами, тенями и поворотом.
#btn:checked + label + .bar: Изменение угла поворота полоски при активации чекбокса.
Made in HTML/CSS
🔥5👍1
Атрибут loading позволяет браузеру откладывать загрузку содержимого элементов <img> и <iframe>, находящихся за пределами видимой области страницы, до тех пор, пока пользователь, прокручивая страницу, не окажется достаточно близко к этим элементам.
В этом переводе дается объяснение о том, как один атрибут может уменьшить нагрузку на сайт.
🌐 Читать статью
Made in HTML/CSS
👍5🔥2👨💻1
Кастомные скроллбары (пользовательские полосы прокрутки) позволяют разработчикам изменять внешний вид и поведение стандартных полос прокрутки в веб-приложениях.
Made in HTML/CSS
Это может быть полезно для создания уникального дизайна, улучшения пользовательского опыта или соответствия стилю сайта.
Made in HTML/CSS
👍8🔥4
Prettier — это популярный плагин для автоматического форматирования кода, который поддерживает множество языков программирования. Он помогает разработчикам поддерживать единый стиль кода в проекте, автоматически применяя правила форматирования, такие как отступы, разрывы строк и расположение фигурных скобок.
Made in HTML/CSS
Made in HTML/CSS
🔥8👨💻1
Все, кто хотя бы раз работал с дефолтным выпадающим списком, знают, насколько сложно его стилизовать.
Только создание кастомного выпадающего списка позволяет сделать его действительно красивым.
В этом проекте мы разработали базовый кастомный выпадающий список.
При желании его можно улучшить, добавив, например, стрелку для сворачивания или чекбоксы для выбора нескольких вариантов.
Made in HTML/CSS
👍10🔥6