CSS3: la proprietà box-shadow

La proprietà box-shadow dei CSS3 è una di quelle richieste a gran voce dalla comunità degli sviluppatori. Il suo scopo è quello di gestire le ombre di un box.

Questa proprietà è in grado di gestire sia le ombre esterne sia quelle interne.
border-shadow
Da questa semplice figura risulta subito chiara l’enorme utilità di questa proprietà.
Cerchiamo allora di comprendere come usarla, partendo dal capire come realizzare un’ombra esterna.
Ad esempio, con il seguente codice:

box-shadow: 30px 30px 5px 5px rgba(0,0,0,0.2);

otterremo il seguente risultato.
border-shadow

Osserviamo la figura che segue per comprendere il perché di tale risultato.
border-shadow

I primi due valori indicano lo spostamento dell’ombra rispetto al centro del nostro box (indicato in figura con un pallino rosso). Il primo valore indica lo spostamento orizzontale verso destra, il secondo valore indica lo spostamento verticale verso il basso. In entrambi i casi possono essere usati valori negativi, causando gli spostamenti inversi.
Il terzo valore (l’unico non cerchiato) indica il raggio di sfocatura. I valori negativi non sono ammessi. Se questo valore è zero, il bordo dell’ombra è netto, senza alcuna sfocatura. In caso contrario, maggiore è il valore, più il bordo dell’ombra sarà sfocato.
Il quarto valore consente di espandere (per valori positivi) o contrarre (per valori negativi) l’ombra originale.
Infine la funzione rgba() si occupa di decidere colore e trasparenza dell’ombra.
Per disegnare un’ombra interna basta aggiungere la parola chiave inset alla fine dell’istruzione:

box-shadow: 5px 5px 5px 5px rgba(0,0,0,0.2) inset;

border-shadow

Se infine volessimo disegnare contemporaneamente entrambe le ombre, basta dividere i due codici con una virgola:

box-shadow: 30px 30px 5px 5px rgba(0,0,0,0.2), 5px 5px 5px 5px rgba(0,0,0,0.2) inset;

border-shadow

Possiamo vedere il risultato seguendo il seguente link:
https://www.alessandrostella.it/lato_client/css3/css3_25.html

That’s all! 🙂

Ti è piaciuto questo articolo?
Allora probabilmente ti interesserà sapere che è stato tratto direttamente da un mio manuale di quasi 500 pagine che ti guida passo-passo alla scoperta e all'utilizzo di tali tecnologie!!!
Clicca sull'immagine qui sotto e informati!
ebook html5 css3 javascript

Hai letto questi articoli?

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *