Come effetto Sovrapponi solo CSS con Box-Shadow

Sovrapposizioni di contenuti sono una parte importante del web design moderno. Ti aiutano nascondi un elemento su una pagina Web e in seguito - con l'approvazione dell'utente - rivelalo, e visualizzare informazioni aggiuntive o controlli, come i pulsanti dietro di esso.

Una sovrapposizione tipica è semi trasparente, con un colore di sfondo solido (solitamente nero), e c'è del testo o dei pulsanti su cui gli utenti possono vedere o interagire. Dopo l'interazione (cliccando o passandoci sopra), l'overlay viene rimosso e rivela il contenuto sotto.

In questo articolo, daremo un'occhiata a come aggiungi una sovrapposizione colorata alle immagini usando puro CSS. Puoi vedere il risultato finale nella demo qui sotto. Passa il mouse sulle immagini per fare in modo che le sovrapposizioni rivelino i Pokemon. Sebbene questo post discuti le immagini, la tecnica che presenta può essere tranquillamente applicata ad altri tipi di contenuto (come blocchi di testo).

Evita di aggiungere elementi HTML aggiuntivi

Gli overlay sono spesso creati da posizionare un elemento HTML extra con un opacità valore inferiore a 1 proprio sopra l'elemento da coprire. Il problema è che questa tecnica implica l'uso di un extra elemento (o pseudo-elemento) per l'overlay.

Se non sei un pedante di dimensioni HTML, avere un elemento extra per la sovrapposizione non è probabilmente un grosso problema, poiché molto probabilmente non tassherà la larghezza di banda di una rete tanto. Tuttavia avendo separato le regole di stile per gli elementi e le loro sovrapposizioni danneggiano ancora la leggibilità e la manutenibilità dei CSS.

Per mantenere il tuo codice in ordine, e non confondere il tuo profilo HTML, è una scelta migliore per usare una soluzione solo CSS.

Crea sovrapposizione con box-ombra

Quindi, come si può effettivamente creare un overlay solo CSS? Con l'aiuto di box-ombra Proprietà CSS. Il box-shadow è perfetto per questo lavoro, dal momento che cos'è un overlay ma un'ombra scura proiettata su un elemento?

Il box-shadow ha un valore di proprietà chiamato inserire, che fa apparire l'ombra verso l'interno della cornice della scatola.

Un'ombra di riquadri inserita con una dimensione dell'ombra pari a metà o più della metà della larghezza e dell'altezza dell'elemento crea un'ombra copre il intero elemento.

 .box larghezza: 200px; altezza: 200 px; box-shadow: verde 0 0 0 100 pixel inset;  

Poiché si sovrappone di solito avere una certa trasparenza, è necessario aggiungerlo all'ombra della casella. Questo può essere fatto usando il RGBA () funzione per il colore dell'ombra.

Il rgb porzione di rgba, rappresenta, rosso, verde e blu i valori dei canali di colore, mentre un rappresenta il canale alfa, che è responsabile della trasparenza.

Per il canale alfa, il valore 1 crea un colore opaco, mentre 0 crea a colore completamente trasparente.

Assegnando un valore compreso tra 0 e 1 al canale alfa del valore del colore rgba dell'ombra della casella, è possibile creare una sovrapposizione semitrasparente.

Crea il codice per la demo

La nostra demo mostrerà le immagini e i nomi di diversi Pokemon. Qui creeremo solo il codice per Bulbasaur, il primo pokemon nella demo, dato che gli altri sono fatti allo stesso modo (su Codepen puoi anche controllare il codice per loro).

HTML

Per l'HTML, abbiamo solo bisogno di creare una scatola a cui aggiungeremo tutto il resto con i CSS.

CSS

Nel CSS qui sotto, il .pokemon elementi mostrano le immagini pokemon e il .pokemon :: dopo gli pseudo-elementi portano il nome del Pokemon.

Dal momento che il box-ombra proprietà può assumere più valori in modo da rendere più ombre, oltre all'ombra di sovrapposizione, ho aggiunto anche altre ombre di grigio al .pokemon e .pokemon: hover elementi per l'estetica.

 / * pokemon pictures * / .pokemon width: 200px; altezza: 200 px; / * contenuto centrale tramite box flessibile * / display: flex; justify-content: center; align-items: center; / * overlay * / box-shadow: 0 0 0 100 px inset, 0 0 5px grigio; / * transizione di passaggio del mouse * / transizione: box-shadow 1s;  / * nomi pokemon * / .pokemon :: after width: 80%; altezza: 80%; blocco di visualizzazione; font: 16pt 'bookman old syle'; colore bianco; bordo: 2 px solido; allineamento del testo: centro; / * contenuto centrale tramite box flessibile * / display: flex; justify-content: center; align-items: center; / * transizione di passaggio del mouse * / transizione: opacità 1s .5s;  / * mostra l'immagine del pokemon su hover * / .pokemon: hover transition: box-shadow 1s; box-shadow: 0 0 0 5px inserto, 0 0 5px grigio, 0 0 10px grigio inserito;  / * nascondi il nome del pokemon su hover * / .pokemon: hover :: after transition: opacity .5s; opacità: 0;  

Quando il .pokemon gli elementi sono aleggiati, la loro ombra di scatola deve cambiare per rivelare l'immagine dietro.

Puoi vedere che il .pokemon: hover il selettore riceve una nuova casella-ombra che rimuove la sovrapposizione e il .pokemon: hover :: dopo il selettore nasconde il nome del Pokemon usando il opacità proprietà.

Potresti aver notato anche il assenza di valori cromatici nella casella di sovrapposizione ombre in .pokemon e .pokemon: hover regole di stile. È necessario specificare la casella di sovrapposizione colore dell'ombra dei singoli Pokemon nelle loro regole di stile separate, poiché sono tutti diversi l'uno dall'altro.

Come box-ombra non ha alcuna proprietà di longhand, non puoi impostare il suo colore dell'ombra individualmente con qualcosa di simile, box-ombra-colore; invece - usiamo il colore proprietà.

Per impostazione predefinita, quando si assegna un valore per colore proprietà, quel valore è applicato per il bordo, il contorno e i colori dell'ombra della scatola anche. Quindi, puoi semplicemente usare il colore proprietà per aggiungere colore a box-shadow.

 #bulbasaur background-image: url (https://assets.hongkiat.com/uploads/css-only-overlays-box-shadow/bulbasaur.jpg); / * valore del colore utilizzato per il colore dell'ombra del riquadro * / colore: rgba (71, 121, 94, 0,9);  #bulbasaur :: after / * nome pokemon * / content: 'Bulbasaur';  

Il colore dell'ombra di sovrapposizione utilizza il suddetto RGBA () funzione con 0.9 per il valore alfa per rendere trasparente l'overlay.

Oltre al colore dell'overlay box-shadow, il CSS sopra riportato aggiunge anche le regole che sono individuali per ogni Pokemon - l'immagine come immagine di sfondo e il nome.

E questo è tutto, siamo pronti con la nostra sovrapposizione di immagini colorate solo CSS. Dai un'occhiata al codice di tutti i Pokemon nella penna qui sotto.