🔧 Как сверстать переключатель (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 #разработка

🚀 Как залить свой статичный сайт на GitHub Pages?
Если у вас есть готовый HTML/CSS сайт и вы хотите быстро опубликовать его в интернете бесплатно, GitHub Pages — отличный вариант. Вот простой гайд для новичков:

✅ Шаг 1: Создайте репозиторий
1. Зарегистрируйся на GitHub (если у вас нет аккаунта).
2. Нажми New Repository и задайте имя (например, my-website).
3. Сделайте репозиторий публичным и нажмите Create Repository.

✅ Шаг 2: Добавьте файлы проекта
1. Если у вас нет Git, скачайте и установите Git.
2. Откройте терминал и выполните команды:

git clone https://github.com/ВАШ_ЛОГИН/my-website.git

3. Перенесите файлы своего сайта (HTML, CSS, JS) в эту папку.

git add .
git commit -m "Первый коммит"
git push origin main

✅ Шаг 3: Включите GitHub Pages
1. Зайдите в свой репозиторий на GitHub.
2. Перейдите во вкладку Settings → Pages.
3. В разделе Branch выберите main и нажмите Save.
4. Через пару минут ваш сайт будет доступен по ссылке: https://ВАШ_ЛОГИН.github.io/my-website/

Готово! 🎉

CSS Scroll-Driven Animations — привязываем анимации к скроллу без JavaScript 🌀

Scroll-driven animations — это новая возможность CSS, которая позволяет анимировать элементы, синхронизируясь с прокруткой страницы. Больше не нужно использовать JavaScript, чтобы «подогнать» поведение элементов под скролл — теперь всё можно сделать нативно и эффективно.

Как это работает?
В основе лежит новая директива @scroll-timeline, которая создаёт временную шкалу, привязанную к скроллу. Затем вы можете привязать CSS-анимацию к этой шкале через свойство animation-timeline.

Пример: вы можете сделать так, чтобы элемент плавно появлялся или трансформировался, пока пользователь прокручивает страницу. Живой пример

Где это применимо?
– Появление секций при прокрутке
– Параллакс-эффекты
– Анимация прогресса
– Заголовки, которые "едут" со скроллом
– Любая визуальная динамика, связанная с прокруткой

⚠️ Поддержка пока ограничена: работает в последних версиях Chromium-браузеров (Chrome, Edge). Firefox и Safari — на подходе.

CSS Subgrid — Делаем вложенные гриды без боли 💡

Если вы когда-либо пытались синхронизировать строки в вложенных CSS Grid-контейнерах — вы знаете, насколько это неудобно. Subgrid решает эту проблему, позволяя дочерним элементам использовать строки или колонки родительского грида.

Что это значит?
С subgrid вложенные элементы больше не живут своей «гридовой жизнью» — они могут наследовать сетку родителя. Это упрощает выравнивание и делает дизайн гибче, особенно когда речь идёт о сложных компонентах, карточках, списках и лейаутах с текстом.

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

Преимущества
– Синхронное выравнивание заголовков и текста
– Чёткая иерархия без хаоса
– Идеально для карточек, таблиц, списков
– Без хаков и дополнительного кода

📌 Subgrid стабильно работает во всех современных браузерах с сентября 2023 года

Плавные переходы между страницами в CSS? Теперь это возможно! 🚀

С появлением нового свойства @view-transition CSS выходит на новый уровень. Теперь можно создавать нативные анимации при переходе между страницами — без костылей и JS-фреймворков.

🧩 Что это такое?
@view-transition — это часть View Transitions API, которая позволяет браузеру автоматически анимировать изменение DOM при навигации между страницами.

💡 Как использовать?
Достаточно добавить:

@view-transition {
  navigation: auto;
}

И браузер сам обработает переход между страницами, создавая плавную анимацию (например, эффект растворения контента). Работает на уровне истории браузера — window.location, <a href>, history.pushState().

✅ Поддержка
Chrome/Edge/Opera (на базе Chromium): Полная поддержка с версий 115+ (включая кросс-документные переходы). Safari 16+ - может работать не стабильно.

Подходит как прогрессивное улучшение, можно уже использовать.

🔍 Как сверстать input для поиска?
Поиск — это чаще всего комбинация поля ввода (input) и кнопки (button), которые оформляются под нужды дизайна.

🧩 Главное — адаптивность. Жестко задавать ширину полю ввода — плохая практика. Лучше контролировать ширину через родительский блок и гибкие стили.

✅ Структура:
Оборачиваем всё в тег label.input-search, внутри — input.input-search__field и button.input-search__button

Для демонстрации ширины компонента — оборачиваем label в контейнер div.container-control. Это родительский блок, который может иметь свою ширину, быть частью сетки (Grid, Flex) и влиять на поведение компонента.

💡 CSS:

.input-search {
  display: inline-flex;
  max-width: 100%;
  width: 100%;
  position: relative;
}

input-search__field растягивается на всю доступную ширину родителя.
input-search__button выравнивается внутри input-search.

Всё адаптивно, без фиксированной ширины и жёстких ограничений — работает в любых условиях макета.

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

🤖 Какие AI инструменты помогут в разработке?

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

- ChatGPT / DeepSeek — помощники в рутинных задачах
Эти инструменты могут значительно ускорить выполнение повседневных задач:

- Генерация названий переменных по HEX-кодам:
Пример: #E6CE99 → soft-beige, #3B4D40 → forest-green

- Создание CSS-структур и компонентов
- Объяснение сложных регулярных выражений
- Помощь в адаптивной верстке и медиазапросах и многое другое

🔗 chat.openai.com
🔗 deepseek.com

- Icons8 BG Remover — удаление фона с изображений
AI-сервис для быстрой обработки изображений, позволяющий удалять фон за считанные секунды. Подходит для создания аватарок, мокапов и UI-заготовок. Бесплатные кредиты доступны.

🔗 icons8.ru/bgremover

Удобство и доступность: как правильно верстать элементы интерфейса

Интерфейс — это не просто визуал. Это взаимодействие. А значит, каждый элемент на сайте должен быть удобным и доступным для пользователя.

✔️ Кликабельная область — больше, чем текст
Частая ошибка — делать кликабельной только надпись, забывая о всей кнопке. Представьте меню в шапке сайта: визуально пункт большой, с отступами, но клик работает только по буквам. Это неудобно, особенно на мобильных. Правильно — растянуть зону клика на всю кнопку или блок.

❌ Попап должен легко закрываться
Хорошая практика — закрытие по клику на фон. Не все пользователи попадают в крестик, особенно на смартфонах. Полупрозрачный фон — идеальное место для этого действия. Не забывайте и про клавишу Esc.

📏 Размер и расстояние
Минимальная удобная зона для касания — минимум 44×44 px, особенно на сенсорных экранах. Кнопки, иконки, чекбоксы — всё должно быть удобно нажимать.

⌨️ Фокус и табуляция
Проверьте навигацию с клавиатуры: фокус должен переходить логично, без пропусков. Это важно не только для доступности, но и для UX в целом.

🔄 Обратная связь
Каждое действие должно вызывать реакцию — наведение, нажатие, загрузка. Это создаёт ощущение контроля у пользователя.

Не забывайте — вы верстаете не только “для себя”, но и для людей с разными устройствами, зрением и привычками. Дизайн — это про заботу.

#верстка #ux #интерфейс #доступность #ui

Чем удобно свойство 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 #лайфхак