Список с точками-разделителями на чистом CSS

Если вам нужно сверстать список с разделителями в виде точек, как в старых добрых меню или прайс-листах, то вот вам интересный способ на Flexbox.

Разметка может быть такой:

<ul class="dotted-list">
  <li>
    <span class="number">101</span>
    <span class="dots"></span>
    <span class="text">Пожарная (МЧС)</span>
  </li>
</ul>

Реализация точек:

.dotted-list .dots {
  flex-grow: 1;
  border-bottom: 2px dotted #333;
  height: 1em;
  margin: 0 4px;
  transform: translateY(-1px);
}

Как это работает?

— Flex-контейнер display: flex позволяет легко расположить элементы в строку.
— flex-grow: 1 для элемента с точками заставляет его растягиваться на всё доступное пространство.
— border-bottom: dotted создаёт видимость точек-разделителей.
— transform: translateY тонко настраивает выравнивание точек.

Все довольно просто, но задача решается)

Посмотреть на код можно здесь.

Нестандартное подчёркивание текста на CSS

По умолчанию подчеркивание "разрывается" под определенными буквами (например, "g", "p", "y"). Но иногда по макету нужно сверстать так, чтобы этого разрыва не было.

Так вот, чтобы пофиксить разрыв, достаточно использовать свойство text-decoration-skip-ink: none;

Ну и вдобавок другие свойства для стилизации подчеркивания:

h1 {
  text-decoration: underline; /* Добавляем подчеркивание */
  text-decoration-color: #fac133; /* Задаем цвет линии */
  text-decoration-thickness: 10px; /* Устанавливаем толщину */
  text-decoration-skip-ink: none; /* Отключаем разрывы под буквами */
}

Посмотреть демку можно здесь.

Микро-лайфхак, про который возможно кто-то не знает, но теперь узнает)

Работает — не трогай!⁠⁠

Эффект матового стекла на CSS

Сегодня поговорим о том, как делать крутой эффект матового стекла (glassmorphism), чтоб было прям, как на маке)

Всё волшебство делает свойство backdrop-filter, которое добавляет фильтры к фону элемента.

Пример:

background: rgba(255, 255, 255, 0.2);
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
border: 1px solid rgba(255, 255, 255, 0.3);

А чтобы вы вообще не парились с подбором параметров, можете заюзать этот сервис: https://css.glass/

Я, кстати, оттуда и взял пример)

Видео-шпаргалка: адаптивная верстка на CSS Grid

Нашел наглядный видос по созданию адаптивных блоков на CSS Grid, без медиа-запросов.

Код из видео:

<div class="grid-container">
  <div class="grid-item">1</div>
  <div class="grid-item">2</div>
  <div class="grid-item">3</div>
  <div class="grid-item">4</div>
</div>

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  width: 100%;
}

Еще одна видео-шпора в нашу коллекцию)

Плавающие лейблы для форм

Давайте сегодня разберем, как сделать плавающие лейблы для форм (floating labels).

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

HTML-структура:

<div class="input-group">
  <input type="text" class="input-field" id="name" placeholder=" ">
  <label for="name" class="input-label">Имя</label>
</div>

CSS:

Задаем относительное позиционирование элементов:

.input-group {
  position: relative; 
}

Задаем абсолютное позиционирование метки:

.input-label {
  position: absolute;
  left: 15px;
  top: 15px;
}

Перемещаем метку вверх при фокусе или заполнении поля:

.input-field:focus + .input-label,
.input-field:not(:placeholder-shown) + .input-label {
  top: -10px;
  left: 10px;
}

Демку кода с дополнительными стилями запилил сюда. Так что давайте теперь делать еще более дружелюбные формы)

Стилизация радио-кнопок в виде иконок

Хотите сделать радио-кнопки стильными, модными, молодежными?) Давайте сегодня разберем, как превратить их красивые иконки.

HTML:

<label class="icon-radio">
  <input type="radio" name="delivery" checked>
  <div class="icon-radio-content">
  🚚<span class="icon-radio-label">Курьер</span>
  </div>
</label>

CSS:

Скрываем стандартный input:

.icon-radio input {
  position: absolute;
  opacity: 0;
}

Стилизуем контейнер варианта:

.icon-radio-content {
  border: 2px solid #e0e0e0;
  border-radius: 12px;
  transition: all 0.3s;
}

Выбранный вариант:

input:checked + .icon-radio-content {
  border-color: #4a6bff;
  background: #f5f7ff;
}

Эффекты при наведении:

.icon-radio:hover .icon-radio-content {
  border-color: #b3c1ff;
}

И всё, получаем крутой визуальный вид стандартных радио-кнопок)

Полный код можно посмотреть здесь.

Резиновые шрифты с clamp()

Для тех, устал от медиа-запросов для каждого чиха. Держите лайфхак с clamp().

Помните, как было раньше? Сначала пишешь размер шрифта для мобилок, потом для планшетов, потом для десктопов. А между ними — пара-тройка брейкпоинтов:

h1 {
  font-size: 1.5rem; /* для телефонов */
}

@media (min-width: 768px) {
  h1 {
    font-size: 2rem; /* для планшетов */
  }
}

@media (min-width: 1200px) {
  h1 {
    font-size: 3rem; /* для десктопов */
  }
}

И так с каждым заголовком. Код растёт, а ты седеешь)

Функция clamp() решает эту проблему одной строкой:

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Синтаксис тут максимально простой:

● Первое число — минимальный размер
● Второе — предпочтительный размер (обычно в vw)
● Третье — максимальный размер

Работает это так:

● На смартфоне размер будет 1.5rem (минимум)
● На большом экране будет 3rem (максимум)
● А между ними — плавное изменение без скачков на брейкпоинтах

clamp() экономит наше время и нервы)

Открываешь ссылку в инкогнито, Гугл такой — "он открыл ее в инкогнито, значит это самое интересное, так и запишем..."

Группировка элементов одной строкой CSS

Сегодня поговорим о маленьком, но полезном CSS-трюке для группировки элементов.

Стандартная запись:

header a,
main a,
footer a,
nav a,
.sidebar a {
  color: red;
}

Теперь можно так — чисто и компактно:

:where(header, main, footer, nav, .sidebar) a {
  color: red;
}

Как это работает:
:where() — это псевдокласс, который позволяет группировать селекторы без увеличения специфичности. Т.е. мы говорим браузеру: "найди все ссылки a, которые находятся внутри header, main, footer, nav и .sidebar, и сделай их красными!".

Вы уже пробовали использовать :where() в своих проектах?

:has() для интерактивных карточек с чекбоксами

Хочу показать вам еще одну интересную идею применения селектора :has().

Сделаем интерактивные карточки, которые меняют внешний вид, когда юзер отмечает чекбокс внутри них. Такое раньше делали только с помощью JS, а теперь — парой строчек в CSS.

.card:has(input:checked) {
  background-color: #e3f2fd;
  border-color: #2196f3;
  box-shadow: 0 0 15px rgba(33, 150, 243, 0.3);
  transform: translateY(-5px);
}

Как это работает:

● Селектор :has() ищет родительский элемент (карточку), содержащий определенный дочерний элемент
● input:checked — это условие: отмеченный чекбокс
● Когда чекбокс отмечен, карточка получает:
■ Фоновый цвет #e3f2fd
■ Синюю рамку #2196f3
■ Тень box-shadow
■ Смещение вверх через transform: translateY(-5px)
■ Плавную анимацию благодаря transition: all 0.3s ease

Пример работы можно увидеть на видосе в шапке поста, круто, согласитесь)

Код потестить можно здесь.

Подсказки с :focus-within

Помните, здесь мы обсуждали форму с плавающими лейблами? Давайте добавим в нее новую фичу с :focus-within, которая будет показывать подсказки при фокусе.

Добавим атрибут data-hint с текстом подсказки.

<div class="input-group" data-hint="Введите ваше полное имя">
  <input type="text" class="input-field" id="name" placeholder=" ">
  <label for="name" class="input-label">Имя</label>
</div>

:focus-within срабатывает, когда фокус попадает на элемент или его потомков. Мы используем это, чтобы показать подсказку.

Подсказка у нас — псевдоэлемент ::after, который берёт текст из data-hint.

Когда .input-group получает :focus-within, мы меняем стили: opacity становится 1, и подсказка плавно "всплывает" на место с помощью transform.

.input-group::after {
  content: attr(data-hint);
  position: absolute;
}
.input-group:focus-within::after {
  opacity: 1;
  transform: translateY(0);
}

Все просто и лаконично, а наша форма хорошеет на глазах)

Полный код можно увидеть здесь.

Aspect-ratio в CSS: сохраняем пропорции без лишнего кода

Хотите, чтобы квадрат был квадратом даже при масштабировании?

Свойство aspect-ratio в CSS помогает элементам сохранять заданное соотношение ширины и высоты. Это идеально для адаптивных дизайнов, где нужно, чтобы блоки, изображения или видео не теряли пропорции при изменении размеров.

Давайте сравним два блока:
— Первый — с фиксированной высотой (height: 200px), которая не меняется.
— Второй — использует aspect-ratio: 1 / 1, чтобы оставаться квадратом.

При уменьшении ширины экрана первый блок "сжимается" только по ширине, теряя форму, а второй сохраняет квадратные пропорции.

<div class="card fixed">1</div>
<div class="card aspect-ratio">2</div>

.fixed {
  height: 200px;
}

.aspect-ratio {
  aspect-ratio: 1;
}

Ну и конечно, работать здесь можно не только с квадратами, задавайте любое соотношение сторон для элемента не боясь, что он поплывёт)

Посмотреть полный код можно здесь.

Нативные поповеры в HTML

Помните, как мы годами писали кастомные решения для поповеров? Кучу JS, позиционирование, обработку кликов вне элемента... А потом ещё фиксили баги на мобилках.

Можно выдохнуть) Браузеры наконец-то добавили нативную поддержку поповеров.

Для открытия используем атрибут popovertarget, который ссылается на id поповера. А сам контейнер помечаем атрибутом popover.

<button popovertarget="mypopover">Покажи попап</button>
<div id="mypopover" popover>Контент поповера</div>

Вот и всё. Два атрибута, и работает из коробки. Никакого JS!

И да, стилизация, поповеры — это просто HTML-элементы, так что их можно стилизовать как угодно:

#mypopover {
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  padding: 16px;
  border: none;
  animation: fadeIn 0.2s ease-out;
}

#mypopover::backdrop {
  background: rgba(0,0,0,0.4);
  backdrop-filter: blur(2px);
}

Поддержка по caniuse - 86.83%

Глянуть код можно здесь.

Когда джун получил первый апрув на свой пул-реквест)

Центрирование в CSS: flexbox и margin: auto

Посвящается тем, кто устал постоянно гуглить, как выровнять блок по центру)

Забирайте, пожалуй, самый простой способ выровнять блок по центру родительского блока:

<div class="container">
  <div class="block"></div>
</div>

.container {
  display: flex;
}
.block {
  margin: auto;
}

— display: flex превращает блок в flex-контейнер, активируя flex-контекст для его дочерних элементов.
— margin: auto на дочернем элементе заставляет браузер автоматически распределить доступное пространство поровну со всех сторон блока.

Всего две строки кода, и вы получаете идеальное центрирование, как по горизонтали, так и по вертикали.

Если нужен код, он здесь.

:not(:hover) для затемнения соседних элементов

Иногда по ТЗ бывает необходимость добавить интерактивности, например, есть контейнер с блоками и при наведении на 1 блок, нужно его подсвечивать, затемняя соседние.

Давайте разберем самый простой способ решения такой задачи.

Сделаем разметку:

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Стилизуем элементы, как нам нужно, а теперь самый главный момент:

.container:hover > :not(:hover) {
  opacity: 0.5;
}

- При наведении на .container
- Выбираем все дочерние элементы (>)
- Которые НЕ в состоянии hover (:not(:hover))
- И применяем к ним opacity: 0.5

Результат: когда вы наводите на любой блок, все остальные блоки становятся полупрозрачными, создавая эффект выделения активного элемента.

Эта штука отлично подходит для галерей, карточек и т.п.

Живой код можно глянуть здесь.

Наглядно про свойство background-repeat

Свойство background-repeat в CSS определяет, как фоновое изображение будет повторяться.

У него есть несколько основных значений, разберем каждое и закроем вопрос)

background-repeat: no-repeat;

Значение указывает браузеру отобразить фоновое изображение только один раз, без повторений.

background-repeat: repeat;

Значение по умолчанию. Изображение будет повторяться, как по горизонтали, так и по вертикали, полностью заполняя фон элемента.

background-repeat: space;

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

background-repeat: round;

Также предотвращает обрезку изображений, но вместо добавления пространства оно масштабирует сами изображения.

Плюс имеются дополнительные значения, repeat-x (повторение только по горизонтали) и repeat-y (повторение только по вертикали).

Расширяющиеся блоки: простой, но эффектный прием CSS

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

Поехали, создадим разметку:

<div class="container">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

Стилизуем блоки и добавим ко всем блокам flex: 1;

.box {
  flex: 1;
  transition: flex-grow 0.3s ease;
  width: 100%;
  height: 10rem;
  background: #FF9933;
  border-radius: 1rem;
}

А к тем на которые мы наводим курсор сделаем так:

.box:hover {
  flex-grow: 2;
}

Что мы в итоге получаем?
— Изначально все блоки имеют одинаковый размер - flex: 1
— При наведении курсора, блок плавно увеличивается в 2 раза - flex-grow: 2, плюс накинули анимацию, чтобы это было плавно.

Вот так, буквально парой строк в CSS можно получить интересный эффект.

Потестить можно здесь.

Эффект stroke из фотошопа в CSS

Кто пробовал фотошопить знает, что там есть эффект обводки (stroke), так вот такой же эффект к тексту можно применять и в CSS.

Это свойство text-stroke, задаем толщину обводки и цвет:

.text {
  color: #ffffff; /* Цвет текста */
  -webkit-text-stroke: 3px #000000; /* Обводка для WebKit-браузеров */
  text-stroke: 3px #000000; /* Стандартная обводка */
}

Но стоит обратить внимание, что на данный момент свойство работает только в связке с префиксом -webkit-.

Код глянуть можно здесь.

Гамбургер-меню без JS с помощью Popover

В этом посте, мы рассматривали Popover, давайте теперь с его помощью сделаем простейшее гамбургер-меню?

HTML-структура:

<button class="menu-btn" popovertarget="menu">☰</button>

<div popover id="menu">
  <button class="close-btn" popovertarget="menu" popovertargetaction="hide">✖️</button>
  <nav>
    <ul>
      <li><a href="#">Главная</a></li>
      <li><a href="#">О нас</a></li>
      <li><a href="#">Контакты</a></li>
    </ul>
  </nav>
</div>

CSS:

#menu {
  width: 250px;
  height: 100vh;
  inset: 0 0 0 auto;
  margin: 0;
  border: none;
  transition: transform 0.3s;
  transform: translateX(100%);
}

#menu:popover-open {
  transform: translateX(0);
}

Как это работает:
— popovertarget связывает кнопку с меню
— popover создает всплывающее окно
— popovertargetaction="hide" закрывает меню
— Автоматически закрывается при клике вне или Esc

Никакого JS, полная доступность и современный подход)

Посмотреть код можно здесь.