🔎 Полезный плагин для Figma: Inspect Styles 🎨

Если вам нужно быстро узнать параметры стилей в Figma, попробуйте Inspect Styles! Этот плагин позволяет мгновенно просматривать размеры, цвета, шрифты, отступы и другие свойства элементов.

Установить плагин по ссылке.

✨ Что умеет плагин?
✅ Показывает все CSS-стили элемента в удобном формате
✅ Подсвечивает цвета, шрифты и отступы
✅ Помогает быстрее переносить дизайн в код

Идеальный инструмент для разработчиков и дизайнеров, которые хотят сэкономить время! 🚀

📌 Установить плагин: Inspect Styles в Figma

#figma #плагины #frontend #инструменты #верстка #лайфхак #советы

🔧 Как изменить scrollbar с помощью CSS? 🎨

Хотите кастомизировать скроллбар и сделать его более стильным? Вот готовый CSS-код, который работает во всех браузерах, кроме Firefox (в нем эти стили не применяются).

📌 Основные стили:
✅ ::-webkit-scrollbar — задает размеры скроллбара
✅ ::-webkit-scrollbar-track — отвечает за фон полосы прокрутки
✅ ::-webkit-scrollbar-thumb — изменяет внешний вид ползунка

💡 Пример кода:

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #CBCBCB;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #BABABA;
}

::-webkit-scrollbar-thumb:active {
  background-color: #A9A9A9;
}

Теперь ваш скроллбар будет выглядеть красиво во всех браузерах! 🔥

#css #scrollbar #frontend

📏Почему так важно переходить с px на rem в CSS?

Многие разработчики привыкли задавать размеры в px, но rem — более гибкий и удобный вариант. Давайте разберемся, почему.

🤔 Что такое rem?
rem — это единица измерения, которая зависит от размера шрифта корневого элемента (html). По умолчанию браузеры устанавливают font-size: 16px, значит:

1rem = 16px
2rem = 32px
0.5rem = 8px

🧐 Почему rem лучше px?

Доступность 👐
Некоторые пользователи увеличивают размер шрифта в браузере для удобства чтения. Если вы используете px, то ваш сайт может "сломаться" или стать неудобным для таких пользователей. А rem автоматически подстроится под их настройки!

Масштабируемость 🔍
Если вы вдруг решите изменить базовый размер шрифта на сайте, то все элементы, заданные через rem, автоматически пересчитаются. С px придется переписывать каждый элемент вручную.

Единая система измерений 📏
Использование rem делает ваш код более предсказуемым и удобным для поддержки. Все размеры будут привязаны к одной базовой величине, что упростит работу с проектом.

💡 Как перейти на rem?
- Ручной расчет — просто делите px на 16.
- Плагины для VS Code или любой сайт конвертор из px в rem.
- Использовать SCSS-миксин (миксины на rem бывают разные) — удобный способ, чтобы не считать вручную:

$size: 16; 

@function rem($value) { 
$remValue: calc($value / 16) + rem; 
@return $remValue; 
}

После установки миксина, использовать так, например, padding: 10px; пишем padding: rem(10);

🎯 Итог
Переход на rem — это не только про тренды, но и про заботу о пользователях и удобство разработки. Начните с малого: попробуйте использовать rem для шрифтов, а потом постепенно переходите на все элементы. Ваш код станет гибче, а пользователи — счастливее! 😊

#frontend #CSS #верстка #webdevelopment #вебразработка #rem #px

🔧 Как сверстать переключатель (toggle switch) в CSS?
Переключатель — это удобный UI-элемент, который позволяет пользователю включать или отключать опцию. Давай разберем, как его создать с нуля!

📌 HTML-структура
Создаем label, внутри которого будет скрытый input (чекбокс) и стилизованный div, который будет играть роль переключателя.

<label class="switch">
  <input type="checkbox">
  <div class="switch-slider"></div>
</label>

🎨 CSS-стили

1️⃣ Базовый контейнер (.switch)
Отображаем label как inline-flex, чтобы удобно управлять размерами и сделать переключатель кликабельным.

2️⃣ Скрываем чекбокс (.switch input)
Стандартный чекбокс нам не нужен, поэтому скрываем его через display: none;.

3️⃣ Фон переключателя (.switch-slider)
- Задаем ширину 60px, высоту 30px, закругляем углы.
- Добавляем transition, чтобы анимация переключения была плавной.
- При hover цвет немного затемняется.

4️⃣ Ползунок (::before)
- Абсолютно позиционируем его внутри switch-slider.
- Делаем 24px в диаметре, белый круг.
- По умолчанию располагаем его слева (отступ 4px).

5️⃣ Стилизация активного состояния (input:checked)
- Меняем цвет фона (background-color: #18A0FB).
- Двигаем круг вправо (transform: translateX(28px);).

.switch {
    display: inline-flex;
    cursor: pointer;
}

.switch input {
    display: none;
}

.switch-slider {
    flex-shrink: 0;
    position: relative;
    width: 60px;
    height: 30px;
    background-color: #e6e6e6;
    border-radius: 16px;
    transition: 0.2s;
}

.switch-slider:hover {
    background-color: #d6d6d6;
}

.switch-slider::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 4px;
    bottom: 0;
    z-index: 2;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    margin: auto;
    background-color: #fff;
    transition: 0.2s;
}

.switch input:checked + .switch-slider {
    background-color: #18A0FB;
}

.switch input:checked + .switch-slider:hover {
    background-color: #907CFF;
}

.switch input:checked + .switch-slider::before {
    transform: translateX(28px);
}

Теперь у нас есть красивый и плавный переключатель, который легко использовать в любом проекте! 🚀

💡 Посмотреть живой пример на CodePen:
👉 CodePen – Переключатель 🚀

#переключатель #css #frontend #html #вебразработка #верстка #ui #ux #codepen #toggle #webdevelopment #switch

✅ Как сверстать чекбокс?

Создаем кастомный чекбокс с гибкой версткой! Стандартный <input type="checkbox"> плохо стилизуется, поэтому используем label, скрываем input и оформляем кастомный checkbox__checkmark.

🔹 HTML

<label class="checkbox">
    <input type="checkbox">
    <div class="checkbox__checkmark"></div>
    <span class="checkbox__title">👉 Текст чекбокса. С возможностью безопасного переноса.</span>
</label>

📌 input остается интерактивным, но скрытым.

🔹 CSS

.checkbox {
    display: inline-flex;
    padding-top: 4px;
    padding-left: 38px;
    min-height: 28px;
    cursor: pointer;
    font-family: sans-serif;
    font-size: 18px;
    color: #1b1b1b;
    user-select: none;
    position: relative;
}

.checkbox input {
    position: absolute;
    opacity: 0;
}

.checkbox__checkmark {
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background: #f5f5f5;
    border-radius: 8px;
    border: 2px solid #d0d0d0;
    transition: 0.2s;
}

.checkbox__checkmark::after {
    content: "";
    position: absolute;
    opacity: 0;
    left: 8px;
    width: 7px;
    height: 16px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(42deg);
    transition: 0.2s;
}

.checkbox input:checked ~ .checkbox__checkmark {
    background: #18A0FB;
    border-color: #0f88d8;
}

.checkbox input:checked ~ .checkbox__checkmark:after {
    opacity: 1;
}

🛠️ Как это работает?
✔️ input скрыт, но остается интерактивным.
✔️ checkbox__checkmark – кастомная галочка.
✔️ При checked, фон чекбокса меняется и появляется ::after с галочкой.

💡 Пример на CodePen:
🔗 Живой пример

#чекбокс #css #frontend #html #вебразработка #верстка #ui #ux #codepen #webdevelopment #checkbox

🔘 Как сверстать кнопку?

Создадим стильную, адаптивную и безопасную кнопку с возможностью добавления иконок!

📌 HTML

<button class="button">
    <span>Кнопка</span>
</button>

📌 Текст оборачиваем в <span> — это защитит его от смещения при добавлении иконки.

🎨 CSS

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Отступ между текстом и иконкой */
    padding: 12px 22px;
    font-family: sans-serif;
    font-size: 18px;
    line-height: 120%;
    letter-spacing: 0.03em;
    font-weight: 400;
    color: #fff;
    cursor: pointer;
    user-select: none;
    background-color: #29be53;
    border: none;
    border-radius: 12px;
    transition: 0.2s;
}

.button svg {
    flex-shrink: 0; /* Иконка не сжимается */
    width: 18px;
    height: 18px;
}

.button:hover {
    background-color: #167832;
}

.button:active {
    background-color: #0f5623;
}

🛠️ Как это работает?
✔️ inline-flex позволяет выровнять контент внутри кнопки.
✔️ gap — автоматически регулирует отступы, независимо от наличия иконки.
✔️ flex-shrink: 0 для SVG защищает иконку от деформации.
✔️ transition создаёт плавные эффекты при наведении и нажатии.

🖼 Добавляем иконку

<button class="button">
    <svg>...</svg>
    <span>Кнопка</span>
</button>

📌 Иконку можно разместить слева или справа без изменения отступов!

💡 Пример на CodePen:
🔗 Живой пример

#frontend #верстка #html #css #кнопка #button #разработка

Чем удобно свойство CSS display: contents?

Иногда при верстке нужно, чтобы HTML-элемент не влиял на визуальную структуру, но сохранил вложенность и доступность для стилей, скриптов или семантики. В таких случаях полезно свойство display: contents.

🧩 Что оно делает?
При display: contents сам элемент пропадает из визуального потока, но его дети остаются на месте и продолжают вести себя, как будто они сразу находятся на уровне выше. Это удобно, когда, например:

вы хотите использовать обёртку для логики, но не хотите, чтобы она ломала стили;

вы используете семантические теги (например, section или article) внутри грида или флекса, но не хотите, чтобы они мешали макету.

📌 Пример:

<div class="grid">
  <section style="display: contents">
    <div>Блок 1</div>
    <div>Блок 2</div>
  </section>
</div>

В этом случае section не будет участвовать в grid-разметке, а div-блоки распределятся по сетке как обычные элементы.

⚠️ Важно знать:

События ::before и ::after не работают на элементе с display: contents;

Некоторые браузеры (особенно старые) могут вести себя нестабильно;

Элемент удаляется только визуально, не из DOM — структура остается.

display: contents — мощный инструмент, когда нужно сохранить семантику, но убрать визуальный контейнер. Используйте с умом!

#css #frontend #верстка #лайфхак

CSS теперь поддерживает вложенность, как в SCSS!

Раньше, чтобы писать вложенные правила, мы использовали препроцессоры вроде SCSS. Теперь такая возможность появилась напрямую в CSS, и это меняет подход к стилям.

👨‍💻 Как это выглядит:

.card {
  padding: 16px;

  &:hover {
    background: #f0f0f0;
  }

  .title {
    font-weight: bold;
  }
}

Такой код теперь можно писать без SCSS — прямо в .css файлах, если используется современный браузер или бандлер с поддержкой CSS Nesting (например, Vite, PostCSS).

✅ Преимущества:

Меньше дублирования классов;

Логичная структура и читаемость;

Больше контроля над стилями в контексте.

⚠️ Поддержка пока не во всех браузерах (например, Safari и Chrome уже поддерживают), поэтому перед использованием важно проверять совместимость.

#css #вложенность #frontend #scss #лайфхак