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

Question

Est-il possible de créer une boîte ombre dans laquelle css quelle que soit la valeur de flou, l'ombre apparaît uniquement sur les côtés souhaités?

Par exemple, si je veux créer un div avec des ombres sur les côtés gauche et droit et aucune 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.

- Edition -

@ricebowl: Je vous remercie de votre réponse. Peut-être vous pouvez aider à créer une solution complète pour résoudre les problèmes énoncés dans ma réponse à votre solution ... Ma mise en page est la suivante:

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

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

Comme je l'ai dit dans une question connexe de moi la solution à ce problème est soit très obscur ou n'est pas possible avec la technologie actuelle. Il est vraiment dommage qu'il n'y a aucun moyen d'y parvenir car il est un thème commun dans la conception web.

J'ai eu recours à l'aide d'une ombre comme il semble .png être la seule solution raisonnable.

Merci pour toutes vos suggestions.

Answer 2

Il y a une quatrième distance, vous pouvez définir appelé le décalage propagation, qui déplace l'ombre ou sur les 4 côtés. Donc, si vous définissez que sur la borne négative de la distance de flou, ce décalera l'ombre vers l'intérieur comme le flou de la même distance étend l'ombre se cachant efficacement vers l'extérieur. Bien sûr, cela changera aussi l'ombre vers l'intérieur sur le côté que vous ne voulez qu'il apparaisse vous aurez donc besoin d'augmenter le décalage par la distance de flou pour défaire cela. i.e..

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

Dans votre exemple:

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

Answer 3

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

Malheureusement, je n'a jamais été en mesure de trouver un moyen de le faire fonctionner avec une boîte de taille flexible.

J'utilise souvent ce menu déroulant pour surplombantes où je ne veux que l'ombre sur les côtés et le fond. Dans ce cas, je viens de définir les valeurs de droite et clip inférieur à un certain nombre, comme

clip: rect (0px, 1000px, 1000px, -10px); / * Fixez le haut de la boîte ombre off * /

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

Il y a, mais il est assez fragile.

Utilisation du xhtml suivant:

<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 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émo en direct situé ici: href="http://davidrhysthomas.co.uk/so/shadows.html" rel="noreferrer"> http: / /davidrhysthomas.co.uk/so/shadows.html .)

La fragilité creeps si vous ajoutez des marges aux éléments contenus (en particulier les éléments <p>, ce qui est la raison pour laquelle j'ai utilisé padding à la place). Mais, à peu près, appliquer la -moz-box-shadow (et / ou -webkit-box-shadow) au #content div et utiliser le #wrap div pour couper l'ombre, en utilisant overflow-y: hidden; cela, bien sûr, rend encore plus fragile en raison du nombre de navigateurs qui respectent overflow-y .

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

Answer 5

La façon de le faire est de mettre la boîte à l'ombre sous un div qui a trop-plein de « caché ». Par exemple, pour créer une ombre autour d'une boîte qui apparaît uniquement 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 rembourrage #container et la taille pour couper adapté à vos besoins. Dans cet exemple, je clipping la bordure inférieure de la # ombre boîte.

Answer 6

J'ai 2 solutions possibles qui produisent exactement l'effet désiré: une ombre boîte « normale » sur certains bords et rien sur d'autres bords. Un grand nombre des solutions énumérées dans le présent et d'autres S.O. les questions donnent lieu à des ombres que « dissiper », comme ils près du bord qui est d'avoir pas d'ombre, alors qu'en réalité, je crois que la plupart des gens veulent une coupure nette.

Cependant, les deux solutions viennent avec des réserves.

---

Solution 1: clip-path (expérimental)

Si vous êtes prêt à utiliser la technologie expérimentale avec seulement un soutien partiel, vous pouvez utiliser le clip-path propriété.

Dans votre cas, vous devez utiliser clip-path: inset(px px px px); où les valeurs de pixel sont calculées à partir du bord en question (voir ci-dessous).

#container {
    box-shadow: 0 0 5px rgba(0,0,0,0.8);
    clip-path: inset(0px -5px 0px -5px);
}

coupera la div en question à:

• 0 pixels à partir du haut
• 5 pixels à l'extérieur du bord droit (y compris l'ombre)
• 0 pixels à partir du bas
• 5 pixels à l'extérieur du bord gauche (pour inclure l'ombre)

Notez que aucune virgule est nécessaire entre les valeurs de pixel.

Le positionnement absolu n'est pas nécessaire et la taille de la div peut être flexible.

---

Solution 2: clip (dépréciée)

Si:

1. vous étiez prêt à mettre position: absolute sur la div en question
2. vous connaissez les dimensions de la div
3. ou que vous ne connaissez pas les dimensions de la div mais vous êtes prêt à seulement enlever les ombres en haut et / ou gauche

... vous pouvez utiliser le dépréciée clip propriété .

Vous auriez besoin d'utiliser clip: rect(px, px, px, px); où les valeurs de pixel sont calculées à partir du haut à gauche. Je l'ai utilisé comme suit pour couper la boîte ombre supérieure mais garder le fond et les côtés:

#container {
    position: absolute;
    box-shadow: 0 0 5px rgba(0,0,0,0.8);
    width: 100px;
    height: 100px;
    clip: rect(0px, 105px, 100px, -5px);
}

Le ci-dessus coupera la boîte-ombres haut et en bas, tout en laissant l'ombre de boîte à gauche et à droite 5px. Notez que la taille de la div doit être connue.

Si la taille de la div on ne connaît pas cette méthode ne fonctionnera que pour couper les ombres haut et à gauche en utilisant quelque chose comme clip: rect(0, 3000px, 3000px, 0); (notez la valeur énorme pour les valeurs droite et en bas pour permettre à la div pour être de toute taille).

Answer 7

Je pense qu'il est toujours susceptible d'être un peu transpercement aux côtés adjacents qui deviendront plus évidentes avec les valeurs de flou plus. Vous pouvez compenser le flou en utilisant un faible transpercement perçu et un décalage plus élevé sur les côtés que vous voulez l'ombre apparaisse sur. Par exemple, cela créerait une ombre perceptible sur les côtés et un presque invisible sur le haut et le bas:

box-shadow: #888 3px 0px 2px, #888 -3px 0px 2px;