Efekty specjalne

Głębia i tekstura

• Nakładaj na siebie wiele cieni, aby uzyskać realistyczne efekty miękkiej głębi.
• W przypadku kształtów innych niż prostokątne lub przezroczystych plików PNG użyj filter: drop-shadow() zamiast box-shadow.
• Użyj mix-blend-mode i background-blend-mode do nakładek oświetlenia (ogranicz zakres za pomocą isolation: isolate)

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

Gradienty i color-mix()

Użyj in oklch lub in oklab, aby jawnie określić przestrzeń barw interpolacji dla gradientów lub color-mix().

• in oklch lepiej zachowuje chrominancję, ale może łatwiej wykraczać poza gamę urządzenia, zwłaszcza w przypadku większych różnic między kolorami
• in oklab łatwiej pozostaje w gamie (zakładając, że punkty końcowe są w gamie), ale może tworzyć wyblakłe, nienasycone kolory w środku, zwłaszcza podczas interpolacji między przeciwnymi odcieniami.
• NIE używaj in srgb, chyba że masz ku temu konkretny powód (np. tworzysz selektor kolorów, który musi interpolować w srgb).

Funkcja zastępcza

Niektóre przeglądarki sprzed 2024 r. nie obsługują przestrzeni interpolacji kolorów gradientu. Aby obsługiwać te przeglądarki, używaj tokena tylko wtedy, gdy jest to bezpieczne, definiując zmienną:

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

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

Następnie użyj w ten sposób:

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

• Ważne: jeśli używasz tej techniki, upewnij się, że zawsze istnieje niepusty gradient bez tego prefiksu. W przeciwnym razie w starszych przeglądarkach wystąpi błąd składni.
• Nie potrzebujesz tego w przypadku color-mix(). Jeśli przeglądarka obsługuje color-mix(), obsługuje też argument in <color-space>.

Wzory

Wiele wzorów można utworzyć za pomocą gradientów CSS i twardych zatrzymań. Mogą one być bardziej elastyczne i wydajne niż pliki SVG lub obrazy zewnętrzne, ponieważ mają dostęp do zmiennych CSS i długości z otaczającego kontekstu. Nie musisz powtarzać pozycji dwukrotnie – wystarczy użyć 0 lub 0%, a funkcja poprawiania gradientu automatycznie dostosuje pozycję.

Przykłady poniżej.

Pionowe pasy o szerokości 1em każdy:

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

Ukośne pasy o szerokości 1em:

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

Wzór szachownicy z 1em kwadratami:

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

Wzór w groszki o promieniu .5em, odstępy między groszkami 2em (w poziomie/pionie – pomnóż przez sqrt(2), aby uzyskać odległość po przekątnej):

--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);

Prosty wykres kołowy:

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

Ważne: jeśli do renderowania wykresów używasz gradientów, upewnij się, że czytniki ekranu mają dostęp do wersji tekstowej. OBOWIĄZKOWO: MUSISZ podać semantyczną tabelę danych jako dostępną alternatywę, zgodnie z opisem w wytycznych dotyczących kodowania ułatwień dostępu w sekcji wytycznych dotyczących tekstu alternatywnego i multimediów.