Ombres CSS quatre côtés __gVirt_NP_NNS_NNPS<__ de div

StackOverflow https://stackoverflow.com/questions/3467452

  •  28-09-2019
  •  | 
  •  

Question

Je veux y parvenir en CSS - pas CSS3 comme je veux qu'il soit pris en charge par tous les navigateurs «

soit un div contenant du contenu, avec les ombres sur tous les côtés. La zone de haut sera utilisé pour la navigation. J'ai cherché des tutoriels, mais jusqu'à présent sans succès. Aide!

Était-ce utile?

La solution

Comme dit Ventus est impossible d'utiliser des ombres avec css-à-dire (seulement IE9). Mais vous pouvez utiliser shadowOn . Il est un excellent plugin jquery et très facile à utiliser. Avec elle, vous aurez la compatibilité du navigateur croix.

Autres conseils

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 9 ci-dessous. 

 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);

Shadow Box soutenu par IE 9 partir.

CSS3pie est un outil qui vous permet d'utiliser certaines propriétés CSS3 dans IE.

Qu'est-ce que vous essayez de faire est assez css3 répandue dans les navigateurs plus récents, et émulé vraiment bien (et facilement) dans IE avec le fichier .htc vous pouvez télécharger à partir de là.

En ce qui concerne le balisage, je vois seulement deux éléments, avec un haut flottait à droite, par exemple. Il faudrait jouer avec z-index pour cacher les ombres en excès. Dans ce site il y a aussi un effet très similaire, vous devriez être en mesure de l'adapter à vos besoins.

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)
        ";
    }

La réponse affichée 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). 

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

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

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

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

Au lieu de 5px utiliser votre taille.

Vous devez créer plusieurs images. L'un pour le côté gauche. Un pour le droit. L'un pour le fond, etc. Et puis ont plusieurs div et de définir l'arrière-plan pour chacun d'eux.

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;
}

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.

Vous pouvez placer le code suivant dans la div afin de déposer 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);

Ci-dessous la ligne a fonctionné pour moi. J'ai utilisé une image avec des dimensions 600x600. 

-webkit-filter: drop-shadow(-10px 8px 30px #000) !important;
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top