Impara anche tu a sfruttare al meglio il web con strumenti gratuiti web2.0 e software realmente utili.

css3 – effetto ombra agli oggetti

I css3 ci consentono di alleggerire la pagina con istruzioni che vanno ad impattare non poco sulla grafica del progetto. In passato dovevamo rivolgerci al photoshop o simili per aggiungere l’effetto ombra agli oggetti appesantendo il peso ( kb ) della pagina con immagini che mostravano l’effetto ombra.Vediamo quali sono le istruzioni CSS3 che ci consentono di ottenere un effetto ombra.

Esempio: css3 effetto ombra con box-shadow

-moz-box-shadow: 0 3px 5px rgba(0,0,0,10);
-webkit-box-shadow: 0 3px 5px rgba(0,0,0,10);
-khtml-box-shadow: 0 3px 5px rgba(0,0,0,10);
box-shadow: 0 3px 5px rgba(0,0,0,10);

Ho creato un ombra sfasata verticalmente di 3 pixel con raggio di 5 pixel
Ovviamente modificando i valori potrò ottenere l’effetto ombra che preferisco.

Si precisa che attualmente non tutti i browser supportano ancora questo tipo di codice css3 , pertanto potreste non visualizzare correttamente i comandi su elencati.

Testi consigliati per imparare i CSS3

  • Share/Bookmark

, ,

Comments are currently closed.