Web e code script visite 16

Ombra CSS3. Come aggiungerla a testo, div e immagini

2 min

CSS3 è una rivoluzione. Ci permette di aggiungere tanti effetti grafici agli oggetti presenti nelle nostre pagine web, senza dover a tutti i costi fare ricorso alle immagini.

Abbiamo visto qualche giorno fa come sia possibile arrotondare gli angoli di div ed immagini con CSS3 grazie alla proprietà border-radius. Oggi invece scopriremo come aggiungere l’ombra a testo, div e immagini.

Il termine inglese che indica l’ombra è shadow.

Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo
Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo

Come aggiungere l’ombra CSS3 al testo

Niente di più semplice, basta aggiungere alla proprietà text-shadow quattro valori, ossia:

  • x-offset, lo spostamento sull’asse x
  • y-offset, lo spostamento sull’asse y
  • blur radius, la sfocatura dell’ombra
  • color, il colore dell’ombra

Vediamo quindi un esempio pratico, proviamo ad aggiungere la proprietà text-shadow ad un elemento. Potrebbe essere un tag h, p o em (solo per citarne alcuni). In questo caso abbiamo deciso di associarlo ad una classe (che decidiamo per convenzione di chiamare shadow). Il risultato ottenuto sarà il seguente:

.shadow {text-shadow: 2px 4px 2px #000}

Semplice vero? Possiamo anche aggiungere più di un’ombra CSS3 ad un elemento, separando i set di valori con una virgola. Ovviamente la seconda ombra sarà sotto la prima.

Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo
Contenuto bloccato: accettare utilizzo dei cookie e ricaricare la pagina per visualizzarlo

.shadow {text-shadow: 2px 4px 2px #000, 7px 10px 3px #CCC}

Il colore può essere specificato in valori hex, RGB, RGBA o HSLA.

Come aggiungere l’ombra CSS3 a div e immagini

La procedura per aggiungere l’ombra ad altri elementi non si discosta molto dalla precedente (inclusa la possibilità di aggiungere ombre multiple). I valori sono gli stessi di text-shadow, ma ad essi si aggiungono i facoltativi:

  • inset, per posizionare l’ombra all’interno dell’elemento
  • spread, per espandere o restringere l’ombra

Altra importante differenza, box-shadow ha minor supporto e richiede i prefissi del produttore per alcune versioni dei browser. Dal seguente esempio potrete vedere come andrà compilato il vostro CSS per un’ombra di base:

.shadow {
-moz-box-shadow: 2px 4px 2px #000;
-webkit-box-shadow: 2px 4px 2px #000;
box-shadow: 2px 4px 2px #000;
}

In questo caso invece applichiamo il valore inset, per l’ombra interna:

.inset-shadow {
-moz-box-shadow: inset 2px 4px 2px #000;
-webkit-box-shadow: inset 2px 4px 2px #000;
box-shadow: inset 2px 4px 2px #000;
}

Il valore spread, per certi versi inutile, permette un certo ingrandimento dell’ombra CSS3 attraverso un quarto valore positivo, sempre espresso in px

.spread-shadow {
-moz-box-shadow: 2px 4px 2px 2px #000;
-webkit-box-shadow: 2px 4px 2px 2px #000;
box-shadow: 2px 4px 2px 2px #000;
}

ombra-css3-shadow-box

Uno strumento online gratuito per il box shadow

Spero abbiate capito come funziona la proprietà box-shadow di CSS3. Per i più pigri esistono tool online gratuiti che creano l’ombra CSS3 al posto vostro. La comodità è che sono WYSIWYG (“quello che vedi è quello che ottieni”), quindi potete vedere subito il risultato in fase di elaborazione e scegliere i valori che fanno maggiormente al caso vostro.

Il sito in questione è Easy CSS3 Generator.
Alla prossima.

Riproduzione riservata © La riproduzione è concessa solo citando la fonte con link all'articolo. Condividi l'articolo


Articolo a cura di: Del Re Valerio
Dott. in Comunicazione e Pubblicità per le Organizzazioni. Sono l'ideatore del blog Robadagrafici.com e mi occupo di comunicazione visiva, grafica e web, per le aziende.

Lascia un commento

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



Potrebbe anche interessarti

webdesign

Web e code script

Icone di Natale 2017 in png e vettoriali da scaricare gratis

3 minSi avvicina la festività del Natale e noi creativi dobbiamo farci subito…

webdesign

Web e code script

Come alleggerire file png online

1 min Sul filone dello scorso articolo che parlava dell’importanza della velocità del…

webdesign

Web e code script

Come alleggerire il caricamento delle immagini del sito

1 min Tempo fa vi avevo parlato di PageSpeed Insights, uno strumento di…