Свойства CSS3

CSS3 — это последняя эволюция языка каскадных таблиц стилей. Вместо единого монолитного выпуска CSS3 разбит на независимые модули — Animations, Flexbox, CSS Grid, Backgrounds and Borders, Transforms, Filters и другие, — которые браузеры могут реализовывать и выпускать по отдельности. Каждый модуль добавил новые свойства поверх исходного набора CSS2, предоставив скруглённые углы, градиенты, тени, анимации, гибкие и сеточные макеты и визуальные фильтры без использования изображений или JavaScript.

Эта страница является кратким справочным указателем свойств, введённых или значительно расширенных в CSS3, сгруппированных по модулям. Каждая строка содержит ссылку на полную главу с синтаксисом, значениями и живыми примерами.

Если вы только начинаете знакомство с языком, прочитайте главы CSS Introduction и CSS Syntax, прежде чем переходить к отдельным свойствам.

Как пользоваться этим справочником

• Ищите свойство по группе. Заголовки ниже соответствуют модулям CSS3: если вам нужно свойство макета, смотрите в разделе Flexible Box Layout или Grid Layout; для движения — в разделе Animation или Transitions; для визуальных эффектов — в разделе Filter Effects или Transform Properties.
• Переходите по ссылкам за подробностями. Каждое свойство ведёт в свою главу с полным списком значений, значениями по умолчанию и интерактивными демонстрациями.
• Учитывайте поддержку браузеров. Модули CSS3 достигли стабильной, беспрефиксной поддержки в разное время. Большинство свойств ниже безопасно работают во всех современных браузерах, однако всегда проверяйте поддержку более новых добавлений (например, некоторых свойств column-*), прежде чем полагаться на них в продакшне.

Замечание о вендорных префиксах

Пока модули CSS3 ещё были экспериментальными, браузеры выпускали свойства с вендорными префиксами, такими как -webkit-, -moz-, -ms- и -o-. Вы можете встретить их в старых кодовых базах:

/* Older code — prefixes were needed during the experimental phase */
.box {
  -webkit-transform: rotate(15deg);
  -moz-transform:    rotate(15deg);
  transform:         rotate(15deg); /* Always list the unprefixed property last */
}

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

CSS3 vs. CSS2 — что изменилось?

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

• Скруглённые углы и рамки из изображений — border-radius, border-image
• Тени — box-shadow, text-shadow
• Градиенты и множественные фоны — background-size, background-clip
• Гибкие и сеточные макеты — Flexbox (flex, align-items, …), CSS Grid (grid, grid-template-columns, …)
• Двумерные и трёхмерные трансформации — transform, perspective
• Плавные переходы между состояниями — transition
• Анимации на основе ключевых кадров — animation, @keyframes
• Многоколоночный текст — column-count, column-gap
• Визуальные фильтры — filter (blur, brightness, contrast, …)
• Настраиваемая прозрачность — opacity

Список свойств CSS3

Свойства анимации

Анимации на основе ключевых кадров позволяют описывать, как элемент переходит через серию стилевых снимков. Правило @keyframes определяет снимки, а свойства animation-* применяют и управляют ими на элементе.

/* Minimal animation example */
@keyframes slide-in {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

.banner {
  animation: slide-in 0.4s ease-out both;
}

Свойства фона

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

/* Responsive hero with background-size */
.hero {
  background-image: url('/img/hero.jpg');
  background-size: cover;       /* fills the box; crop as needed */
  background-position: center;
  background-clip: border-box;  /* default; image reaches border edge */
}

Свойства рамок

CSS3 добавил скруглённые углы и рамки из изображений — возможности, которые ранее требовали трюков с картинками.

/* Rounded button */
.btn {
  border-radius: 6px;
  border: 2px solid steelblue;
}

/* Pill shape */
.badge {
  border-radius: 999px;
}

Цвет и прозрачность

Фильтры

Свойство filter применяет графические эффекты (размытие, яркость, контраст, тень и т. д.) непосредственно в CSS — без редактора изображений.

.card:hover img {
  filter: brightness(1.1) saturate(1.2);
  transition: filter 0.2s ease;
}

.modal-backdrop {
  filter: blur(4px);
}

Flexible Box Layout

Flexbox — одномерная модель макета: она распределяет элементы вдоль одной оси (строка или столбец) и автоматически управляет выравниванием, отступами и переносом.

/* Classic centered card */
.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  align-items: stretch;
}

.card {
  flex: 1 1 300px; /* grow | shrink | basis */
}

Подробное руководство смотрите в главе The Ultimate Guide to Flexbox.

Свойства шрифтов

CSS Grid

CSS Grid — двумерная система компоновки: она размещает элементы в строки и столбцы одновременно, что делает её идеальной для макетов страниц и сложных сеток компонентов.

/* Three-column responsive grid */
.layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

/* Named template areas */
.page {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar main"
    "footer footer";
  grid-template-columns: 200px 1fr;
  grid-template-rows: auto 1fr auto;
}

Свойства многоколоночного макета

Многоколоночный макет автоматически распределяет содержимое по заданному количеству или ширине столбцов — похоже на газетную вёрстку.

/* Two-column article body */
.article-body {
  columns: 2 400px;   /* shorthand: column-count column-width */
  column-gap: 2rem;
  column-rule: 1px solid #ddd;
}

h2 {
  column-span: all; /* heading breaks out of columns */
}

Свойства контура

Свойства текста

CSS3 добавил управление переполнением текста, переносами, тенями и тонкую настройку стиля декоративных линий.

/* Truncate long titles with ellipsis */
.card-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Subtle heading shadow */
h1 {
  text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
}

Свойства трансформаций

Трансформации перемещают, поворачивают, масштабируют или наклоняют элементы в двумерном или трёхмерном пространстве, не влияя на поток документа.

/* 2D card flip on hover */
.card {
  perspective: 600px;
  transform-style: preserve-3d;
  transition: transform 0.5s ease;
}

.card:hover {
  transform: rotateY(180deg);
}

.card-back {
  backface-visibility: hidden;
}

Свойства переходов

Переходы анимируют изменение свойства от одного значения к другому за указанное время при изменении CSS-свойства (например, при :hover).

/* Smooth color + shadow on hover */
.btn {
  background-color: steelblue;
  box-shadow: none;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  background-color: dodgerblue;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

Переходы vs. анимации: используйте transition для изменений, обусловленных состоянием (hover, focus, active) — их проще записывать. Используйте animation с @keyframes для независимого, циклического или многошагового движения, которое воспроизводится без взаимодействия с пользователем.

Свойства визуального форматирования

Связанные материалы

Как только вы определились с нужным свойством, эти главы подробно рассматривают наиболее востребованные возможности CSS3:

• CSS Animation и @keyframes — анимации на основе ключевых кадров.
• The Ultimate Guide to Flexbox — одномерный макет.
• grid и grid-template-columns — двумерный макет страницы.
• filter — размытие, яркость, контраст, тень и другие графические эффекты.
• transform и transition — визуальные эффекты и плавные переходы между состояниями.
• border-radius и box-shadow — современное декоративное оформление.

Практика