Le sovrapposizioni di contenuti sono una parte importante del modo in cui vengono realizzati i siti web oggi. Ti permettono di mostrare di nuovo l’effetto di sovrapposizioni solo CSS con Box-Shadow con più informazioni o controlli dietro di esso, come i pulsanti.
Un tipico overlay è semitrasparente e ha un colore di sfondo a tinta unita, che di solito è nero. Ha anche testo o pulsanti che gli utenti possono vedere o usare. Dopo l’interazione (clic o passaggio del mouse), l’overlay scompare e viene mostrato il contenuto sottostante.
In questo articolo, vedremo come utilizzare CSS puro per aggiungere un overlay colorato a un’immagine. Nella demo qui sotto, puoi vedere come tutto è andato a finire. Muovi il mouse sulle immagini per vedere i Pokemon sulle sovrapposizioni. Anche se questo post riguarda le immagini, la tecnica che mostra può essere tranquillamente utilizzata con altri tipi di contenuto, come i blocchi di testo.
Come ottenere effetti di sovrapposizione solo CSS con Box-Shadow
Creare ombre a strati con CSS box-shadow
Puoi impilare più ombre una sopra l’altra separando i loro valori con virgole. Questa tecnica può essere utilizzata per creare ombre interessanti che si fondono dolcemente nella pagina. Nota che il valore di diffusione non viene aggiunto: non è realmente necessario in questo caso, ma alla fine spetta a te decidere come appare la tua ombra box.
Se impostiamo l’offset e il raggio di sfocatura su 0px e aggiungi un valore di diffusione a un’ombra, aggiungeremo un bordo alla scatola. Dal momento che questo bordo è tecnicamente un’ombra perché nessuno spazio extra è occupato dal riquadro nell’elemento genitore.
Creare ombre al neon con CSS box-shadow
Le ombre della vita reale sono solitamente nero o grigio, con quantità variabili di opacità. Ma se le ombre avessero dei colori?
Nel mondo reale, ottieni ombre colorate cambiando il colore della fonte di luce. Non esiste una fonte di luce”reale”equivalente al cambiamento su un sito Web, quindi ottieni questo effetto neon modificando il valore del colore su box-shadow.
Creazione di ombre neumorfiche con CSS box-shadow
Questo effetto è unico e visivamente piacevole. Deriva dallo skeumorfismo, che cercava di replicare gli oggetti esattamente come sarebbero apparsi nella vita reale. Ci sono alcuni esempi nell’articolo collegato sullo scheumorfismo
I primi due effetti che dobbiamo creare riguardano componenti web piatti che sembrano fluttuare sopra la pagina e proiettare ombre sullo sfondo. Questo effetto fa apparire questi componenti come se fossero estrusi dalla pagina.
FAQ
Come si sovrappone un riquadro in CSS?
Specifica la larghezza e l’altezza del”contenitore”classe. Imposta la posizione su”relativo”e aggiungi la proprietà margin. Imposta sia la larghezza che l’altezza della classe”box”su”100%”. Specificare la posizione con il valore”assoluto”. … Modella la classe “overlay” usando le proprietà z-index, margin e background.
Come ottengo un’ombra box solo sul CSS inferiore?
Per visualizzare l’ombra nella parte inferiore dell’immagine, viene utilizzata la proprietà”box-shadow”. A tale scopo, offset-x è impostato come”0″, offset-y è qualsiasi valore positivo e viene impostato anche il colore che si desidera visualizzare.
I CSS supportano l’ombreggiatura del riquadro?
La proprietà CSS box-shadow aggiunge effetti di ombra attorno alla cornice di un elemento. Puoi impostare più effetti separati da virgole. Un’ombra di riquadro è descritta dagli offset X e Y relativi all’elemento, sfocatura e raggio di diffusione e colore.