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, а граница и иконка моментально подстраиваются.

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

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

Второй способ прижать подвал сайта к низу экрана

Первый способ с флексами мы уже рассматривали здесь. Теперь давайте разберем еще один способ — с помощью CSS Grid.

Превратим всю страницу в грид-контейнер и распределим на зоны: хедер, контент и футер:

<body>
  <header>Шапка сайта</header>
  <main>Основной контент</main>
  <footer>Подвал сайта</footer>
</body>

CSS:

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
}

Результат:
● grid-template-rows: auto 1fr auto
■ Первая строка (header) занимает столько места, сколько нужно (auto)
■ Вторая строка (main) растягивается на всё свободное пространство (1fr)
■ Третья строка (footer) также занимает только необходимое место (auto)
● min-height: 100vh - заставляет body занимать как минимум всю высоту экрана.

Просто, гибко и надежно)

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

"Липкая" шапка таблицы с position: sticky

Бывает таблица длинная, ты ее скроллишь, читаешь, а потом опа.. и забыл, что вообще находится в столбце №4 и приходится скроллить обратно наверх, запоминать и снова возвращаться вниз. Немного напрягает)

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

Делается это с помощью всем нам знакомого свойства position: sticky.

position: sticky — это своего рода гибрид между relative и fixed. Элемент ведет себя как position: relative, пока не достигнет определенного порога при скролле, а затем превращается в position: fixed.

Чтобы все было ок, достаточно этого:

th {
  position: sticky;
  top: 0;
  background-color: #fff; /* Чтобы не просвечивало содержимое */
}

Теперь при прокрутке шапка остаётся на месте, а данные под ней скрываются.

Также стоить помнить, что если у родителя нет overflow, то "липкость" не сработает.

Ну, а полный код можно пощупать здесь.

Круглые аватарки с object-fit: cover

Разбираем, как сделать аватарки, которые выглядят, как из модного приложения, а не как из профиля на форуме 2000 года)

Возьмём одну и ту же фотку и применим два подхода: ленивый (border-radius: 50%) и правильный (object-fit: cover).

Ленивый подход с border-radius: 50%
Берём фотку и просто делаем её круглой:

<img class="lazy-avatar" src="image.jpg" alt="Аватар">

.lazy-avatar {
  width: 300px;
  height: 300px;
  border-radius: 50%;
}

Никакой умной обрезки: изображение просто втискивается в круг — пропорции вышли из чата)

Правильный подход с object-fit: cover
Оборачиваем фотку в контейнер и используем object-fit: cover:

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

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Фотка масштабируется, чтобы заполнить контейнер, но сохраняет пропорции.

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

"Липкая" шапка таблицы с position: sticky v2

Давайте сегодня еще добавим пару фич в нашу таблицу из этого поста. Разберем, как сделать выделение строк, которые находятся под курсором и как добавить эффект зебра-стайл)

Итак, чтобы сделать полосатые строки таблицы, можно с помощью псевдокласса :nth-child выбрать четные строки и поменять им цвет:

tr:nth-child(even) {
  background-color: #e0e0e0;
}

А чтобы выделить строки под курсором используем псевдокласс :hover:

tr:hover {
  background-color: #f1f9ff;
}

Добавили буквально по паре строк и таблица стала не только функциональна, но и эстетически красива)

Кстати, наш подписчик Alexey в прошлом посте годно подметил, что можно использовать для липкой шапки не th, а thead, здесь переделывать не стал, просто имейте в виду)

Код всей таблицы можно глянуть здесь.

Фигурные обтекания с shape-outside

Частенько, особенно при верстке лендингов, приходится делать фигурное обтекание картинок текстом.

Свойство shape-outside, как раз на этом специализируется. Оно позволяет задать форму, вокруг которой будет обтекать текст и не просто прямоугольник, а круг, треугольник или даже сложную SVG-фигуру.

Чтобы все обтекало, как надо, достаточно задать блоку float и shape-outside. Форму можно определить через:
■ circle()
■ ellipse()
■ polygon()
■ url() если форма задана в SVG

Пример с кругом:

.shape {
  float: left;
  shape-outside: circle(50%);
  width: 200px;
  height: 200px;
  background: #3498db;
  border-radius: 50%;
}

Конечно, многие давно уже юзают это свойство, но новичкам будет полезно)

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

Нарезаем изображения

Сегодня давайте бегло пробежимся по CSS-свойству, благодаря которому мы можем делать изображения таких форм, которые нафантазировали в своих головах дизайнеры)

Это свойство clip-path, которое позволяет обрезать изображение по заданной форме.

Основные формы:

1. Круг:

.circle {
  clip-path: circle(50% at center);
}

50% — радиус круга, at center — положение центра.

2. Эллипс:

.ellipse {
  clip-path: ellipse(25% 40% at 50% 50%);
}

25% — горизонтальный радиус, 40% — вертикальный радиус, at 50% 50% — центр эллипса.

3. Многоугольник:

.rhombus {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}

Каждая пара значений — это координаты точки в формате X% Y%. Точки соединяются в указанном порядке.

Это самые простые примеры, можно создавать любые фигуры, а также использовать svg, в качестве маски.

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

clip-path для блоков

Кстати, свойство clip-path можно юзать не только, для обрезки изображений.

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

Так можно запилить скошенный блок для первой секции, как на картинке в превью поста:

.hero {
  min-height: 50vh;
  background: #4a6bff;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
}

Здесь можно глянуть на импровизированный лендинг из 3х секций)

Адаптивные колонки

Если вам вдруг позарез необходимо сверстать адаптивные текстовые колонки, то можно обойтись без флексов и гридов, использовав columns, все делается буквально одной строчкой:

.container {
  columns: auto 20rem;
}

Вы получаете сбалансированный многоколоночный макет, где:
- auto — означает автоматическое определение количества колонок.
- 20rem — минимальная ширина каждой колонки.

Кстати, это можно использовать не только для текста, но и для списков, например, в футере, где обычно располагается по 50 ссылок)

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

CSS Nesting

Кто не знал, в нативном CSS уже есть такая штука, как nesting(вложенность). Вещь удобная, но в целом не новая, если вы раньше работали с SASS, LESS и.т.д.

Так вот, теперь CSS начал это уметь "из коробки".

Пример простой разметки:

<div class="card">
  <h2 class="title">Карточка</h2>
  <button class="button">Кнопка</button>
</div>

CSS Nesting:

.card {
  background: #f5f5f5;
  padding: 16px;
  
  .title { 
    font-size: 20px; 
  }
  
  .button {
    background: #007bff;
    color: #fff;
    padding: 8px;
    
    &:hover { 
      background: #0056b3; 
    }
  }
}

То же самое, на стандартном CSS:

.card { 
  background: #f5f5f5; 
  padding: 16px; 
}

.card .title { 
  font-size: 20px; 
}

.card .button { 
  background: #007bff; 
  color: #fff; 
  padding: 8px; 
}
.card .button:hover { 
  background: #0056b3; 
}

Здесь приготовил для вас более продвинутый пример со сравнением разных подходов.