Effetti speciali

Profondità e texture

• Sovrapponi più ombre per ottenere effetti di profondità morbidi e realistici.
• Utilizza filter: drop-shadow() anziché box-shadow per forme non rettangolari o PNG trasparenti.
• Utilizza mix-blend-mode e background-blend-mode per gli overlay di illuminazione (limita l'ambito con isolation: isolate)

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

Gradienti e color-mix()

Utilizza in oklch o in oklab per specificare in modo esplicito lo spazio dei colori di interpolazione per i gradienti o color-mix().

• in oklch preserva meglio il croma, ma può uscire più facilmente dalla gamma del dispositivo, soprattutto per differenze maggiori tra i colori
• in oklab rimane più facilmente nel gamut (supponendo che i punti finali siano nel gamut), ma può creare colori desaturati sbiaditi al centro, soprattutto quando si esegue l'interpolazione tra tonalità opposte.
• NON utilizzare in srgb, a meno che non ci sia un motivo specifico per farlo (ad esempio, se stai creando un selettore colori che deve eseguire l'interpolazione in srgb).

Fallback

Alcuni browser precedenti al 2024 non supportano lo spazio di interpolazione dei colori del gradiente. Per supportare questi browser, utilizza il token solo quando il suo utilizzo è sicuro definendo una variabile:

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

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

Poi utilizza:

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

• Importante: se utilizzi questa tecnica, assicurati che sia sempre presente un preambolo del gradiente non vuoto senza di essa, altrimenti si verificherà un errore di sintassi nei browser meno recenti.
• NON è necessario per color-mix(). Se un browser supporta color-mix(), supporta anche il relativo argomento in <color-space>.

Motivi

Molti pattern possono essere creati tramite gradienti CSS + interruzioni nette, che possono essere più flessibili e performanti rispetto agli SVG o alle immagini esterne, in quanto possono avere accesso alle variabili e alle lunghezze CSS dal contesto circostante. Non è necessario ripetere la posizione due volte: basta utilizzare 0 o 0% e la correzione del gradiente la regolerà automaticamente.

Di seguito sono riportati alcuni esempi.

Strisce verticali di larghezza 1em ciascuna:

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

Strisce diagonali di larghezza 1em ciascuna:

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

Motivo a scacchiera con 1em quadrati:

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

Pois con punti di raggio .5em distanziati di 2em (in orizzontale/verticale, moltiplica per sqrt(2) per la distanza diagonale):

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

Grafico a torta semplice:

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

Importante: quando utilizzi i gradienti per visualizzare i grafici, assicurati che sia presente un fallback testuale per gli screen reader. OBBLIGATORIO: DEVI fornire una tabella di dati semantici come alternativa accessibile, come descritto in dettaglio nelle Linee guida per la programmazione dell'accessibilità nelle linee guida per i contenuti multimediali e il testo alternativo.