Визуальные эффекты

Глубина и текстура

• Используйте несколько слоев теней, чтобы создать реалистичный эффект глубины.
• Используйте filter: drop-shadow() вместо box-shadow для непрямоугольных фигур или прозрачных PNG-файлов.
• Используйте mix-blend-mode и background-blend-mode для наложения освещения (ограничьте область действия с помощью isolation: isolate)

.hero {
  background-image: url('texture.png'), linear-gradient(to bottom, #fff, #eee);
  background-blend-mode: soft-light;
}

Градиенты и color-mix()

Используйте in oklch или in oklab, чтобы явно указать цветовое пространство интерполяции для градиентов или color-mix().

• in oklch лучше сохраняет насыщенность, но может выходить за пределы цветовой гаммы устройства, особенно при больших различиях между цветами.
• in oklab лучше сохраняет цвета в пределах цветовой гаммы (при условии, что конечные точки находятся в ее пределах), но может создавать блеклые ненасыщенные цвета в середине, особенно при интерполяции между противоположными оттенками.
• НЕ ИСПОЛЬЗУЙТЕ in srgb, если у вас нет на то веских причин (например, вы создаете палитру, которая должна интерполировать в srgb).

Переход в обходной режим

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

:root {
  --in-oklab: ;
  --in-oklch: ;
}

@supports (linear-gradient(in oklab, white, black)) {
  :root {
    --in-oklab: in oklab;
    --in-oklch: in oklch;
  }
}

Затем используйте его следующим образом:

.card {
  background: linear-gradient(to bottom var(--in-oklab), var(--accent-color), var(--darker));
}

• Важно! Если вы используете этот метод, убедитесь, что у вас всегда есть непустая вводная инструкция градиента без него, иначе в старых браузерах возникнет синтаксическая ошибка.
• Для color-mix() это НЕ требуется. Если браузер поддерживает color-mix(), он также поддерживает аргумент in <color-space>.

Узоры

Многие узоры можно создать с помощью градиентов CSS и жестких остановок, и они могут быть более гибкими и производительными, чем SVG или внешние изображения, поскольку они могут иметь доступ к переменным CSS и длинам из окружающего контекста. Не нужно повторять позицию дважды – просто используйте 0 или 0%, и функция исправления градиента автоматически скорректирует ее.

Примеры приведены ниже.

Вертикальные полосы шириной 1em каждая:

background: linear-gradient(to right, var(--color-1) 50%, var(--color-2) 0) 0 / 2em;

Диагональные полосы шириной 1em каждая:

background: repeating-linear-gradient(-45deg, var(--color-1) 0 1em, var(--color-2) 0 2em);

Шахматный узор с 1em квадратами:

background: repeating-conic-gradient(var(--color-1) 0 25%, var(--color-2) 0 50%) 0 / 2em 2em;

Узор в горошек с радиусом точек .5em и расстоянием между ними 2em (по горизонтали/вертикали – умножьте на sqrt(2), чтобы получить расстояние по диагонали):

--distance: 2em;
--radius: .5em;
--polka: radial-gradient(circle, var(--color-1) var(--radius), transparent calc(var(--radius) + 1px));
background: var(--polka) 0 0, var(--polka) var(--distance) var(--distance) var(--color-2);
background-size: calc(var(--distance) * 2) calc(var(--distance) * 2);

Простая круговая диаграмма:

.pie {
  --p: 80%;
  width: 60px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--color-1) var(--p), transparent 0%) var(--color-2);
}

Важно! Если вы используете градиенты для отрисовки диаграмм, убедитесь, что для программ чтения с экрана есть текстовая альтернатива. ОБЯЗАТЕЛЬНО. В качестве доступной альтернативы необходимо предоставить таблицу семантических данных, как описано в Руководстве по программированию специальных возможностей в разделе "Альтернативный текст и медиаконтент".