Перейти к основному содержимому

Типовые элементы интерфейса

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Аналитику Тестировщику
Архитектору Инженеру

Типовые элементы интерфейса​

Мы разберём различные примеры типовых элементов интерфейса, в формате HTML и CSS. Можете добавлять и экспериментировать - для удобства, в HTML-части будет создаваться элемент, а в CSS - стиль.

Можете создать минимальную страницу, к примеру, test.html, и добавлять новые элементы, к примеру, в <body></body> и добавить файл style.css.

<!DOCTYPE html>
<html>
  <head>
    <title>Пример</title>
	<link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Привет!</h1>
    <p>Это параграф.</p>
  </body>
</html>

Можете также использовать и интерактивный режим, но тогда ограничьтесь inline и тегом <style>.

Play ITЗагрузка интерактивного демо…

Отдельные кнопки, карточки и формы здесь разобраны по свойствам. Разметка целой страницы (теги, форма, семантика) — HTML-страницы целиком. Целые страницы с CSS (шапка, сетка, лендинг) — HTML + CSS — готовые макеты. Анимации (@keyframes, transition, спиннер, shimmer) — CSS-анимации — готовые эффекты. Каталог вдохновения (кнопки, loaders, toggles с разбором техник, MIT) — UI-паттерны из Uiverse (Galaxy). Те же UI-блоки на Tailwind (кнопки, алерты, форма входа, pricing) — Tailwind — готовые блоки.

Внешний каталог Galaxy / Uiverse

Репозиторий galaxy (архив Uiverse.io) — тысячи HTML+CSS-сниппетов без JavaScript. Их удобно разбирать как эталоны техник (:has(), shimmer, кастомные контролы), но перед вставкой в продакшен проверяйте доступность и упростите CSS. В энциклопедии — учебные версии; полный каталог с атрибуцией — лаборатория 1155.

Цвета​

Цветовая палитра задаётся через CSS-переменные в корне документа. Это упрощает управление темами и повторное использование значений.

image-3.png

<div class="color-palette">
  <div class="color-item primary"></div>
  <div class="color-item secondary"></div>
  <div class="color-item success"></div>
  <div class="color-item warning"></div>
  <div class="color-item danger"></div>
</div>

Код ITЗагрузка примера кода…

Шрифты​

Шрифты настраиваются глобально через body и дополняются классами для заголовков и текстовых блоков.

image-4.png

<h1 class="heading-xl">Заголовок XL</h1>
<h2 class="heading-lg">Заголовок LG</h2>
<p class="text-body">Обычный текст</p>
<p class="text-muted">Второстепенный текст</p>

Код ITЗагрузка примера кода…

Ссылки​

Ссылки стилизуются с учётом состояний — обычное, наведение, фокус, активное.

image-5.png

<a href="#" class="link">Обычная ссылка</a>
<a href="#" class="link link--primary">Основная ссылка</a>

Код ITЗагрузка примера кода…

Таблицы​

Таблицы оформлены с чётким разделением строк и возможностью выделения заголовков.

image-6.png

Код ITЗагрузка примера кода…

Карточки​

Карточки — универсальный контейнер для группировки информации.

image-7.png

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Название карточки</h3>
  </div>
  <div class="card-body">
    <p>Краткое описание содержимого карточки.</p>
  </div>
  <div class="card-footer">
    <button class="button button--primary">Подробнее</button>
  </div>
</div>

Код ITЗагрузка примера кода…

Кнопки​

Кнопки реализованы как набор модификаторов к базовому классу.

image-8.png

<button class="button button--primary">Основная</button>
<button class="button button--secondary">Второстепенная</button>
<button class="button button--outline">Контурная</button>
<button class="button button--danger">Опасная</button>

Код ITЗагрузка примера кода…

Поля ввода​

Поля ввода стилизуются с учётом состояний — обычное, фокус, ошибка, отключённое.

image-9.png

<div class="form-group">
  <label for="email">Электронная почта</label>
  <input type="email" id="email" class="input" placeholder="user@example.com">
</div>

<div class="form-group">
  <label for="password">Пароль</label>
  <input type="password" id="password" class="input input--error" placeholder="••••••••">
  <span class="input-hint">Пароль должен содержать не менее 8 символов</span>
</div>

Код ITЗагрузка примера кода…

Поиск с раскрытием (только CSS)​

Поле поиска может разворачиваться при фокусе без JavaScript: связка type="search", псевдоклассы :focus и :valid и transform на поле и кнопке. Идея популярна в каталоге Uiverse / Galaxy (категория Inputs); ниже — упрощённая учебная версия.

<form class="search-expand" action="">
  <input class="search-expand__input" type="search" name="q" required autocomplete="off" aria-label="Поиск">
  <button type="submit" class="search-expand__btn">
    <span class="search-expand__label">Найти</span>
  </button>
</form>

Код ITЗагрузка примера кода…

Как это работает. В свёрнутом виде поле узкое; при фокусе или после ввода текста (:valid) оно занимает всю ширину формы, кнопка "раскрывается" рядом. Для реального API-поиска добавьте debounce и запросы в JavaScript.

Выпадающие списки (select)​

Стилизация нативного <select> ограничена, поэтому часто используют кастомные реализации. Здесь — базовый вариант с улучшенным внешним видом.

image-10.png

<div class="form-group">
  <label for="country">Страна</label>
  <select id="country" class="select">
    <option value="">Выберите страну</option>
    <option value="ru">Россия</option>
    <option value="de">Германия</option>
    <option value="fr">Франция</option>
  </select>
</div>

Код ITЗагрузка примера кода…

Слайдеры (range)​

Слайдер оформляется с использованием псевдоэлементов WebKit и Mozilla.

image-11.png

<div class="form-group">
  <label for="volume">Громкость</label>
  <input type="range" id="volume" class="slider" min="0" max="100" value="70">
</div>

Код ITЗагрузка примера кода…

Переключатели (switch)​

Переключатель реализуется через <input type="checkbox"> с обёрткой и псевдоэлементами.

image-12.png

<div class="form-group">
  <label class="switch">
    <input type="checkbox" checked>
    <span class="switch-track"></span>
    Уведомления включены
  </label>
</div>

Код ITЗагрузка примера кода…

Переключатель темы и :has()​

Современный CSS позволяет менять фон всей области, когда включён switch, без скриптов — псевдокласс :has() на родителе. Для доступности используйте role="switch" и скрытый текст для скринридеров (паттерн из каталога Uiverse, автор csemszepp).

<div class="theme-panel">
  <label class="switch switch--theme">
    <input type="checkbox" class="switch__input" role="switch" aria-labelledby="theme-label">
    <span class="switch-track" aria-hidden="true"></span>
    <span id="theme-label" class="switch__sr">Тёмная тема</span>
  </label>
</div>

Код ITЗагрузка примера кода…

Сохранение выбора темы между визитами — уже задача JavaScript (localStorage).

Чекбоксы​

Чекбоксы стилизуются аналогично переключателям, но с квадратной формой.

image-13.png

<div class="form-group">
  <label class="checkbox">
    <input type="checkbox" checked>
    <span class="checkbox-box"></span>
    Я согласен с условиями
  </label>
</div>

Код ITЗагрузка примера кода…

Радиокнопки (radio)​

Группа radio с общим name выбирает один вариант. Визуальный слой строится так же, как у checkbox: скрытый <input type="radio">, <label for="id"> и индикатор. Ниже — компактная группа с подсветкой выбранного пункта (идея "бегущего" индикатора из Galaxy упрощена для учебника).

<fieldset class="radio-group">
  <legend>Способ доставки</legend>
  <input type="radio" name="delivery" id="del-pickup" value="pickup" checked>
  <label for="del-pickup" class="radio-option">Самовывоз</label>
  <input type="radio" name="delivery" id="del-courier" value="courier">
  <label for="del-courier" class="radio-option">Курьер</label>
  <input type="radio" name="delivery" id="del-post" value="post">
  <label for="del-post" class="radio-option">Почта</label>
</fieldset>

Код ITЗагрузка примера кода…

Более сложные анимации индикатора — в каталоге UI-паттернов.

Меню​

Простое вертикальное меню с поддержкой вложенных пунктов.

image-14.png

<nav class="menu">
  <ul class="menu-list">
    <li><a href="#" class="menu-item active">Главная</a></li>
    <li>
      <a href="#" class="menu-item">Проекты</a>
      <ul class="menu-sublist">
        <li><a href="#" class="menu-item">Веб-приложения</a></li>
        <li><a href="#" class="menu-item">Мобильные приложения</a></li>
      </ul>
    </li>
    <li><a href="#" class="menu-item">Контакты</a></li>
  </ul>
</nav>

Код ITЗагрузка примера кода…

Панели навигации (Navigation Bars)​

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

image-15.png

<nav class="navbar">
  <div class="navbar-brand">МойСайт</div>
  <ul class="navbar-nav">
    <li><a href="#" class="nav-link active">Главная</a></li>
    <li><a href="#" class="nav-link">Услуги</a></li>
    <li><a href="#" class="nav-link">О нас</a></li>
    <li><a href="#" class="nav-link">Контакты</a></li>
  </ul>
  <button class="button button--primary">Войти</button>
</nav>

Код ITЗагрузка примера кода…

Хлебные крошки (Breadcrumbs)​

Иерархическая навигация с разделителями.

image-16.png

<nav aria-label="Навигация по странице" class="breadcrumbs">
  <ol>
    <li><a href="/">Главная</a></li>
    <li><a href="/docs">Документация</a></li>
    <li><span>Стили</span></li>
  </ol>
</nav>

Код ITЗагрузка примера кода…

Пагинация​

Нумерованный переключатель страниц с активным состоянием и стрелками.

image-17.png

<nav aria-label="Постраничная навигация" class="pagination">
  <a href="#" class="pagination-link pagination-prev">‹</a>
  <a href="#" class="pagination-link">1</a>
  <a href="#" class="pagination-link active">2</a>
  <a href="#" class="pagination-link">3</a>
  <a href="#" class="pagination-link">4</a>
  <a href="#" class="pagination-link pagination-next">›</a>
</nav>

Код ITЗагрузка примера кода…

Боковые панели (Sidebars)​

Вертикальная боковая панель, фиксированная слева, с возможностью скрытия.

image-18.png

Код ITЗагрузка примера кода…

Хэдеры и футеры​

Стандартные шапка и подвал сайта с базовым оформлением.

image-19.png

Код ITЗагрузка примера кода…

Уведомления (Notifications / Alerts)​

Всплывающие сообщения с поддержкой типов и закрытия.

image-20.png

<div class="alert alert--success">
  <span>✅ Операция успешно завершена!</span>
  <button class="alert-close" aria-label="Закрыть">&times;</button>
</div>

<div class="alert alert--warning">
  <span>⚠️ Требуется ваше внимание.</span>
  <button class="alert-close" aria-label="Закрыть">&times;</button>
</div>

Код ITЗагрузка примера кода…

Подсказки (tooltip)​

Tooltip — краткая подсказка при наведении или фокусе. На чистом CSS удобно показывать текст через data-tooltip и псевдоэлемент ::after; для клавиатуры, touch и сложных панелей (как "Share + соцсети" в Galaxy) понадобится JavaScript.

<button type="button" class="tooltip-btn" data-tooltip="Сохранить черновик" aria-describedby="tip-save">
  💾
</button>
<span id="tip-save" class="tooltip-btn__hint" role="tooltip">Сохранить черновик</span>

Код ITЗагрузка примера кода…

Развёрнутая панель с иконками — UI-паттерны из Uiverse.

Контекстные меню​

Меню, появляющееся по правому клику или программному вызову.

<div class="context-trigger">Правый клик здесь</div>

<div class="context-menu" id="contextMenu">
  <button class="context-item">Копировать</button>
  <button class="context-item">Вырезать</button>
  <button class="context-item">Удалить</button>
</div>

Код ITЗагрузка примера кода…

Примечание: Показ/скрытие контекстного меню требует JavaScript (например, обработка contextmenu и позиционирование через event.clientX/Y). CSS отвечает только за внешний вид.

Анимации и переходы​

Набор переиспользуемых анимаций на основе @keyframes и классов. Расширенная галерея (fade, spinner, shimmer, stagger, модалка) с построчным разбором — CSS-анимации — готовые эффекты.

<div class="box animate-fade-in">Появляется</div>
<div class="box animate-slide-up">Сдвигается сверху</div>
<div class="box animate-pulse">Пульсирует</div>

Код ITЗагрузка примера кода…

Модальные окна (Modal Windows)​

Окно поверх содержимого с затемнением фона.

Код ITЗагрузка примера кода…

Примечание: Переключение класса .active на .modal осуществляется через JavaScript.

Промо-карусель (hero-баннер)​

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

  1. HTML — структура и доступность (что за блок, сколько слайдов, куда нажать).
  2. CSS — внешний вид, ширина, плавная смена, "парящие" декоративные элементы.
  3. JavaScript — логика — следующий/предыдущий слайд, точки-индикаторы, автопрокрутка, пауза при наведении.

Полный разбор класса и методов init / destroy — в главе Виджеты интерфейса на ванильном JavaScript. Анимации @keyframes и transition подробнее — в § Анимации, переходы и трансформации. Готовые одностраничные примеры (fade, спиннер, shimmer, stagger) — CSS-анимации — готовые эффекты.

Play ITЗагрузка интерактивного демо…

Адаптивный баннер - картинки под разные экраны​

Один блок с картинкой проще, но карусель решает две задачи: несколько сообщений в одной зоне экрана и динамика (движение привлекает внимание). Минус — пользователь может не успеть прочитать текст; поэтому добавляют паузу при наведении, кнопки "назад/вперёд" и индикаторы, а при prefers-reduced-motion отключают автопрокрутку.

Ширина — не на весь экран​

Частая ошибка новичков — растянуть баннер на width: 100% без ограничения. На широком мониторе текст и кнопки "разъезжаются". Обычно задают обёртку с max-width и центрированием:

.banner-container {
  width: 100%;
  max-width: 900px;   /* подберите под макет: 720–1100px */
  margin: 0 auto;     /* центр страницы */
  padding: 0 1rem;    /* отступ от краёв на узких экранах */
}
  • width: 100% — на мобильном баннер использует всю доступную ширину внутри отступов.
  • max-width — на десктопе блок не шире заданного значения.
  • margin: 0 auto — горизонтальное выравнивание по центру.

В демо выше ползунок меняет max-width — сразу видно разницу.

HTML — семантика и доступность​

Слайды лучше оформлять как отдельные блоки внутри региона с подписью для скринридеров:

Код ITЗагрузка примера кода…

Пояснения:

ЭлементНазначение
role="region" + aria-labelОбъявляет отдельную область страницы.
aria-roledescription="carousel"Подсказка assistive-tech, что это карусель.
aria-hidden на слайдахСкрытые слайды не зачитываются вслух.
data-carousel-*Удобные "крючки" для скрипта без привязки к одному классу стиля.
Пустой data-carousel-indicatorsТочки навигации часто создают в JS по числу слайдов — не дублируют разметку.

CSS — стопка слайдов и плавная смена​

Идея: все слайды занимают одну и ту же область, видимый — с data-active="true" (или классом .active).

Код ITЗагрузка примера кода…

Почему opacity, а не display: none: с display нельзя плавно анимировать появление. С opacity — 0 неактивный слайд невидим, но занимает расчёт layout только у активного (position: relative), остальные "наложены" через absolute.

Кнопки "назад/вперёд" обычно position: absolute поверх слайда с высоким z-index. Индикаторы — внизу по центру (left: 50% + transform: translateX(-50%)).

Декоративная анимация ("парящие" фигуры)​

Движение не обязано совпадать со сменой слайда. Декоративные круги или плашки анимируют отдельно — так проще сопровождать код:

.float-shape {
  position: absolute;
  border-radius: 50%;
  opacity: 0.35;
  animation: floatY 4s ease-in-out infinite;
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

transform не вызывает перекомпоновку всей страницы (в отличие от частого изменения top/margin), поэтому анимация обычно плавнее для браузера.

JavaScript — что делает скрипт​

CSS не умеет "через 5 секунд показать следующий слайд" без хитростей. На практике подключают класс (см. главу про виджеты):

  • находит слайды и кнопки в разметке;
  • вешает обработчики кликов;
  • запускает setInterval для автопрокрутки;
  • при действии пользователя сбрасывает таймер, чтобы слайд не переключился сразу после клика;
  • при mouseenter останавливает автопрокрутку, при mouseleave — возобновляет.

Примечание: В учебном демо на этой странице используется класс PromoCarousel из bannerCarouselEngine.js — тот же приём, что в статье по JavaScript, но встроенный в интерактив.

Карусель на scroll-snap без JavaScript​

Scroll Snap — встроенное в браузер прилипание слайдов при горизонтальной прокрутке. Подходит для галерей и ленты карточек, где пользователь листает пальцем или колёсиком. Автосмена слайдов по таймеру подключается через JavaScript. Hero-баннер с автопрокруткой разобран в разделе Промо-карусель выше.

Ключевые свойства:

  • scroll-snap-type: x mandatory на контейнере — привязка по горизонтали обязательна;
  • scroll-snap-align: start на слайде — край слайда совпадает с краем видимой области;
  • scroll-behavior: smooth — плавная прокрутка (уважайте prefers-reduced-motion);
  • -webkit-overflow-scrolling: touch — инерционный скролл на старых iOS.
<div class="snap-carousel" role="region" aria-label="Галерея">
  <article class="snap-carousel__slide">Слайд 1</article>
  <article class="snap-carousel__slide">Слайд 2</article>
  <article class="snap-carousel__slide">Слайд 3</article>
</div>
.snap-carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.5rem;
}

.snap-carousel__slide {
  flex: 0 0 85%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: 12rem;
  border-radius: 12px;
  background: var(--surface, #f1f5f9);
}

@media (min-width: 640px) {
  .snap-carousel__slide {
    flex-basis: 60%;
  }
}

Если над каруселью закреплена шапка, задайте scroll-padding на контейнере или scroll-margin на слайдах — справочник, scroll-snap. Похожий приём в UI-паттернах Galaxy.

Матовое стекло (frosted glass)​

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

Из чего состоит эффект:

  • полупрозрачный background (например rgba(255, 255, 255, 0.25));
  • backdrop-filter — размывает и меняет насыщенность фона за панелью;
  • для матового стекла берут именно backdrop-filter, а не filter по самому блоку.

Префикс -webkit-backdrop-filter до сих пор нужен в Safari — синтаксис и префиксы.

<div class="hero">
  <div class="glass-card">
    <h2 class="glass-card__title">Заголовок</h2>
    <p class="glass-card__text">Текст остаётся читаемым на пёстром фоне.</p>
  </div>
</div>
.hero {
  min-height: 16rem;
  padding: 2rem;
  background: url("hero.jpg") center / cover no-repeat;
}

.glass-card {
  max-width: 24rem;
  padding: 1.25rem 1.5rem;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.glass-card__title {
  margin: 0 0 0.5rem;
  color: #0f172a;
}

backdrop-filter нагружает GPU. Проверяйте на телефоне и во вкладке Performance в DevTools. Для @media (prefers-reduced-transparency: reduce) задайте плотный непрозрачный фон — доступность. Сводка по фильтрам — раздел Анимации и производительность. Синтаксис — справочник, backdrop-filter.

Чек-лист перед публикацией​

  • Баннер ограничен по max-width и читаем на широком экране.
  • Есть ручная навигация (стрелки или точки).
  • Автопрокрутка останавливается при наведении и при prefers-reduced-motion.
  • У кнопок есть aria-label, у слайдов — корректный aria-hidden.
  • Текст на слайде контрастен к фону (доступность WCAG).

Скелетон загрузки (skeleton)​

Пока данные с сервера не пришли, вместо пустого экрана показывают placeholder-блоки с анимацией shimmer (бегущий блик). Это дешевле для восприятия, чем один только спиннер на весь экран. Полный разбор анимации — CSS-анимации — Skeleton shimmer; карточка-скелетон — типичный приём из каталога Galaxy (Uiverse).

<article class="card-skeleton" aria-busy="true" aria-label="Загрузка карточки">
  <div class="card-skeleton__line card-skeleton__line--title"></div>
  <div class="card-skeleton__line"></div>
  <div class="card-skeleton__line card-skeleton__line--short"></div>
</article>

Код ITЗагрузка примера кода…

Когда контент загружен, снимите aria-busy="true" и замените блок реальными данными — через DOM.

Индикаторы прогресса (Progress Bars)​

Визуализация выполнения задачи. Анимированная полоска с разбором — CSS-анимации — готовые эффекты.

<div class="progress">
  <div class="progress-bar" style="width: 65%;">65%</div>
</div>

<div class="progress progress--striped">
  <div class="progress-bar" style="width: 30%;"></div>
</div>

Код ITЗагрузка примера кода…

Содержание