Проект 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
CSS Peeper — это расширение для браузера, которое позволяет разработчикам быстро и удобно анализировать CSS-стили на веб-страницах. Оно предоставляет информацию о стилях элементов, таких как цвета, шрифты и размеры, прямо в интерфейсе браузера. Расширение упрощает процесс копирования стилей и их применения в других проектах, что делает его полезным инструментом для веб-дизайнеров и разработчиков.
Made in HTML/CSS
Made in HTML/CSS
🔥9
Чтобы скрыть DOM-элемент на веб-странице, вы можете использовать встроенный HTML-атрибут hidden.
Этот атрибут делает элемент невидимым, аналогично стилю display: none, при этом элемент не занимает место на странице.
Важно отметить, что атрибут hidden не удаляет элемент из DOM, он лишь отключает его видимость, что может повлиять на доступность для вспомогательных технологий.
Made in HTML/CSS
Этот атрибут делает элемент невидимым, аналогично стилю display: none, при этом элемент не занимает место на странице.
Однако атрибут hidden не работает с псевдоэлементами, такими как ::before и ::after, поскольку они не являются частью DOM. В таком случае для скрытия псевдоэлементов следует использовать CSS-свойства.
Важно отметить, что атрибут hidden не удаляет элемент из DOM, он лишь отключает его видимость, что может повлиять на доступность для вспомогательных технологий.
Made in HTML/CSS
👍7🔥3👨💻1
CSS ПРЯМО В ТЕГАХ
Tailwind CSS — это прикладной CSS-фреймворк, который позволяет разработчикам создавать пользовательский интерфейс, используя утилиты для стилей вместо создания собственных классов.
Он предоставляет набор классов с низким уровнем абстракции, которые можно комбинировать в HTML-коде для стилизации элементов.
Made in HTML/CSS
Tailwind CSS — это прикладной CSS-фреймворк, который позволяет разработчикам создавать пользовательский интерфейс, используя утилиты для стилей вместо создания собственных классов.
Он предоставляет набор классов с низким уровнем абстракции, которые можно комбинировать в HTML-коде для стилизации элементов.
Made in HTML/CSS
🔥12👍1
В JavaScript для объявления переменных используются ключевые слова var, let и const.
- var: Имеет функциональную область видимости и может быть переназначена в любом месте функции.
- let: Имеет блочную область видимости и может быть переназначена, но не может быть повторно объявлена в той же области.
- const: Также имеет блочную область видимости, но не может быть переназначена после инициализации.
Используйте let для изменяемых переменных и const для констант. var используется реже, в основном для поддержки старого кода.
Made in HTML/CSS
- var: Имеет функциональную область видимости и может быть переназначена в любом месте функции.
- let: Имеет блочную область видимости и может быть переназначена, но не может быть повторно объявлена в той же области.
- const: Также имеет блочную область видимости, но не может быть переназначена после инициализации.
Используйте let для изменяемых переменных и const для констант. var используется реже, в основном для поддержки старого кода.
Made in HTML/CSS
🔥8👍1
Шестнадцатеричный (hex) формат цветов
В этом формате цвета последовательность компонентов цветов определяется в следующем порядке:
Эта последовательность обозначается как
где RR представляет собой значение красного компонента, GG — зеленого, а BB — синего.
Каждый компонент имеет значение в диапазоне от 00 до FF в шестнадцатеричном формате, что соответствует десятичным значениям от 0 до 255. Это означает, что каждый цвет может иметь различные степени яркости в зависимости от приведенных выше значений.
Эта модель RGB (Red, Green, Blue) является основой для большинства цифровых цветов и широко используется в веб-дизайне и графике.
Made in HTML/CSS
В этом формате цвета последовательность компонентов цветов определяется в следующем порядке:
сначала идет красный (Red), затем зеленый (Green) и, наконец, синий (Blue).
Эта последовательность обозначается как
#RRGGBB
где RR представляет собой значение красного компонента, GG — зеленого, а BB — синего.
Каждый компонент имеет значение в диапазоне от 00 до FF в шестнадцатеричном формате, что соответствует десятичным значениям от 0 до 255. Это означает, что каждый цвет может иметь различные степени яркости в зависимости от приведенных выше значений.
Эта модель RGB (Red, Green, Blue) является основой для большинства цифровых цветов и широко используется в веб-дизайне и графике.
Made in HTML/CSS
👍8🔥2