Magazine Architettura e Design

Proprieta’ box shadow in CSS3

Da Iwebdesigner @Iwebdesigner_it

proprieta-box-shadow-css3

La proprieta’ box-shadow di CSS3 serve per creare ombre su un blocco.

Questa proprieta’ viene utilizzata cosi’:

box-shadow:1px 2px 3px 4px black;

I valori inseriti corrispondono, da sinistra verso destra:

(1px) spostamento ombra verso destra;

(2px) spostamento ombra verso il basso;

(3px) valore sfocatura dell’ombra;

(4px) raggio dell’ombra;

(black) colore dell’ombra.

Tutto molto semplice, ma se si omette un valore ricordiamoci che il predefinito e’ zero.

Per creare un’ombra interna usiamo la parola “inset”. Se vogliamo attribuire al nostro blocco sia un’ombra interna ed esterna, basta separarle da virgole:

box-shadow:1px 2px 3px 4px black,1px 2px 3px 4px white inset;

Questo e’ tutto per la proprieta’ box-shadow di CSS3.

Alla prossima!


Potrebbero interessarti anche :

Ritornare alla prima pagina di Logo Paperblog

Possono interessarti anche questi articoli :

  • Tutte le novita’ di CSS3

    Tutte novita’ CSS3

    CSS3 e’ un’estensione di CSS 2.1 che aggiunge nuove e potenti funzionalita’. Non corrisponde piu’ ad un unica specifica, ma e’ stato diviso in moduli. Leggere il seguito

    Da  Iwebdesigner
    ARCHITETTURA E DESIGN, CONSIGLI UTILI, EBUSINESS, LIFESTYLE, TECNOLOGIA
  • I vantaggi di usare CSS3

    vantaggi usare CSS3

    Il CSS3 permette di creare effetti molto gradevoli, aggiungendo un livello di pulizia e ricchezza ai progetti web. Ma la maggior parte degli effetti visivi che... Leggere il seguito

    Da  Iwebdesigner
    ARCHITETTURA E DESIGN, CONSIGLI UTILI, EBUSINESS, LIFESTYLE, TECNOLOGIA
  • Proprieta’ text shadow in CSS3

    Proprieta’ text shadow CSS3

    La proprieta’ text-shadow in CSS3 permette di creare delle ombre sul testo. La proprieta’ viene inserita col seguente codice:text-shadow:1px 2px 3px black;... Leggere il seguito

    Da  Iwebdesigner
    ARCHITETTURA E DESIGN, CONSIGLI UTILI, EBUSINESS, LIFESTYLE, TECNOLOGIA
  • La proprieta’ animation in CSS3

    proprieta’ animation CSS3

    La proprieta’ animation e’ utilizzata per modificare i valori delle proprieta’ CSS piu’ volte nel corso del tempo, proprio come una linea temporale Flash.Vediam... Leggere il seguito

    Da  Iwebdesigner
    ARCHITETTURA E DESIGN, CONSIGLI UTILI, EBUSINESS, LIFESTYLE, TECNOLOGIA
  • Transform 2D in CSS3

    Transform CSS3

    Esistono diversi tipi di trasformazione 2D in CSS:Rotate (angolo): permette di applicare una rotazione in base all’angolo;Scale (x,y), scaleX (x) e scaleY (y)... Leggere il seguito

    Da  Iwebdesigner
    ARCHITETTURA E DESIGN, CONSIGLI UTILI, EBUSINESS, LIFESTYLE, TECNOLOGIA
  • Creare uno slideshow in CSS3 semplice ed elegante

    Creare slideshow CSS3 semplice elegante

    In questo tutorial creiamo uno slideshow di immagini solo in CSS3. Ricordate che questo tutorial funziona, per adesso, su Chrome e Safari.Iniziamo subito! Leggere il seguito

    Da  Iwebdesigner
    ARCHITETTURA E DESIGN, CONSIGLI UTILI, EBUSINESS, LIFESTYLE, TECNOLOGIA
  • Costruire un box di ricerca in Css3

    Costruire ricerca Css3

    Credo che una casella di ricerca sia l’elemento piu’ comune per l’interfaccia utente. Che si tratti di un sito web o di un’applicazione, il box di ricerca c’e’... Leggere il seguito

    Da  Iwebdesigner
    ARCHITETTURA E DESIGN, CONSIGLI UTILI, EBUSINESS, LIFESTYLE, TECNOLOGIA