Crop картинки без object-fit
Вырезаем центр изображения (inset 15%). Работает в Chrome 104+.
'/%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle' fill='white' font-size='48'%3Ecrop%3C/text%3E%3C/svg%3E)
Крутые приёмы вёрстки в одном месте. Наведи, покрути, попрокручивай.
Карточки сами подстраиваются под ширину. minmax(min(280px, 100%), 1fr) — магия.
Меняй ширину окна — layout реагирует на ширину родителя, а не viewport.
Карточка с .badge получает акцентную рамку автоматически.
Размытие фона за полупрозрачным блоком.
multiply, screen, difference — «магические» комбинации.
Текст как mask для градиента.
aspect-ratio: 16/9, 1, 3/4 — фиксированные пропорции на лету.
Прокрути вправо — блоки «прилипают».
Левый контент. Справа — sticky-блок, он «прилипает» при скролле.
Плюс карточка с плавным transform при hover (scale + rotate).
Блок анимируется при прокрутке страницы — без JS (Chrome 115+).
Toggle с морфингом через document.startViewTransition().
Блок анимируется при переходе display: none → block.
Вырезаем центр изображения (inset 15%). Работает в Chrome 104+.
Попробуй отправить форму с некорректным email.
Как в старых книгах: первая буква занимает 3 строки.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
feGaussianBlur + feMerge для свечения.
base и overrides — контроль приоритета стилей.
color-mix(in srgb, A 70%, B) и т.п.
--hue анимируется — раньше нельзя было анимировать переменные.
perspective + transform-style: preserve-3d + 6 face.
perspective + rotateX/Y по позиции мыши.
Линии по 1px без двойных границ.
При клике мышью — нет outline, при Tab — есть.
overflow: clip — не создаёт scroll, в отличие от overflow: hidden.
Многострочный заголовок выглядит ровнее.
transform по позиции мыши.