시각 효과

깊이와 질감

• 여러 그림자를 레이어링하여 사실적이고 부드러운 깊이 효과를 만듭니다.
• 직사각형이 아닌 도형이나 투명한 PNG에는 box-shadow 대신 filter: drop-shadow()를 사용합니다.
• 조명 오버레이에 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는 색역 내에 더 쉽게 유지되지만 (색역 내 엔드포인트 가정) 특히 반대 색조 간에 보간할 때 중간에 채도가 낮은 색상이 생성될 수 있습니다.
• 특정한 이유가 없는 한 (예: srgb에서 보간해야 하는 색상 선택 도구를 빌드하는 경우) in 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 그라데이션과 하드 중지를 통해 다양한 패턴을 만들 수 있으며, 주변 컨텍스트의 CSS 변수와 길이에 액세스할 수 있으므로 SVG나 외부 이미지보다 더 유연하고 성능이 뛰어날 수 있습니다. 위치를 두 번 반복할 필요가 없습니다. 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);
}

중요: 그라데이션을 사용하여 차트를 렌더링할 때는 스크린 리더를 위한 텍스트 대체가 있어야 합니다. 필수: 접근성 코딩 가이드라인의 대체 텍스트 및 미디어 가이드라인에 설명된 대로 접근성 대안으로 시맨틱 데이터 표를 제공해야 합니다(MUST).