Ombres CSS quatre côtés div

Question

Je veux y parvenir en CSS - pas CSS3 comme je veux qu'il soit pris en charge par tous les navigateurs bg with shadows on all sides http://img831.imageshack.us/img831/5339/27900717.png

soit une teneur contenant div, avec l'ombre sur tous les côtés. La zone supérieure sera utilisée pour la navigation. J'ai cherché des tutoriels mais jusqu'ici en vain. Aidez-moi!

Answer 1

Comme Ventus dit n'est pas possible d'utiliser css ombres avec ie (seulement ie9). Mais vous pouvez utiliser shadowOn. C'est un excellent plugin jquery et très facile à utiliser. Avec cela, vous aurez une compatibilité croisée avec le navigateur.

Answer 2

Vous devez créer plusieurs images. Un pour le côté gauche. Un pour la droite. Un pour le fond, etc. Et puis avoir plusieurs div et définir le fond pour chacun d'eux.

Answer 3

Vous pouvez le faire avec trois divs, en supposant qu'ils sont tous les mêmes (fixe) largeur:

<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 4

Alternativement, vous pouvez faire une grande image, et l'utiliser comme arrière-plan pour l'ensemble de la zone de contenu ; puis coder en dur les positions et les tailles des éléments contenus.

Answer 5

CSS3pie est un outil qui vous permet d'utiliser certaines propriétés css3 dans IE. Ce que vous essayez de faire est assez répandu css3 dans les navigateurs plus récents, et très bien émulé (et facilement) dans IE avec le fichier .htc, vous pouvez télécharger à partir de là. En ce qui concerne le balisage, je ne vois que 2 éléments, avec le haut flottant à droite, par exemple. Vous devriez jouer avec z-index pour cacher les ombres excessives. Dans ce site il y a aussi un effet très similaire, vous devriez être capable de l'adapter à vos besoins.

Answer 6

Cela devrait fonctionner dans tous les navigateurs:

 

    .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 7

Shadow Box fonctionne dans tous les mordern [IE]> 8 navigateurs, ce code utilise aucune image et fonctionne dans tous les navigateurs dans les versions IE ci-dessous 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); 

Ombre de boîte prise en charge à partir d'IE 9.

Answer 8

La réponse publié par Sekar, a besoin d'un peu de montage,

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

ce travail de doesnot sur IE (j'ai vérifié sur IE8).

Answer 9

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

moyens 0 pixel gauche, 0 droite pixel, 3px flou, 0 diffus pixel, utilisez une couleur légèrement plus foncée que le BGS.

Answer 10

Je ne peux pas voir votre image maintenant, mais pour toutes les ombres côté j'utiliser le code ci-dessous:

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

Au lieu de 5px utiliser votre taille.

Answer 11

Vous pouvez placer le code suivant dans la div pour faire tomber des ombres sur les quatre côtés.

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

Answer 12

La ligne ci-dessous a fonctionné pour moi.J'ai utilisé une image avec des dimensions 600x600. Tristement, mais IE n'affiche pas les ombres faites avec CSS.

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