Prevenir la caja de sombra de mostrar en un lateral específico

Question

Hay alguna forma de crear un css box-shadow en el que, independientemente del valor de desenfoque, la sombra sólo aparece en la deseada lados?

Por ejemplo, si quiero crear un div con sombras en los lados izquierdo y derecho y no de la sombra en la parte superior o inferior.El div no es absolutamente posicionado y su altura está determinada por el contenido.

-- Edit --

@ricebowl:Le agradezco su respuesta.Tal vez usted puede ayudar con la creación de una solución completa para solucionar los problemas mencionados en mi respuesta a su solución...Mi página de configuración es la siguiente:

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

Y CSS como este:

#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

Como dije en una pregunta relacionada mío la solución a este problema es o muy oscuro o no es posible con la tecnología actual. Es realmente una lástima que no hay manera de conseguir esto, ya que es un tema común en el diseño web.

I recurrió al uso de una sombra png, ya que parece ser la única solución sensata.

Gracias por todas sus sugerencias.

Answer 2

Hay una cuarta distancia se puede definir el llamado offset propagación, que se mueve en la sombra o fuera en los 4 lados. Así que si se establece que la negativa de la distancia borroso, esto va a cambiar la sombra hacia el interior por la misma distancia que el desenfoque se extiende la sombra hacia el exterior de manera efectiva ocultarlo. Por supuesto, esto también se desplazará hacia el interior de las sombras en el lado que usted desea que aparezca por lo que tendrá que aumentar la compensación por la distancia borroso para deshacer eso. es decir.

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

Así que en su ejemplo:

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

Answer 3

También puede utilizar el clip: rect (0px, 210px, 200px, -10px);

Por desgracia yo nunca fue capaz de encontrar una manera de conseguir que funcione con una caja de tamaño flexible.

A menudo utilizo esto para menús desplegables donde solo deseas sombra en los lados y el fondo. En ese caso me acaba de establecer los valores de la derecha y la parte inferior del clip a un número alto, como

clip: rect (0px, 1000px, 1000px, -10px); / * Clip de la parte superior de la caja de sombra-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

No, pero es bastante frágil.

Uso de la siguiente 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>

Y el siguiente CSS:

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

(Demostración en directo encuentra aquí: href="http://davidrhysthomas.co.uk/so/shadows.html" rel="noreferrer"> http: / /davidrhysthomas.co.uk/so/shadows.html .)

Los pelos de punta fragilidad en los márgenes si se agrega a los elementos contenidos (especialmente los elementos <p>, que es por eso que utiliza padding en su lugar). Pero, más o menos, aplicar el -moz-box-shadow (y / o -webkit-box-shadow) a la div #content, y utilizar el div #wrap para recortar la sombra, utilizando overflow-y: hidden; esto, por supuesto, hace que sea aún más frágil debido al número de navegadores que overflow-y respecto .

Por otro lado, los navegadores que interpretan el box-shadow más o menos sin duda tratar adecuadamente con overflow-y.

Answer 5

La forma de hacer esto es poner la caja con la sombra debajo de un div que tiene establecido el desbordamiento de 'oculto'. Por ejemplo, para crear una sombra en torno a una caja que sólo aparece a la izquierda, arriba ya la derecha:

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>

Pantalla:

Se puede ajustar el relleno #container y tamaño de pinza adecuada para sus necesidades. En este ejemplo, estoy recorte el borde inferior de la sombra de la caja #.

Answer 6

Tengo 2 posibles soluciones que producen exactamente el efecto deseado:un "normal" de la caja de sombra en algunos de los bordes y nada en otras aristas.Muchas de las soluciones que se mencionan en este y otros S. O.preguntas resultan en las sombras que se "disipan" ya que cerca de la orilla que es no tener sombra, cuando en realidad creo que la mayoría de la gente quiere un corte limpio-off.

Sin embargo, ambas soluciones vienen con advertencias.

---

Solución 1:clip-path (experimental)

Si usted está dispuesto a utilizar la tecnología experimental con sólo un apoyo parcial, puede utilizar la clip-path la propiedad.

En tu caso deberías usar clip-path: inset(px px px px); donde los valores de los píxeles se calculan a partir del borde en cuestión (ver más abajo).

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

Esto clip de la div en cuestión en:

• 0 píxeles de la parte superior
• 5 píxeles fuera del borde de la derecha (para incluir la sombra)
• 0 píxeles desde la parte inferior
• 5 píxeles fuera del borde izquierdo (para incluir la sombra)

Tenga en cuenta que no comas son necesarios entre los valores de los píxeles.

Posicionamiento absoluto no es necesario y el tamaño del div puede ser flexible.

---

Solución 2:clip (obsoleto)

Si:

1. ustedes estaban dispuestos a establecer position: absolute en el div en cuestión
2. Y usted sabe las dimensiones de la div
3. O usted no sabe las dimensiones de la div, pero que están dispuestos a sólo quitar la parte superior y/o a la izquierda sombras

...se podría utilizar el obsoleto clip la propiedad.

Usted tendría que usar clip: rect(px, px, px, px); donde los valores de los píxeles se calcula a partir de la parte superior izquierda.Lo he utilizado de la siguiente manera para cortar la parte superior box-shadow, pero mantener la parte inferior y los lados:

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

Lo anterior clip de la parte superior y la parte inferior del cuadro de sombras, dejando la 5px a la izquierda y a la derecha del cuadro de sombras.Tenga en cuenta que el tamaño del div debe ser conocido.

Si el tamaño del div no se conoce este método sólo funciona para el clip de la parte superior y a la izquierda las sombras el uso de algo como clip: rect(0, 3000px, 3000px, 0); (tenga en cuenta el enorme valor de la parte derecha e inferior de los valores para permitir que el div a ser de cualquier tamaño).

Answer 7

Creo que es siempre probable que sea un poco de sangrado a través de lados adyacentes que se harán más evidentes con los valores más altos de desenfoque. Puede compensar la percepción de sangrado a través mediante el uso de una falta de definición baja y un mayor desplazamiento en los lados que desea que aparezca en la sombra. Por ejemplo, esto crearía una sombra perceptible en los lados y una casi invisible en la parte superior e inferior:

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