Web e Code Script

Ombra CSS3. Come aggiungerla a testo, div e immagini

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.

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.

.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.




emoticons

avatar
Autore: Valerio Del Re

Dott. in Comunicazione e Pubblicità per le Organizzazioni,
Grafico e Web Designer freelance, CEO presso Robadagrafici


Cosa ne pensi? Esprimi la tua opinione.
Scrivi un commento.

Loading Facebook Comments ...

Ti potrebbero interessare anche:


font-awesome

Icon Font Awesome. Come inserire sul sito icone tramite font

Le icone sono ormai uno standard per chi realizza siti internet. Permettono infatti un’ottima personalizzazione per lo stile […]


testare-sito-mobile-online

Testare sito mobile online. Effettua il test con Google

Se sei un webdesigner sicuramente nell’ultimo periodo ti starai dedicando allo studio della tecnica del responsive design. Un […]


orologio-esadecimale

What colour is it? L’orologio esadecimale

Oggi vi segnalo un sito creativo, da veri nerd, per appassionati di grafica e web. Si tratta del […]


sfumature-css3

Come creare una sfumatura con CSS3

CSS3 ha tantissime potenzialità che ogni web designer dovrebbe conoscere per evitare di fare un uso spropositato di […]


css3-border-radius

Come smussare angoli di immagini e div con CSS3 Border Radius

Con Html5 e CSS3 il mondo del web ha fatto un notevole passo avanti, offrendo un’esperienza più ricca […]


mappa-vettoriale-jquery

Mappa del mondo con ingrandimento in jQuery

Creare una mappa navigabile per il sito internet è diventata ormai pratica comune, specialmente quando si tratta di […]


atlas

Arriva Atlas, la concorrenza di Facebook a Google

È ufficiale: Google ha un concorrente. Si chiama Atlas ed è di proprietà di Facebook. Quest’ultimo aveva acquistato […]


jquery-document-ready-function

La base della sintassi di jQuery: $(document) .ready()

Se vi state avvicinando da poco a jQuery e state iniziando a studiarlo, avrete notato che spesso il […]


php-if-else

PHP: gestire le condizioni con le istruzioni if e else

Se state realizzando un sito nel linguaggio di programmazione Php, magari con il CMS WordPress, imparare a gestire […]


Shares

Robadagrafici.com non è una testata giornalistica in quanto viene aggiornato senza alcuna periodicità. Non può pertanto considerarsi prodotto editoriale ai sensi della legge 62/2001. Le immagini e i testi pubblicati sono valutati come di pubblico dominio: qualora il loro uso violasse diritti d'autore, lo si comunichi all'autore del blog che provvederà alla loro pronta rimozione.
Tutti i contenuti sotto Licenza Creative Commons. Marchi e loghi di soggetti terzi utilizzati in questo sito sono di proprietà esclusiva dei rispettivi proprietari.
Roba da Grafici © 2011-2016 - Progetto a cura di ServiziWeb Srl - Privacy & Cookies Policy