Верстка сайта

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

Стандартное text-decoration ограничено, а кроссбраузерный эффект подчёркивания требует работы с фоном и позиционированием. Разбираются приёмы: применение одного и…

Wrapper в CSS ограничивает ширину контента, центрирует его и держит боковые отступы на узких экранах. Разобраны max-width, margin auto, padding и box-sizing, сетка во внутреннем блоке,…

Высота строки в CSS задается свойством line-height: безразмерное число наследуется как коэффициент, а em и проценты передают потомкам готовую длину. Разобраны ориентиры…

Текст внутри круга в CSS делается двумя способами. Короткую надпись центрирует Grid в блоке с border-radius: 50% и aspect-ratio: 1. Длинную цитату выстраивают по контуру двумя…

Карусель отзывов на CSS Scroll Snap: свайп работает средствами CSS, а JavaScript добавляет кнопки, точки-индикаторы и необязательный цикл. Разобраны адаптивность, доступность,…

В этой статье рассказывается о том, как создать прокрутку с эффектом параллакса для Hero-раздела целевой страницы сайта. При этом мы используем только CSS

Адаптивное выпадающее меню собирается на чистом CSS: чекбокс открывает мобильную навигацию, flexbox выстраивает ссылки от 768px, вложенный список дает подменю с…

В статье рассказывается, как на чистом CSS создать красивую анимацию раскрытия анонса записи в блоге при наведении курсора мыши

В статье рассказывается, как с помощью CSS создать форму регистрации с простыми эффектами анимации

В статье рассказывается о CSS Scroll Snap. Данная технология позволяет обрабатывать процесс прокрутки без JavaScript

В статье рассказывается, как с помощью CSS-свойства z-index разместить текст поверх изображения

В статье рассказывается, как редактировать исходные HTML-файлы напрямую в инструментах разработчика Chrome

Наложить один элемент на другой можно через position: absolute внутри родителя с position: relative или поместив элементы в общую ячейку Grid; порядок слоев задает z-index. Отдельно…

Раскрывающийся текст в HTML: нативные details и summary без JavaScript, аккордеон через name, плавная панель на CSS-сетке 0fr/1fr, доступность с inert и aria, блок «Читать далее» и таблица…

В статье рассказывается, как с помощью CSS можно реализовать воспроизведение звука на веб-странице, используя элементы или

Цвет ссылки в CSS задается свойством color для пяти состояний: :link, :visited, :hover, :focus-visible и :active, а порядок правил LVHA решает, какой цвет победит. Отдельно разобраны…

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

Кликабельную область на изображении можно задать четырьмя способами: фигурой SVG, картой изображения, clip-path и CSS-скруглением. Для каждого есть рабочий код, а в конце…