Проект 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
Свойство inset в CSS — это короткая замена для top, right, bottom и left. Оно позволяет быстро задать отступы элемента от всех сторон контейнера одним значением.
Однако не забывайте, что inset – это логическое свойство, оно учитывает направление письма. То есть если на вашем сайте используется язык с направлением rtl, то лево окажется справа и наоборот.
Made in HTML/CSS
Представьте, что вы расставляете мебель в комнате: вместо того чтобы говорить "отодвинь диван на 10 см от каждой стены", вы просто говорите "отодвинь диван на 10 см от всех стен". Вот так работает inset! 😊
Однако не забывайте, что inset – это логическое свойство, оно учитывает направление письма. То есть если на вашем сайте используется язык с направлением rtl, то лево окажется справа и наоборот.
Made in HTML/CSS
🔥4👍3👨💻1
Вопрос, который поставит в ступор даже опытного фронтендера🫣
Этот хороший вопрос мне задал один программист из Болгарии🇧🇬. На первый взгляд, он довольно очевиден, но не все так просто.
Ответ на этот вопрос:
Made in HTML/CSS
Этот хороший вопрос мне задал один программист из Болгарии🇧🇬. На первый взгляд, он довольно очевиден, но не все так просто.
Ответ на этот вопрос:
Да, если мы поставим элементу position со значением absolute и добавим смещение top: 20px, то скорее всего он окажется в 20px от верха окна браузера. Однако это будет в случае, если все его родительские элементы находятся в позиции static. То есть перед этим элемент посмотрит, есть ли у него родитель с другой позицией, далее рассмотрится родитель родителя и тд, пока не найдется родитель с позицией отличной он static.
Made in HTML/CSS
👍5🔥2👨💻1
Анимация спиннер загрузки через CSS🌀
Креативный способ анимировать загрузку с изменением цветов на каждом цикле оборота🔄
Svgшка круга
Made in HTML/CSS
Креативный способ анимировать загрузку с изменением цветов на каждом цикле оборота🔄
Svgшка круга
<noscript
class="spinner"
width="65px"
height="65px"
viewBox="0 0 66 66"
xmlns="http://www.w3.org/2000/noscript"
>
<circle
class="path"
fill="none"
stroke-width="6"
stroke-linecap="round"
cx="33"
cy="33"
r="30"
></circle>
</noscript>
Made in HTML/CSS
🔥8👍1👨💻1