Ombre interne nei CSS: immagini, testo e oltre

Le ombre nei CSS sono facili e veloci, sia che si tratti di un box-shadow che di un text-shadow. Ma quanto siete a vostro agio con le ombre interne? Siete in grado di realizzare un box-shadow inset? Come potete fare la stessa cosa su un testo?

Oggi impareremo alcune semplici tecniche di inset shadow che si possono realizzare con poche righe di codice. Vi illustrerò sia la sintassi box-shadow che quella text-shadow e come modificarle per realizzare un inset shadow.

Esplora le risorse digitali

Sintassi dell'ombra

Prima di passare alle ombre inset, vediamo la sintassi di base per costruire i due diversi tipi di ombre CSS. Anche se avete già codificato queste ombre, vale la pena di fare un rapido ripasso per essere tutti sulla stessa pagina.

Box-Ombra

Le ombre dei riquadri sono probabilmente il tipo più comune di ombre dei CSS. Le possibilità di utilizzo sono incredibilmente varie e gli sviluppatori hanno ideato ogni tipo di applicazione fantastica. La sintassi delle ombre dei riquadri è in realtà piuttosto complessa e comprende sei valori distinti. Inizieremo dando un'occhiata a cinque dei più comuni.

Come si può vedere, i valori elencati sopra sono: offset orizzontale, offset verticale, raggio di sfocatura, raggio di diffusione e colore. I primi due valori, offset orizzontale e verticale, sono abbastanza semplici: i valori positivi spingono l'ombra rispettivamente verso destra e verso il basso, mentre i valori negativi la spingono verso sinistra e verso l'alto. Ecco un esempio di entrambi:

Gli ultimi due valori, il raggio di sfocatura e il raggio di diffusione, sono un po' più complicati. La domanda più grande che ci si può porre è: qual è la differenza? Per rispondere a questa domanda, analizziamo prima quello con cui probabilmente si ha più familiarità: il raggio di sfocatura.

Come si può vedere, nessun raggio di sfocatura produce un'ombra con un bordo duro, mentre un raggio di sfocatura elevato produce un bordo sfocato. Piuttosto semplice, no? Che dire allora del raggio di diffusione? In cosa differisce? Un'immagine vale più di mille parole, quindi ecco un esempio:

Come si può notare, senza influire sulla sfocatura dell'ombra, la diffusione dell'ombra essenzialmente aumenta e diminuisce la superficie occupata dall'ombra. Se si pensasse alla dimensione dell'ombra, non sarebbe anche lontano.

Se si tralascia il raggio di sfocatura o il raggio di diffusione, i loro valori saranno impostati a zero. Guardando in giro per il web, è probabile che la maggior parte delle demo che si incontrano, comprese quelle su Design Shack, non abbiano un raggio di diffusione definito.

Ombra del testo

Ora che abbiamo una solida comprensione del funzionamento della sintassi del box-shadow, possiamo dare un'occhiata alla sintassi dell'altro tipo di ombra CSS: l'ombra del testo. Fortunatamente, questa sintassi è ancora più semplice di quella del box-shadow.

Come si può vedere, la maggior parte dei valori sono gli stessi, quindi se si capisce uno, si capisce anche l'altro. È interessante notare che non si ha accesso alla diffusione di un'ombra con text-shadow. Sarebbe bello se lo si facesse, ma purtroppo la funzione non c'è.

Box-ombra inseriti

Bene, ora che abbiamo gettato le basi e che conoscete perfettamente la sintassi delle ombre CSS, è il momento di passare alla creazione di ombre "interne" o "inset". Per trasformare un'ombra in un'ombra inset, tutto ciò che dobbiamo fare è aggiungere una singola parola, "inset".

Per questo motivo abbiamo iniziato con la sintassi di base. Nel suo insieme, il codice box-shadow può sembrare piuttosto intimidatorio, ma se lo si scompone come abbiamo fatto noi, in realtà è molto semplice.

Tutti i valori qui presenti si comportano essenzialmente allo stesso modo, solo che l'ombra è posizionata all'interno del riquadro. Qui possiamo vedere come la diffusione di un'ombra possa ancora avere un grande impatto sull'aspetto dell'ombra:

Si noti che questa volta ho usato un colore RGBa invece di un valore esadecimale. Questo è ottimo per le ombre perché il valore alfa fornisce un modo rapido e semplice per schiarire o scurire l'ombra.

Con immagini

È abbastanza facile inserire un box-shadow in un div vuoto, ma cosa succede se si vuole inserire un box-shadow in un'immagine. Sembra semplice, ma la realtà è un po' complicata. Vediamo un po' di codice e il suo effetto finale. Inizieremo con un semplice tag image.

Ora lo inseriamo nel nostro CSS e aggiungiamo un box-shadow inset. Si potrebbe pensare che qualcosa di simile funzioni:

Purtroppo il risultato è il seguente: l'immagine funziona bene, ma l'ombra non è visibile!

Come si fa a creare un'ombra interna in un'immagine? Esistono diversi modi per farlo, tutti con pro e contro. Vediamo due soluzioni molto diffuse.

La prima soluzione consiste nell'avvolgere l'immagine in un div vincolato alla stessa dimensione dell'immagine, quindi impostare l'ombra su tale div, utilizzando un po' di posizionamento relativo e di z-index sull'immagine stessa. Ecco come appare nel codice:

Questa soluzione è praticabile, ma comporta un po' di markup in più e un bel po' di CSS in più. In alternativa, si può semplicemente eliminare l'immagine HTML e inserire un'immagine di sfondo tramite i CSS. Con questo metodo, l'immagine non copre l'ombra, ma viene posizionata sotto di essa per impostazione predefinita.

Se combiniamo queste tecniche con un'ampia diffusione, possiamo ottenere un effetto vignetta piuttosto drammatico utilizzando solo i CSS.

Ombreggiature del testo inserite

Anche quando sono più complesse, le ombre di riquadro insellate sono piuttosto facili da capire. Se si aggiunge la parola "inset", l'ombra a goccia diventa un'ombra interna. Semplicissimo.

Sfortunatamente, l'ombra del testo ci dà molti più problemi: il valore "inset" non è compatibile con l'ombra del testo, quindi una cosa del genere non funziona:

Il funzionamento è piuttosto bizzarro, quindi lo costruiremo in due fasi per farvi capire cosa sta succedendo. Per prima cosa, scriveremo un h1 e applicheremo i seguenti stili:

Abbiamo impostato un colore di sfondo scuro, un'ombra di testo bianca e un colore di riempimento trasparente. Se vi sembra strano, guardate il risultato:

Non è affatto quello che vogliamo! È interessante notare che siamo partiti alla perfezione. L'ingrediente segreto per far funzionare tutto è la proprietà "background-clip" con il valore impostato su "text".

Impostando la proprietà background-clip al testo, possiamo effettivamente agganciare ai limiti del testo tutto ciò che avviene sullo sfondo (immagini, gradienti, colori, ecc.). Se lo facciamo con il codice che abbiamo già impostato, il risultato è questo:

Come si può vedere, abbiamo ottenuto un effetto letterpress davvero piacevole. Il bordo sfocato è stato ritagliato e ora crea l'illusione di un'ombra insellata. Nel frattempo, l'ombra bianca del testo ci fornisce il grado di luminosità per il riempimento dello sfondo e un piccolo effetto di smussatura all'esterno del testo. Se aumentiamo l'ombra da 0,5 a 03., il testo diventa più scuro.

Conclusione

Ecco tutto quello che c'è da sapere su come applicare le ombre inset con i CSS. È un'area interessante da esplorare. Le tecniche non sono molto intuitive e richiedono un po' di lavoro per essere padroneggiate, ma se iniziate con il codice qui sopra sarete dei professionisti in poco tempo.