Анимированный гамбургер для меню

Давайте сегодня разберем, как сделать простую, но доступную и красивую кнопку для мобильного меню.

HTML:

<button type="button" class="hamburger" aria-label="Открыть меню" aria-expanded="false">
  <span class="hamburger__line"></span>
  <span class="hamburger__line"></span>
  <span class="hamburger__line"></span>
</button>

Используем <button>, а не <div> для семантики. ARIA-атрибуты помогают скринридерам понять назначение кнопки.

Базовая стилизация:

.hamburger {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: transparent;
  border: none;
}

.hamburger__line {
  width: 28px;
  height: 3px;
  background: #000;
  transition: transform 0.3s, opacity 0.2s;
}

Flexbox для вертикального выстраивания линий, плавные переходы для анимации.

Анимация:

.hamburger.active .hamburger__line:nth-child(1) {
  transform: translateY(9px) rotate(45deg);
}
.hamburger.active .hamburger__line:nth-child(2) {
  opacity: 0;
}
.hamburger.active .hamburger__line:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

Верхняя и нижняя линии поворачиваются, средняя исчезает.

JS:

const hamburger = document.querySelector('.hamburger');
let isOpen = false;

hamburger.addEventListener('click', () => {
  isOpen = !isOpen;
  hamburger.classList.toggle('active');
  hamburger.setAttribute('aria-expanded', isOpen);
  hamburger.setAttribute('aria-label', isOpen ? 'Закрыть меню' : 'Открыть меню');
});

Переключаем класс и обновляем ARIA для доступности.

В итоге получаем семантичный, доступный и красиво анимированный гамбургер)

Затестить код можно здесь.

Читать полностью…

Анимация ::marker в списке

Нашел интересный способ анимации маркеров списка. Разберем, как сделать, чтобы при наведении на элемент списка плавно появлялся наш кастомный маркер.

HTML:

<ul>
  <li>Первый</li>
  <li>Второй</li>
  <li>Третий</li>
  <li>Четвертый</li>
  <li>Пятый</li>
</ul>

Делаем обычный список.

CSS:

li::marker {
  content: "🔥 ";
  color: transparent;
  transition: color 200ms;
}
li:hover::marker {
  color: black;
}

■ content: "🔥 "; — ставим наш кастомный маркер.
■ color: transparent; — скрываем его, делая прозрачным.
■ transition: color 300ms; — обеспечиваем плавное появление.
■ color: black; — при ховере, меняем цвет и делаем маркер видимым.

Главная фишка: в контексте ::marker браузеры по умолчанию используют текстовый режим рендеринга emoji. Поэтому color: black сработает, и наш маркер будет виден, даже если сам emoji цветной)

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

Читать полностью…

Заголовок с анимированным градиентом

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

HTML:

<h1>Формошлёп</h1>

CSS:

h1 {
  background: linear-gradient(90deg, #00f5a0, #00d2ff, #7b61ff, #ff4d6d);
  background-size: 200% 100%;
  background-clip: text;
  color: transparent;
  animation: glide 2s linear infinite alternate;
}

@keyframes glide {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

■ Создаем линейный градиент с четырьмя цветами.
■ background-size: 200% растягивает градиент в два раза, чтобы цвета могли "скользить" по тексту.
■ background-clip: text обрезает фон по контуру текста, а color: transparent делает сам текст прозрачным.

С помощью @keyframes мы анимируем background-position, перемещая градиент слева направо и обратно. infinite делает цикл бесконечным, alternate заставляет анимацию воспроизводиться в обратном порядке.

Как говорится — простенько, но со вкусом)

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

Читать полностью…

Flexbox Defense

Нашел еще одну классную игру-тренажер, похожа на Flexbox Froggy, но эта отлично зайдет тем, кто любит игры в жанре Tower Defense)

Нужно с помощью свойств flexbox правильно располагать башни, чтобы успешно отражать атаки.

Ссылка на игру - http://www.flexboxdefense.com/

Проводим выходные с пользой)

Читать полностью…

Расширяющийся сайдбар с помощью :has() и Grid

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

HTML:

<div class="grid">
  <nav class="sidebar">…</nav>
  <div class="content">…</div>
</div>

CSS:

.grid {
  display: grid;
  grid-template-columns: 60px 1fr;
  transition: grid-template-columns 400ms;
}

Контейнер изначально имеет две колонки: 60px (узкий сайдбар) и 1fr (основной контент).

Ключевая фишка — селектор :has():

.grid:has(.sidebar:hover) {
  grid-template-columns: clamp(250px, 25%, 400px) 1fr;
}

При наведении курсора на сайдбар срабатывает :has(), который меняет ширину колонки с помощью функции clamp() - минимум 250px, максимум 400px, но не более 25% от ширины окна.

Добавляем плавность и появление текста:

.sidebar .text {
  opacity: 0;
  transition: opacity 200ms;
}

.grid:has(.sidebar:hover) .sidebar .text {
  opacity: 1;
  transition-delay: 100ms;
}

Отличный пример того возможностей современного CSS)

Код, как всегда здесь.

Читать полностью…

Основные способы скрыть элемент в CSS

Иногда при верстке нужно скрыть элемент на странице. В CSS существует несколько способов это сделать — каждый из них имеет свои особенности и сценарии применения. Давайте разберём самые популярные способы.

1. display: none
Самый радикальный способ — элемент полностью удаляется из потока документа.

.hidden {
  display: none;
}

■ Элемент не занимает места на странице.
■ Не доступен для скринридеров.
■ Не учитывается в layout.
■ Используется для полного скрытия элементов.

2. visibility: hidden
Элемент становится невидимым, но продолжает занимать место.

.invisible {
  visibility: hidden;
}

■ Резервирует пространство в layout
■ Не доступен для взаимодействия.
■ Полезен, когда нужно сохранить размеры блока.

3. opacity: 0
Делает элемент прозрачным через управление непрозрачностью.

.transparent {
  opacity: 0;
}

■ Элемент остается в потоке и занимает место.
■ Доступен для взаимодействия.

4. position: absolute с выносом за экран
Физически перемещает элемент за пределы видимой области.

.offscreen {
  position: absolute;
  left: -9999px;
}

■ Доступен для скринридеров.
■ Не влияет на layout.

5. clip-path
Обрезает видимую область элемента до нуля.

.clipped {
  clip-path: inset(100%);
}

■ Элемент остается в DOM
■ Доступен для скринридеров.

6. width и height = 0
Схлопывает размеры элемента.

.collapsed {
  width: 0;
  height: 0;
  overflow: hidden;
}

■ Не занимает места.
■ Содержимое скрыто через overflow.

7. transform: scale(0)
Масштабирует элемент до нулевого размера.

.scaled {
  transform: scale(0);
}

■ Отлично анимируется.
■ Резервирует исходное пространство.

Выбирайте способ в зависимости от задачи: нужна ли вам анимация, сохранение места или полное исчезновение элемента)

Читать полностью…

Когда сделал небольшие изменения в CSS)

Читать полностью…

Вкладки с анимацией скольжения

Сегодня давайте рассмотрим еще один классный эффект — плавно скользящие вкладки на CSS.

Основа — радио-кнопки:

<input type="radio" id="radio-1" name="tabs" checked>
<label for="radio-1">Upcoming</label>

Используем обычные радио-кнопки. Атрибут name="tabs" группирует их — можно выбрать только одну. checked делает первую активной по умолчанию.

Прячем input, стилизуем label:

input { display: none; }

label {
  width: 200px;
  height: 54px;
  cursor: pointer;
  z-index: 2;
}

Инпуты скрыты, клик по label переключает связанный input. z-index: 2 нужен чтобы текст был поверх фона.

Добавляем скользящий фон:

<span class="glider"></span>

.glider {
  position: absolute;
  width: 200px;
  height: 54px;
  background: #e6eef9;
  z-index: 1;
  transition: 0.25s ease-out;
}

Это просто цветной прямоугольник под текстом. transition сделает движение плавным.

Двигаем glider при клике:

#radio-1:checked ~ .glider { transform: translateX(0); }
#radio-2:checked ~ .glider { transform: translateX(100%); }
#radio-3:checked ~ .glider { transform: translateX(200%); }

Когда выбран второй инпут, glider сдвигается на 100% — это его собственная ширина (200px). Получается ровно на одну вкладку вправо. Для третьей — на 200% (две вкладки).

Меняем цвет текста:

input:checked + label { color: #185ee0; }

Когда input выбран (:checked), селектор + применяет стили к label, который идёт сразу за ним. Так активная вкладка красится.

Готово, получаем крутую анимацию скольжения без JS)

Код как всегда лежит здесь.

Читать полностью…

Сжимающийся хедер при прокрутке

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

Давайте разберём, как это можно реализовать.

HTML:

<header class="header">
  <div class="header-content">
    <div class="header-logo">
      Лого
    </div>
    <nav class="header-navigation">
      <a href="#">Home</a>
      <a href="#">About</a>
      <a href="#">Blog</a>
      <a href="#">Contact Us</a>
    </nav>
  </div>
</header>

CSS:

.header {
  position: sticky;
  top: -40px;
  height: 110px;
}

.header-content {
  height: 70px;
  position: sticky;
  top: 0;
}

Фишка сжимающегося хедера заключается в комбинации двух position: sticky.

■ Внешний контейнер .header имеет высоту 110px и прилипает к позиции top: -40px. Отрицательное значение заставляет контейнер прилипать ВЫШЕ viewport — его верхняя часть уходит за границу экрана.

■ Внутренний контейнер .header-content высотой 70px также имеет position: sticky с top: 0. Он прилипает к верхней границе родительского элемента, оставаясь всегда видимым.

Таким вот хитрым образом можно получить нужный эффект)

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

Читать полностью…

Учи JS — будешь на все руки мастер)

Читать полностью…

<hr> для разделения элементов в <select>

Не многие знают, что обычный тег <hr> можно использовать внутри выпадающих списков <select> для визуального разделения групп опций.

HTML:

<select name="languages">
  <option value="" disabled selected>Выберите язык</option>
  <option value="js">JavaScript</option>
  <option value="ts">TypeScript</option>
  <hr>
  <option value="python">Python</option>
  <option value="java">Java</option>
  <hr>
  <option value="php">PHP</option>
  <option value="csharp">C#</option>
</select>

Если не хочется использовать <optgroup> с label, то можно вполне обойтись <hr>)

Пример кода здесь.

Читать полностью…

Стилизация скроллбара в браузере

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

Единого стандарта для стилизации скроллбаров нет. Webkit-браузеры (Chrome, Safari, Edge) используют свои псевдоэлементы, а Firefox использует свойства scrollbar-width и scrollbar-color. В итоге для кроссбраузерной совместимости нужно использовать оба подхода.

Для Firefox:

* {
  scrollbar-width: auto; /* auto, thin, none */
  scrollbar-color: #5AC2FF #266D98; /* цвет ползунка и трека */
}

Для Webkit-браузеров:

::-webkit-scrollbar {
  width: 12px; /* ширина вертикального скроллбара */
}
::-webkit-scrollbar-track {
  background: #266D98; /* фон трека */
}
::-webkit-scrollbar-thumb {
  background: #5AC2FF; /* цвет ползунка */
}
::-webkit-scrollbar-thumb:hover {
  background: #98D8EC; /* цвет при наведении */
}

Ну и собственно, объединяем оба кода, чтобы работало во всех браузерах)

Пример кода здесь.

Читать полностью…

Гори, но не выгорай)

Читать полностью…

Анимация меняющихся слов

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

Давайте разберём, как реализовать такую анимацию.

HTML:

<div class="container">
  <p>Я ❤️</p>
  <div class="words">
    <span class="word">HTML</span>
    <span class="word">CSS</span>
    <span class="word">JavaScript</span>
    <span class="word">HTML</span>
  </div>
</div>

Добавляем четвёртый элемент — дубликат первого слова. Это ключ к плавному зацикливанию анимации. Когда анимация дойдёт до последнего слова (которое выглядит как первое), она мгновенно вернётся к началу, и переход будет незаметен.

Контейнер для слов:

.words {
  overflow: hidden;
  height: 60px;
}

overflow: hidden и height — это основа эффекта. Мы создаем «окошко», через которое видно только одно слово.

Стили для слов:

.word {
  display: block;
  height: 60px;
  line-height: 60px;
  animation: animate 6s infinite;
}

■ height и line-height по 60px — каждое слово занимает ровно высоту контейнера.
■ animation: animate 6s infinite — запускаем бесконечную анимацию длительностью 6 секунд.

Keyframes:

@keyframes animate {
  0%, 25% {
    transform: translateY(0);
  }
  33%, 58% {
    transform: translateY(-100%);
  }
  66%, 91% {
    transform: translateY(-200%);
  }
  100% {
    transform: translateY(-300%);
  }
}

■ 0%-25% — показываем первое слово (HTML).
■ 33%-58% — сдвигаем на -100% (CSS).
■ 66%-91% — сдвигаем на -200% (JavaScript).
■ 100% — сдвигаем на -300% (HTML).
Когда анимация доходит до конца (100%), она мгновенно возвращается к 0%.
Поскольку четвёртое слово идентично первому, переход незаметен!

Классный и довольно простой способ оживить страницу)

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

Читать полностью…

Заголовок с обводкой и тенью

Сегодня хочу поделиться простым, но эффектным приёмом, отлично подойдет для заголовков на лендосах или просто для создания визуального акцента на странице.

HTML:

<h1 class="outline-text">ФОРМОШЛЁП</h1>

Здесь просто заголовок.

CSS:

.outline-text {   
  color: transparent; 
  -webkit-text-stroke: 1.5px black;
  text-stroke: 1.5px black;
  text-shadow: 5px 5px #6C757D; 
}

Итого:
■ color: transparent — делаем основной цвет букв прозрачным.
■ -webkit-text-stroke: 1.5px black — добавляем чёрную обводку толщиной 1.5px.
■ text-shadow: 5px 5px #6C757D — добавляем тень, смещённую на 5px вправо и 5px вниз.

Так, с помощью простого трюка, получаем стильный и запоминающийся заголовок)

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

Читать полностью…

Приводим логотипы к единому стилю

Частая задача в верстке: нужно разместить логотипы партнёров или клиентов, но все они приходят с разными фонами — где-то белый, где-то цветной и т.п. Разберем, как можно быстро привести их к единообразному виду.

Всего две CSS-строки превращают разношёрстную коллекцию в стильную монохромную галерею:

filter: grayscale(100%);
mix-blend-mode: multiply;

■ filter: grayscale(100%) — преобразует изображение в чёрно-белое. Цветные логотипы становятся серыми, но фон остаётся.
■ mix-blend-mode: multiply — этот режим наложения работает по принципу умножения цветов. Белые области становятся прозрачными, а тёмные части логотипа остаются видимыми. Фон страницы просвечивает сквозь изображение.

Остается подогнать размеры:

.brands__item img {
  width: 200px;
  aspect-ratio: 2 / 1;
  object-fit: contain;
}

■ aspect-ratio: 2 / 1; — задаёт пропорции 2:1.
■ object-fit: contain; — логотип вписывается в область без обрезки и искажений.

Идеально для секций "Наши клиенты" или "Партнёры")

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

Читать полностью…

Перемещаем выбранный тег в начало списка без JS

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

Ключ к этому эффекту — свойство order внутри Flexbox-контейнера, но давайте по порядку)

HTML:

<label class="tag">
  <input type="checkbox">
  HTML5/CSS3
</label>
<label class="tag">
  <input type="checkbox">
  JavaScript
</label>

Чекбокс спрятан внутри <label>, что позволяет кликать по всему тегу.

Скрываем чекбокс:

.tag input {
  display: none;
}

Располагаем теги в ряд:

.tags-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

Динамическое изменение порядка:

.tag:has(:checked) {
  background: #007bff;
  color: white;
  order: -1;
}

Селектор :has(:checked) определяет, отмечен ли чекбокс внутри тега. Свойство order: -1 перемещает элемент в начало.

Так просто с помощью :has() и Flexbox мы получаем крутой интерактивный интерфейс)

Пример кода здесь.

Читать полностью…

Скрытая кнопка поиска

Давайте сегодня разберем интересный прием с псевдоклассом :placeholder-shown — анимированную кнопку поиска, которая появляется только когда пользователь начинает вводить текст.

HTML:

<form>
  <input type="text" placeholder="Поиск...">
  <input type="submit" value="Поиск">
</form>

CSS:

input[type="submit"] {
  opacity: 0;
  pointer-events: none;
  transition: .3s;
}

input:not(:placeholder-shown) + input[type="submit"] {
  opacity: 1;
  pointer-events: auto;
}

Изначально:
■ Кнопка скрыта opacity: 0
■ Не реагирует на клики pointer-events: none

При вводе текста:
■ Псевдокласс :not(:placeholder-shown) определяет, что поле не пустое
■ Кнопка плавно появляется transition: .3s
■ Становится кликабельной pointer-events: auto

Теперь кнопка будет появляться, когда она действительно нужна)

Затестить код можно здесь.

Читать полностью…

Крутой учебник по JS

Нашел книгу "JavaScript для тупых", необычное название, конечно)

Но суть в том, что это не про IQ, а про то, что стандартная академическая подача материала работает далеко не для всех.

Вот выдержка с первой страницы:

Материал будет подаваться жестко.

Знаешь почему?

Потому что ты пришёл на курс "JavaScript для тупых", следовательно, обычная подача материала тебе не подходит по одной из нижеприведенных причин:

1. ты реально тупой, как угол в 179°, что не вывозишь то, что вывозит большинство адекватных людей;
2. для тебя обычная подача скучна и от этого материал не усваивается, либо усваивается на весьма короткий срок;
3. при обычной подаче не понимаешь, что происходит, и что от тебя требуется и зачем;
4. тебе просто-напросто лень читать огромные мануалы.

В общем, если вы:
■ только начинаете и засыпаете над толстыми талмудами;
■ уже что-то знаете, но чувствуете, что в голове каша;
■ просто цените неформальный и живой подход в обучении;

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

Книга бесплатная и лежит здесь.

Читать полностью…

Отображаем структуру файлов на веб-странице

Если вам вдруг когда-нибудь понадобится показать структуру проекта на сайте — есть простое и элегантное решение: ASCII-графика.

Всего три символа позволяют построить визуальное дерево файлов:

├── — ответвление (не последний элемент)
└── — последнее ответвление
│ — вертикальная линия (связь с родителем)

Оборачиваем всё в тег <pre> — и готово.

HTML:

<div class="card">
  <pre>
project/
├── src/
│   ├── js/
│   │   └── main.js
│   ├── scss/
│   │   └── styles.scss
│   └── index.html
├── package-lock.json
├── package.json
└── webpack.config.js
  </pre>
</div>

CSS:

pre {
  font-family: monospace;
  font-size: 18px;
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  color: #2d3748;
}

Добавляем моноширинный шрифт + немного стилизации и все, нормальная наглядная структура проекта готова)

Пример можно глянуть здесь.

Читать полностью…

Эффект подсветки ссылок

Давайте разберём интересный hover-эффект для ссылок, при наведении на ссылку текст плавно заполняется золотым фоном, создавая эффект маркера-выделителя.

HTML:

<p>
  Lorem Ipsum is simply <a href="#">dummy text</a> of the printing 
  and typesetting industry.
</p>

Стилизация ссылок:

a {
  color: black;
  text-decoration: none;
  background: linear-gradient(to bottom, white 50%, gold 50%);
  background-size: 100% 200%;
  background-position: 0 0;
  transition: background-position 400ms ease;
  border-bottom: 2px solid gold;
  font-weight: 500;
}

■ text-decoration: none — убираем стандартное подчёркивание.
■ linear-gradient(to bottom, white 50%, gold 50%) — создаем градиент, где верхняя половина белая, а нижняя золотая.
■ background-size: 100% 200% — растягиваем фон в два раза по высоте.
■ background-position: 0 0 — изначально показываем только верхнюю (белую) половину.
■ border-bottom: 2px solid gold — золотая линия снизу как индикатор ссылки.

Анимация при наведении:

a:hover {
  background-position: 0 100%;
}

При наведении мы сдвигаем фон так, чтобы показывалась золотая половина. Благодаря transition это происходит плавно.

Теперь даже простые ссылки засияют новыми красками)

Пример кода здесь.

Читать полностью…

Шпаргалка по Flexbox

Если все никак не получается запомнить принцип работы и основные свойства Flexbox, то вот вам годная шпаргалка - https://darekkay.com/flexbox-cheatsheet/flexbox-cheatsheet.pdf

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

Ну а тем, кто хочет более подробно — https://yoksel.github.io/flex-cheatsheet/
Это интерактивная шпаргалка, можно кликать, экспериментировать и сразу видеть, как меняется поведение элементов. Отлично подходит для визуалов и тех, кто учится на практике.

Пользуйтесь на здоровье)

Читать полностью…

Множественные границы через box-shadow

Иногда для дизайна требуется создать элемент с несколькими границами разных цветов. Классическое свойство border позволяет добавить только одну границу, можно напилить дополнительных div-обёрток, но есть элегантное решение — использовать box-shadow.

Свойство box-shadow позволяет задать несколько теней, разделяя их запятыми. Каждая тень может быть использована как отдельная граница.

HTML:

<div class="box">
  <p>box-shadow</p>
</div>

CSS:

.box {
  background: white;
  border-radius: 20px;
  box-shadow: 
    0 0 0 10px #002700, 
    0 0 0 20px #005227, 
    0 0 0 30px #ff7223,
    0 0 0 40px #ffd531, 
    0 0 0 50px #ffff88;
}

Синтаксис box-shadow:

box-shadow: offset-x offset-y blur-radius spread-radius color;

Для создания границы, мы задаем смещения по осям X и Y равным нулю, третье значение — радиус размытия тоже 0, четвертое значение — радиус распространения (spread radius) — задаёт толщину "границы", пятое — цвет.

Тени перечисляются от внутренней к внешней. Чтобы каждая последующая "граница" была видна, её радиус распространения должен быть больше, чем у предыдущей.

Также нужно помнить, что:
■ box-shadow не влияет на макет элемента, то есть не добавляет элементу физическую ширину/высоту.
■ Эти "границы" не реагируют на события мыши.

Такой вот незамудренный способ)

Пример здесь.

Читать полностью…

Эффект "выглядывающего" аватара

Давайте разберём CSS-трюк, который позволяет создать интерактивный аватар с эффектом "выглядывания" изображения за границы круга при наведении курсора.

HTML:

<div class="avatar">
  <img src="avatar.png" alt="Аватар" />
</div>

Здесь всего один контейнер и изображение.

Создаём круглый контейнер:

.avatar {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: #ddbe11;
  position: relative;
  clip-path: inset(-100vw 0 0 0 round 50%);
  border: 6px solid #eaeaea;
}

Базовый круг с золотистым фоном и светлой рамкой. position: relative нужен для абсолютного позиционирования изображения внутри.
Главная фишка — clip-path:
■ inset() - обрезает элемент по заданным отступам
■ -100vw (верх) - отрицательное значение - не обрезаем сверху
■ 0 (право) - обрезаем по краю справа
■ 0 (низ) - обрезаем по краю снизу
■ 0 (лево) - обрезаем по краю слева
■ round 50% - скругляем форму обрезки до круга

Позиционируем изображение:

.avatar img {
  position: absolute;
  top: 70%;
  left: 60%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

Интерактивность:

.avatar:hover img {
  transform: translate(-50%, -50%) scale(1.4);
}

При наведении изображение масштабируется в 1.4 раза, сохраняя центрирование благодаря translate(-50%, -50%) и выходя за пределы круга сверху благодаря нашему хитрому clip-path)

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

Читать полностью…

Визуальная шпаргалка по CSS :nth-child

Селектор :nth-child — мощный инструмент в CSS, но его синтаксис часто вызывает вопросы. Давайте разберём основные варианты использования с наглядными примерами.

:nth-child(4) — конкретный элемент

.item:nth-child(4) {
  ...
}

Выбирает 4-й элемент среди соседей.

:nth-child(n+3) — все элементы начиная с третьего

.item:nth-child(n+3) {
  ...
}

Выбирает 3-й элемент и все последующие (3, 4, 5, 6, 7...).
Как работает формула:
■ n принимает значения 0, 1, 2, 3...
■ При n=0: 0+3 = 3 → выбирает 3-й элемент.
■ При n=1: 1+3 = 4 → выбирает 4-й элемент.
И так далее до конца.

:nth-child(-n+3) — первые N элементов

.item:nth-child(-n+3) {
  ...
}

Выбирает только первые 3 элемента (1, 2, 3).
Как работает формула:
■ При n=0: 0+3 = 3 → выбирает 3-й элемент.
■ При n=1: -1+3 = 2 → выбирает 2-й элемент.
■ При n=2: -2+3 = 1 → выбирает 1-й элемент.
■ При n=3: -3+3 = 0 → не выбирает ничего.

:nth-child(3n+1) — каждый N-й элемент с отступом

.item:nth-child(3n+1) {
  ...
}

Выбирает каждый 3-й элемент, начиная с 1-го (1, 4, 7, 10...).
Как работает формула:
■ 3n — это шаг (каждый третий)
■ +1 — это сдвиг (начинаем с первого)
■ При n=0: 3*0+1 = 1
■ При n=1: 3*1+1 = 4
■ При n=2: 3*2+1 = 7

:nth-child(odd) — нечётные элементы

.item:nth-child(odd) {
  ...
}

Выбирает все нечётные элементы (1, 3, 5, 7...).

:nth-child(even) — чётные элементы

.item:nth-child(even) {
  ...
}

Выбирает все чётные элементы (2, 4, 6...).

:last-child — последний элемент

.item:last-child::after {
  ...
}

Выбирает последний элемент среди соседей.

:nth-last-child(2) — N-й элемент с конца

.item:nth-last-child(2) {
  ...
}

Выбирает второй элемент с конца.

Вот как-то так, надеюсь, если было непонятно, то стало понятней)

Читать полностью…

Распределение элементов с margin: auto в Flexbox

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

Пример 1: margin-right: auto (прижать к краям)

.container {
  display: flex;
}

.element {
  margin-right: auto;
}

Когда мы применяем margin-right: auto к элементу, он "захватывает" всё доступное пространство справа. Все элементы после него автоматически сдвигаются вправо.

Пример 2: margin-inline: auto (центрирование)

.container {
  display: flex;
}

.element {
  margin-inline: auto;
}

margin-inline: auto добавляет автоматические отступы слева и справа, центрируя элемент. Остальные элементы распределяются по краям контейнера.

В общем, если нужно разделить на "основное" и "дополнительное" — можно использовать margin-right: auto. Если нужна симметрия — margin-inline: auto)

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

Читать полностью…

Лоботомированная сова — * + *

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

Автор этого приёма — Heydon Pickering. Он придумал этот селектор * + * { margin-top: 1em; } как простое, универсальное решение для отступов между элементами и назвал его "Lobotomized Owl".

HTML:

<div class="content">
  <h2>Lorem Ipsum</h2>
  <p>Lorem ipsum dolor..</p>
  <p>Ut enim ad minim veniam..</p>
  <img src="image.jpg">
  <p>Duis aute irure dolor..</p>
</div>

CSS:

.content * + * {
  margin-top: 24px;
}

Этот селектор добавляет отступ сверху для любого элемента, у которого есть соседний элемент перед ним. Первый элемент остаётся без отступа, а все последующие получают margin-top.

Также есть еще более точный вариант:

.content > * + * {
  margin-top: 24px;
}

Выбирает только прямые дочерние элементы, которые являются соседями (кроме первого) внутри .content. Отступы будут только между основными блоками контента и не будут нарушать макеты вложенных элементов.

Пример кода здесь.

Читать полностью…

Наглядная демонстрация значений width

Давайте разберём, как работают и в чём отличие четырёх значений width — auto, fit-content, max-content и min-content.

width: auto

Поведение по умолчанию. Блок всегда занимает всю доступную ширину родителя.

width: max-content

Блок расширяется до полной длины всего контента в одну строку, игнорируя границы родителя. Может вызвать горизонтальный скроллинг.

width: min-content

Блок сжимается до ширины самого длинного неразрывного элемента (обычно самого длинного слова). Весь остальной текст будет перенесен.

width: fit-content

Блок ведет себя как max-content, но не может превысить ширину родителя. Если контент слишком длинный, он переносится, а блок сжимается до ширины родителя.

Короче, max-content — элемент, который никогда не переносится, min-content — ширина самого длинного слова, а fit-content — умный блок, который занимает столько места, сколько нужно, но не выходит за рамки родителя)

Демка кода здесь.

Читать полностью…

Аккордеон со скрывающимся заголовком

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

HTML:

<details name="accordion">
  <summary>Заголовок</summary>
  <div class="content">
    <p><strong>Заголовок.</strong> Подробное описание...</p>
  </div>
</details>

Для скрытия заголовка нужно только одно CSS-правило:

details[open] summary {
  display: none;
}

Просто прячем весь <summary> когда аккордеон открыт.

Но обязательно нужно использовать атрибут name:

<details name="accordion">

Он группирует все аккордеоны. Когда открываешь один — остальные автоматически закрываются.

Без него все открытые секции останутся открытыми одновременно, и закрыть их будет невозможно, ведь заголовок мы скрыли)

Код из примера здесь.

Читать полностью…

Префикс в поле ввода телефона

Давайте сегодня разберем, как можно упростить процесс ввода телефона. Вместо того, чтобы заставлять юзера вводить код страны (+7 или 8), мы можем визуально отделить его от основного поля ввода.

HTML:

<div class="card">
  <h2>Введите номер телефона</h2>
  <div class="input-box">
    <span class="prefix">+7</span>
    <input type="tel" placeholder="9871234567">
  </div>
</div>

Объединяем всё в одно "поле":

.input-box {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 0.75rem 1rem;
}

Чтобы +7 и input выглядели как одно целое, делаем флекс-контейнер и оформляем его рамкой.

Убираем рамку у самого input, чтобы поле выглядело цельным:

input {
  border: none;
}

Ну и тут стоит понимать, что такой вариант подходит только для российских номеров, где код страны всегда +7. Если нужна международная форма, нужно добавить выбор страны — например, выпадающий список с кодами стран, но это уже совсем другая история)

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

Читать полностью…