Utilizziamo le Ombre CSS3

Utilizziamo le Ombre CSS3

Contenuti Extra

Eccoci di fronte ad un nuovo Mercoledì carichi  di buoni propositi per la settimana che sta arrivando, e come potremmo iniziare meglio una settimana del genere se non imparando qualcosa che vi aiuterà nella vostra carriera di Web Designer? Infatti quest’oggi verrete con me a scoprire come sia possibile applicare ombre tramite i CSS3. Avete capito bene ombre in CSS, i giorni in cui ci appoggiavamo a Photoshop per creare accattivanti ombre da applicare ai nostri siti sono finiti!!!

Ma forse siete degli amanti di Photoshop, e creare un ombra vi porterà via soltanto pochi secondi (questo è vero! basta giocare con le impostazioni del livello ed il gioco è fatto!); ma vi siete mai fermati a pensare quanto queste immagini pesino effettivamente? Pensateci un secondo, una immagine per ogni elemento con ombra! Potremmo pensare di utilizzare delle classi ed impostare la nostra ombra come background, ma quanto peserà quel file immagine? 2Kb? 4Kb? E non mi sto riferendo neanche all’uso di PNG trasparenti, che come risaputo pesano un pò di più!

Cosa dareste per impostare una singola regola e vedere applicate ai vostri elementi una gradevole ombra con il puro uso di CSS? Se siete curiosi vi consiglio di continuare a leggere e venire a scoprire una tecnica che salverà innumerevoli Kb alle vostre pagine; mica male come Mercoledì, vero?

Compatibilità Ombre CSS3

Come ormai sarete abituati ecco a voi un pò di teoria, che vi aiuterà ad imprimere in testa i concetti necessari al corretto utilizzo di queste tecniche!
Dai paragrafi precedenti avrete capito che, con l’avvento dei CSS3, per aggiungere un ombra ad un vostro elemento vi basterà una singola regola CSS e l’effetto è servito! Purtroppo questo sarebbe vero se fossimo in un mondo perfetto, dove le regole CSS vengono elaborate nello stesso modo da tutti i browser; ma dobbiamo ancora scontrarci contro i vendor-prefix e la compatibilità cross-browser odierna.

Quindi per prima cosa diamo un’occhiata alla nostra classica tabella ed andiamo a vedere il supporto per le box-shadow:

Compatibilità Ombre CSS3

Eccovi di fronte ad una cruda verità! Internet Explorer non supporta questa proprietà fino alla versione 9; ma, visto che, tutti gli altri browser la supportano non vedo alcun motivo per cui non dovremmo iniziare ad utilizzarle fin da subito!
[ad#Google Adsense]

Dichiariamo una Ombra CSS3

Fatta questa piccola, ma doverosa, premessa non vi resta altro che vedere come si dichiara un’ombra!

Una sola riga di codice CSS e vedrete una semplicissima ombra che circonda il vostro elemento! Ma come potrete personalizzarla??? Semplicemente andando a modificare i dati passati a questa proprietà, andiamo a vedere una immagine che ci aiuterà sicuramente a capire!

La Sintassi delle Ombre CSS3

Come ben spiegato dall’immagine, quando sono presenti tutti i parametri, il primo valore specifica la posizione sull’asse X della vostra ombra, il secondo quella dell’ombra rispetto all’asse Y mentre con il terzo e quarto valore vengono specificati rispettivamente, la sfocatura della vostra ombra ed il suo colore. Prima di andare avanti vorrei farvi soffermare su come è stato possibile impostare il vostro colore. In questo esempio è stata utilizzata la dichiarazione tramite il codice RGB con un canale alpha liberamente impostabile.

Se non sapete cosa sia il canale alpha si può riassumere come il grado di trasparenza che il vostro colore può assumere. Questo valore varia da 0 ad 1, ovvero completamente trasparente oppure completamente opaco e vi permetterà di creare delle ombre ancora più accattivanti e realistiche. L’utilizzo di una ombra creata con un colore semi-trasparente vi permetterà di creare delle ombre foto realistiche, visto che il colore dell’ombra, avendo una trasparenza, potrà adattarsi al colore di sfondo!

Adesso che abbiamo ben chiaro come possiamo utilizzare i colori nelle nostre ombre volevo spostare la vostra attenzione su una porzione di testo che ho scritto precedentemente… Al primo rigo, subito sotto l’immagine, ho evidenziato quando sono presenti tutti i parametri pensavate che fossi uscito pazzo e mettevo in evidenzia parole senza senso?!? Ed invece no! Ho evidenziato volontariamente quella porzione semplicemente perché potrete creare le vostre ombre anche con shortcut di box-shadow! Infatti se vi accontentate di una ombra senza sfumatura e di colore nero pieno potreste voler utilizzare una sintassi di questo genere:

Ecco fatto, adesso il vostro elemento avrà un ombra senza sfumatura di colore nero che si sposterà per 10px sull’asse X e altrettanti per l’asse Y.

Ombre CSS3 e i browser

Io personalmente ho testato questa soluzione, e devo dire che per questa proprietà è presente già un’ottima compatiibilità, browser come FireFox 4, Google Chrome 10 ed Opera 11.01. Purtroppo al momento sembra che anche Safari sia fuori compatibilità… Niente di meglio! Questo mi da la scusa per introdurvi le ombre CSS3 con i vendor-prefix!

Ombre CSS3 su FireFox

Anche se vi ho appena detto che box-shadow funziona correttamente su FireFox 4, questo purtroppo non è vero per le sue versioni precedenti. Per mostrare quindi le vostre ombre anche sulle versioni precedenti di FF non dovrete fare altro che inserire il suo vendor-prefix ed il gioco è fatto!

Facile vero?

Ombre CSS3 su WebKit

Stesso discorso vale anche per i browser che utilizzano WebKit per interpretare il codice HTML presente nelle vostre pagine, ancora una volta con il giusto vendor-prefix tutto è possibile!

Ombre CSS3 su Opera

Opera esegue un esemplare lavoro supportando nativamente la sintassi standard del box-shadow, quindi non avrete assolutamente applicare alcun vendor-prefix per vedere le vostre pagine popolate da accattivanti ombre!

Ombre CSS3 su IE

Qui, come spesso, il discorso si fa leggermente più complicato… La Microsoft ci assicura infatti che a partire dalla versione 9 del loro browser verranno supportate le ombre CSS3 rispettando la sintassi standard, questa è già una ottima notizia! Ma cosa succede se il nostro utente visualizza le nostre pagine con una versione più datata della stessa? Assolutamente niente!

Se vorrete vedere qualche risultato dovrete utilizzare nuovamente una risorsa proprietaria che si presenta così:

Ancora una volta la software house più potente al mondo, non riesce a stare al passo con i tempi e ci offre queste soluzioni che sono praticamente inguardabili!

Ombre CSS3 tutte insieme

Per motivi di chiarezza, vi propongo qua sotto le regole CSS3 che abbiamo utilizzato in questa puntata, ma sappiate fin da subito che le ombre CSS3 non finiscono qua!

Conclusioni

Prima di chiudere la puntata voglio soltanto farvi sapere che torneremo nuovamente a trattare le ombre CSS3 perché ancora sono molte le cose che dobbiamo andare a scoprire, e vi aspetto tutti!!!

Mi sembra che non ci sarebbe stato modo migliore per iniziare un nuovo Lunedì, non credete? Magari non siete completamente daccordo, ma sono sicuro che un giorno vi troverete di fronte allo schermo scervellandovi come andare ad aggiungere ombre alle proprie pagine senza sprecare banda preziosa per la trasmissione di dati, e quel giorno vi verrà in mente questo articolo! E con il sorriso sulle labbra sarete pronti a risolvere il vostro problema!

Lascia il tuo Pensiero

2 Responses to “Utilizziamo le Ombre CSS3”

  1. Antonio Brocco

    Ciao,
    molto interessante il tuo articolo, solo una cosa sto cercando di capire..è possibile in questo modo creare un ombra che “giri” intorno all’intero sito web in modo da poter “distaccare” tutti i contenuti da background?
    Sto impazzendo per cercare di capire come fare, se con un nuovo container o div con l’altezza e la larghezze dell’interna pagina web oppure in altro modo!!!
    Tu in che modo la realizzeresti?

    Rispondi
    • Andrea Barghigiani

      Ciao Antonio,

      non ho ben capito la tua richiesta, la soluzione potrebbe variare molto anche dal tipo di sito che stai sviluppando. Se hai un contenitore con un colore di sfondo diverso da quello del body potresti applicare a lui le ombre necessarie per fare in modo di visualizzarne una unica che “eleva” il tuo contenuto dalla posizione del body.

      Se invece gli elementi sono diversi dovresti applicare l’ombra a tutti gli elementi che si trovano sopra al body.

      Scusa se sembro generico ma con le spiegazioni che mi hai fornito non riesco ad essere più preciso.

      Rispondi