Empêcher l'ombre de la boîte de s'afficher sur un côté spécifique

Question

Est-il possible de créer un css box-shadow dans laquelle, indépendamment de la valeur de flou, l'ombre n'apparaît que sur les côtés?

Par exemple, si je veux créer un div avec des ombres sur les côtés gauche et droit et pas d'ombre sur le haut ou le bas. Le div n'est pas en position absolue et sa hauteur est déterminée par le contenu.

-- Edit --

@ricebowl: je vous remercie de votre réponse. Peut-être que vous pouvez aider à créer une solution complète pour résoudre les problèmes indiqué dans ma réponse à votre solution... Ma page de configuration est comme suit:

<div id="container">
    <div id="header"></div>
    <div id="content"></div>
   <div id="clearfooter"></div>
</div>
<div id="footer"></div>

Et CSS comme ceci:

#container {width:960px; min-height:100%; margin:0px auto -32px auto; 
       position:relative; padding:0px; background-color:#e6e6e6; 
       -moz-box-shadow: -3px 0px 5px rgba(0,0,0,.8), 
       3px 0px 5px rgba(0,0,0,.8);}
#header   {height:106px; position:relative;}
#content   {position:relative;}
#clearFooter {height:32px; clear:both; display:block; padding:0px; margin:0px;}
#footer  {height:32px; padding:0px; position:relative; width:960px; margin:0px 
           auto 0px auto;}

Answer 1

Il y a un quatrième distance vous pouvez définir appelé la propagation de décalage, qui se déplace à l'ombre ou sur les 4 côtés. Donc, si vous réglez que le négatif de l'effet de flou de distance, ce sera décalage de l'ombre vers l'intérieur par la même distance que le flou s'étend l'ombre vers l'extérieur de manière efficace de le cacher. Bien sûr, ce sera également déplacer l'ombre vers l'intérieur sur le côté, vous ne souhaitez qu'il apparaisse de sorte que vous aurez besoin d'augmenter le décalage par l'effet de flou de distance pour annuler cela. c'est à dire

box-shadow: (horizontal + blur) 0px (blur) (-blur) color;

Donc dans votre exemple:

box-shadow: -8px 0px 5px -5px rgba(0,0,0,.8), 8px 0px 5px -5px rgba(0,0,0,.8);

Answer 2

Vous pouvez également utiliser clip: rect (0px, 210px, 200px, -10px);

Malheureusement, je n'ai jamais réussi à trouver un moyen de le faire fonctionner avec une boîte de taille flexible.

Je l'utilise souvent pour les menus déroulants où je ne veux que de l'ombre sur les côtés et le bas. Dans ce cas, je viens de définir les valeurs de clip droite et inférieure à un certain nombre élevé, comme

clip: rect (0px, 1000px, 1000px, -10px); / * Découpez le haut de l'ombre de la boîte * /

 #box{
    box-shadow:             0px 0px 10px rgba(0, 0, 0, 0.7);
    -moz-box-shadow:     0px 0px 10px rgba(0, 0, 0, 0.7);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.7);
    clip:rect(0px, 210px, 200px, -10px); /* Clip the top and bottom of the box-shadow off */
    width:200px;
    height: 200px;
    position: absolute;
    top:50px;
    left:50px;
    background:#eee;
}
 

Answer 3

Il y est, mais il est assez fragile.

À l'aide de la suite xhtml:

<div id="wrap">

 <div id="content">

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales justo nec mauris aliquam vitae feugiat magna congue. Morbi dignissim volutpat dui id porttitor. Donec auctor feugiat dolor, at varius magna rhoncus sed. Vivamus a odio urna, iaculis dignissim lectus. Integer aliquam felis eu sapien vestibulum ornare. Vivamus nec euismod sapien. Mauris quis eros ligula, sed pulvinar sem. Aenean sodales tempor malesuada. Aliquam erat volutpat. Aenean vel eros velit, et porttitor elit. Phasellus volutpat blandit quam eu fringilla. Integer ornare convallis tincidunt. Suspendisse commodo iaculis est vulputate volutpat. Donec at massa arcu. Sed sit amet commodo mauris. Aliquam erat volutpat. Integer eu augue vel erat euismod volutpat eu vel massa. Curabitur id erat vitae nisi imperdiet scelerisque id ut arcu. Quisque commodo dolor vitae erat imperdiet consectetur.</p>

   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sodales justo nec mauris aliquam vitae feugiat magna congue. Morbi dignissim volutpat dui id porttitor. Donec auctor feugiat dolor, at varius magna rhoncus sed. Vivamus a odio urna, iaculis dignissim lectus. Integer aliquam felis eu sapien vestibulum ornare. Vivamus nec euismod sapien. Mauris quis eros ligula, sed pulvinar sem. Aenean sodales tempor malesuada. Aliquam erat volutpat. Aenean vel eros velit, et porttitor elit. Phasellus volutpat blandit quam eu fringilla. Integer ornare convallis tincidunt. Suspendisse commodo iaculis est vulputate volutpat. Donec at massa arcu. Sed sit amet commodo mauris. Aliquam erat volutpat. Integer eu augue vel erat euismod volutpat eu vel massa. Curabitur id erat vitae nisi imperdiet scelerisque id ut arcu. Quisque commodo dolor vitae erat imperdiet consectetur.</p>

 </div>

</div>

Et le code css suivant:

#wrap {width: 70%;
 margin: 1em auto;
 overflow: hidden;
 overflow-x: visible;
 }

#content
 {width: 90%;
 margin: 0 auto;
 -moz-box-shadow: 0 0 1em #ccc;
 -webkit-box-shadow: 0 0 1em #ccc;
 }

#content p
 {overflow-y: hidden;
 padding: 0.5em 0;
 }

(Démonstration en direct se trouve ici: http://davidrhysthomas.co.uk/so/shadows.html.)

La fragilité de la chair de poule si vous ajoutez des marges de la contenait des éléments (en particulier l' <p> éléments, ce qui est pourquoi j'ai utilisé padding plutôt). Mais, à peu près, appliquer l' -moz-box-shadow (et/ou -webkit-box-shadow) à l' #content div, et l'utilisation de l' #wrap div clip de l'ombre, à l'aide de overflow-y: hidden; ceci, bien sûr, le rend encore plus fragile en raison du nombre de navigateurs qui respectent overflow-y.

D'autre part, les navigateurs interprètent l' box-shadow plus ou moins certainement traiter de façon appropriée overflow-y.

Answer 4

La façon de le faire est de mettre la boîte à l'ombre sous un div qui a dépassement de jeu pour "caché". Par exemple, pour créer une ombre autour d'une boîte qui n'apparaît que sur la gauche, en haut et à droite:

CSS:

#container {
    height: 101px;
    overflow: hidden;
    padding: 5px 5px 0;
    width: 105px;
}
#shadow-box {
   border:1px solid #aaa;
   width:100px;
   height:100px;
   box-shadow:0 0 4px 1px #666;
}

HTML:

<div id="container">
   <div id="shadow-box"></div>
<div>

Affichage:

Vous pouvez régler le #de remplissage de conteneurs et de la taille de clip approprié pour vos besoins. Dans cet exemple, je suis écrêtage de la bordure inférieure de la #shadow-box.

Answer 5

Comme je l'ai indiqué dans une question connexe, la solution à ce problème est soit très obscure, soit impossible avec la technologie actuelle. C'est vraiment dommage qu'il n'y ait aucun moyen d'y parvenir car c'est un thème commun dans la conception web.

J'ai eu recours à une ombre png car elle semble être la seule solution sensée.

Merci pour toutes vos suggestions.