Эффект матового стекла на 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, полная доступность и современный подход)

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

Карточка с вертикальным заголовком

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

Весь прикол вертикального заголовка здесь в writing-mode: sideways-lr, но это свойство пока слабовато поддерживается браузерами, я расскажу, чем его заменить.

Разметка:

<div class="card">
  <div class="vertical-title">Заголовок</div>
  <div class="content">
      Текст карточки...
  </div>
</div>

Вертикальный заголовок:

.vertical-title {
  writing-mode: sideways-lr;
  display: flex;
  align-items: center;
  justify-content: center;
}

Ну а в .content пишем текст карточки.

Для стабильной работы во всех браузерах свойство writing-mode: sideways-lr; можно заменить на это:

  writing-mode: vertical-lr;
  transform: rotate(180deg);

Здесь мы также создаем вертикальный текст, но дополнительно поворачиваем его на 180 градусов.

Окончательный код со стилизацией можно глянуть здесь.

Стилизуем форму с :optional

Многие знают про псевдокласс :required, но его противоположность :optional — незаслуженно обходят стороной. А ведь этот псевдокласс позволяет стилизовать все поля формы, у которых нет атрибута required.

Например, зададим фон необязательным полям:

input:optional {
  background: #f0f7ff; 
}

Ну и обязательным зададим другой фон:

input:required {
  background: #fff;
}

Теперь поля с required и без будут закрашены в разные цвета.

Такой вот нехитрый способ сделать наши формы чуть дружелюбнее)

Посмотреть в действии код со стилизацией можно здесь.

Давайте разберём еще одну фичу CSS — currentColor, это ключевое слово в CSS, которое ссылается на текущий цвет текста элемента.

Т.е. это динамическая переменная, которая автоматически подхватывает значение color и позволяет использовать его в других свойствах, таких как background, border, fill, stroke и т.д.

Для примера, создадим кнопку:

<button class="btn">
  <svg viewBox="0 0 24 24" fill="none" xmlns="https://www.w3.org/2000/svg">
    <path d="M3.46447 3.46447C2 ... 8.46967Z"></path>
  </svg>
  currentColor
</button>

И стилизуем:

.btn {
  color: #ff5722;
  border: 3px solid currentColor;
}

.btn:hover {
  color: #4caf50;
}

.btn svg {
  fill: currentColor;
}

Результат:
- color: #ff5722 задаёт оранжевый цвет для текста кнопки.
- border: 3px solid currentColor и fill: currentColor автоматически подхватывают этот же цвет.
- в :hover меняется только color: #4caf50, а граница и иконка моментально подстраиваются.

Таким образом мы получаем более гибкий и поддерживаемый код)

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