CSS Box Shadow - Trucchi CSS

Anonim

Utilizzato per proiettare ombre su elementi a livello di blocco (come i div).

.shadow ( -moz-box-shadow: 3px 3px 5px 6px #ccc; -webkit-box-shadow: 3px 3px 5px 6px #ccc; box-shadow: 3px 3px 5px 6px #ccc; )
  1. L'offset orizzontale dell'ombra, positivo significa che l'ombra sarà a destra del riquadro, un offset negativo metterà l'ombra a sinistra del riquadro.
  2. L'offset verticale dell'ombra, uno negativo significa che il riquadro-ombra sarà sopra il riquadro, uno positivo significa che l'ombra sarà sotto il riquadro.
  3. Il raggio di sfocatura (opzionale), se impostato a 0 l'ombra sarà nitida, maggiore è il numero, più sfocata sarà.
  4. Il raggio di diffusione (opzionale), i valori positivi aumentano la dimensione dell'ombra, i valori negativi diminuiscono la dimensione. L'impostazione predefinita è 0 (l'ombra ha le stesse dimensioni della sfocatura).
  5. Colore

Esempio

Ombra interiore

.shadow ( -moz-box-shadow: inset 0 0 10px #000000; -webkit-box-shadow: inset 0 0 10px #000000; box-shadow: inset 0 0 10px #000000; )

Esempio

Internet Explorer Box Shadow

Hai bisogno di elementi extra ...

 Box-shadowed element 
.shadow1 ( margin: 40px; background-color: rgb(68,68,68); /* Needed for IEs */ -moz-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); -webkit-box-shadow: 5px 5px 5px rgba(68,68,68,0.6); box-shadow: 5px 5px 5px rgba(68,68,68,0.6); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30); -ms-filter: "progid:DXImageTransform.Microsoft.Blur(PixelRadius=3,MakeShadow=true,ShadowOpacity=0.30)"; zoom: 1; ) .shadow1 .content ( position: relative; /* This protects the inner element from being blurred */ padding: 100px; background-color: #DDD; )

Solo un lato

Usando un raggio di diffusione negativo, puoi schiacciare l'ombra di una scatola e spingerla fuori da un bordo di una scatola.

.one-edge-shadow ( -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; )

Relazionato

  • CSS3: valore diffuso e box-shadow su un solo lato
  • Mozilla Docs
  • Bordi multipli con box-shadow.