CSS Shadows tutti i quattro lati di div

Question

Voglio raggiungere questo obiettivo in CSS - non CSS3 come io voglio che sia supportato da tutti i browser

Per esempio un div con contenuti, con le ombre su ogni lato. L'area superiore sarà utilizzato per la navigazione. Ho cercato di tutorial, ma finora senza alcun risultato. Aiuto!

Answer 1

Come detto Ventus non è possibile utilizzare le ombre css con esempio (solo IE9). Ma è possibile utilizzare shadowOn . E 'un ottimo plugin jQuery e molto facile da usare. Con esso si avrà la compatibilità cross browser.

Answer 2

scatola di ombra opera in tutto mordern [IE> 8] Browser, questo codice utilizza le immagini e funziona in tutti i browser di versioni di IE sotto 9.

 box-shadow:2px 2px 10px 10px #C9C9C9;
 -webkit-box-shadow:2px 2px 10px 10px #C9C9C9;
 -moz-box-shadow:2px 2px 10px 10px #C9C9C9;

  /* For IE<9 */  
  filter:
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=0,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=45,strength=2),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=90,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=135,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=180,strength=10),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=225,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=270,strength=5),
  progid:DXImageTransform.Microsoft.Shadow(color=#C9C9C9,direction=315,strength=2);

scatola ombra supportato da IE 9 in poi.

Answer 3

CSS3pie è uno strumento che consente di utilizzare alcune proprietà CSS3 in IE.

Quello che stai cercando di fare è abbastanza diffusa CSS3 nei browser più recenti, e emulato molto bene (e facilmente) in IE con il file HTC è possibile scaricare da lì.

Per quanto riguarda il margine di profitto, vedo solo 2 elementi, con la parte superiore un galleggiava a destra, per esempio. Dovreste giocare con z-index per nascondere le ombre in eccesso. In quel sito c'è anche un effetto molto simile, si dovrebbe essere in grado di adattarlo alle proprie esigenze.

Answer 4

Questo dovrebbe funzionare in tutti i browser:

    .allSidesShadow {
        box-shadow: 2px 2px 19px #aaa;
        -o-box-shadow: 2px 2px 19px #aaa;
        -webkit-box-shadow: 2px 2px 19px #aaa;
        -moz-box-shadow: 2px 2px 19px #aaa;

        /* For IE 5.5 - 7 */
        /* for IE4 - IE7 */
        filter:
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=1, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=90, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=180, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=270, Color=#C4C4C4);
        -ms-filter: "
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=1, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=90, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=180, Color=#C4C4C4),
            progid:DXImageTransform.Microsoft.Shadow(Strength=9, Direction=270, Color=#C4C4C4)
        ";
    }

Answer 5

La risposta inviato da Sekar, ha bisogno di un po 'di editing,

box-shadow:2px 2px 10px 10px #C9C9C9;
-webkit-box-shadow:2px 2px 10px 10x #C9C9C9;
-moz-box-shadow:2px 2px 10px 10px #C9C9C9;

questo lavoro doesnot su IE (ho controllato su IE8).

Answer 6

box-shadow: inset 0 0 3px 0 #000;

Mezzi 0 pixel a sinistra, a destra 0 pixel, 3px sfocatura, 0 pixel diffusa, utilizzare un colore leggermente più scuro BGS.

Answer 7

Non posso vedere la tua foto ora, ma per tutte le ombre laterali Io uso il sottostante Codice:

box-shadow: 0 0 5px 0 #000;

Al posto della 5px utilizzare la vostra taglia.

Answer 8

È necessario creare diverse immagini. Uno per il lato sinistro. Uno per il diritto. Uno per la parte inferiore, ecc e poi avere diverse div e di impostare lo sfondo per ciascuno di essi.

Answer 9

È possibile farlo con tre div, ammesso che sono tutti la stessa larghezza (fissa):

<div class='top'>
</div>
<div class='middle'>
<p>Hello World!</p>
</div>
<div class='bottom'>
</div>

.top{
  background:url('top.png');
  height:20px;
  width:800px;
}
.middle{
  background:url('middle.png') repeat-y;
  width:800px;
  }
.bottom{
  background:url('bottom.png');
  height:20px;
  width:800px;
}

Answer 10

In alternativa, si può fare una grande immagine, e utilizzarla come sfondo per l'intera area del contenuto; poi codificare le posizioni e le dimensioni degli elementi contenuti.

Answer 11

È possibile inserire il seguente codice nella div al fine di ombre su tutti e quattro i lati.

-webkit-box-shadow: 0 0 10px rgba(0,0,0,.1);
box-shadow: 0 0 10px rgba(0,0,0,.1);    

Answer 12

sotto la linea ha funzionato per me. Ho usato un'immagine di dimensioni 600x600.

-webkit-filter: drop-shadow(-10px 8px 30px #000) !important;