attribute - fieldset css
Evite que la sombra de la caja se muestre en un lado específico (7)
¿Hay alguna manera de crear una sombra de caja CSS en la que, independientemente del valor de desenfoque, la sombra solo aparezca en los lados deseados?
Por ejemplo, si quiero crear un div con sombras en los lados izquierdo y derecho y sin sombras en la parte superior o inferior. El div no está completamente posicionado y su altura está determinada por el contenido.
- Editar -
@ricebowl: Agradezco tu respuesta. Tal vez pueda ayudar a crear una solución completa para solucionar los problemas indicados en mi respuesta a su solución ... La configuración de mi página 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 así:
#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;}
Como dije en una pregunta relacionada, la solución a este problema es muy oscura o no es posible con la tecnología actual. Es realmente una lástima que no hay forma de lograr esto, ya que es un tema común en el diseño web.
Recurrí a usar una sombra png ya que parece ser la única solución sensata.
Gracias por todas sus sugerencias.
Creo que siempre es probable que haya un pequeño derrame en los lados adyacentes que se volverá más obvio con valores de desenfoque más altos. Puede compensar el sangrado percibido utilizando un desenfoque bajo y una compensación mayor en los lados donde desea que aparezca la sombra. Por ejemplo, esto crearía una sombra notable en los lados y una casi invisible en la parte superior e inferior:
box-shadow: #888 3px 0px 2px, #888 -3px 0px 2px;
Hay una cuarta distancia que puede definir llamada compensación de extensión, que mueve la sombra hacia adentro o hacia afuera en los 4 lados. Por lo tanto, si establece eso en el punto negativo de la distancia de desenfoque, esto desplazará la sombra hacia adentro en la misma distancia a medida que el desenfoque extiende la sombra hacia afuera de manera efectiva, ocultándola. Por supuesto, esto también desplazará la sombra hacia el interior en el lado que desea que aparezca, por lo que tendrá que aumentar la compensación por la distancia de desenfoque para deshacer eso. es decir
box-shadow: (horizontal + blur) 0px (blur) (-blur) color;
Entonces en tu ejemplo:
box-shadow: -8px 0px 5px -5px rgba(0,0,0,.8), 8px 0px 5px -5px rgba(0,0,0,.8);
Hay, pero es bastante frágil.
Usando el 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 vivo ubicada aquí: .)
La fragilidad se infiltra si se agregan márgenes a los elementos contenidos (especialmente los elementos <p> , por eso utilicé el padding ). Pero, más o menos, aplique -moz-box-shadow (y / o -webkit-box-shadow ) al #content div, y use el #wrap div para recortar la sombra, usando overflow-y: hidden; esto, por supuesto, lo hace aún más frágil debido a la cantidad de navegadores que respetan el overflow-y .
Por otro lado, los navegadores que interpretan la box-shadow tratan más o menos con apropiadamente el overflow-y .
La forma de hacerlo es colocar el cuadro con la sombra debajo de un div que tenga el desbordamiento establecido en ''oculto''. Por ejemplo, para crear una sombra alrededor de un cuadro que solo aparece a la izquierda, arriba y a 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>
Monitor:
Puede ajustar el relleno y el tamaño #container para que se ajusten según sus necesidades. En este ejemplo, estoy recortando el borde inferior de # shadow-box.
También puede usar clip: rect (0px, 210px, 200px, -10px);
Lamentablemente, nunca pude encontrar la manera de hacerlo funcionar con una caja de tamaño flexible.
A menudo uso esto para menús desplegables donde solo quiero sombra en los lados y en la parte inferior. En ese caso, simplemente configuré los valores de clip derecho e inferior a un número alto, como
clip: rect (0px, 1000px, 1000px, -10px); / * Recorta la parte superior de la sombra de caja fuera * /
#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;
}
Tengo 2 soluciones posibles que producen exactamente el efecto deseado: una sombra de caja "normal" en algunos bordes y nada en otros bordes. Muchas de las soluciones enumeradas en esta y otras preguntas de SO resultan en sombras que se "disipan" cuando están cerca del borde que no tiene sombra, cuando realmente creo que la mayoría de la gente quiere un corte limpio.
Sin embargo, ambas soluciones vienen con advertencias.
Solución 1: clip-path (experimental)
Si está dispuesto a usar tecnología experimental solo con soporte parcial, puede usar la propiedad clip-path .
En su caso, usaría clip-path: inset(px px px px); donde los valores de píxel se calculan desde el borde en cuestión (ver a continuación).
#container {
box-shadow: 0 0 5px rgba(0,0,0,0.8);
clip-path: inset(0px -5px 0px -5px);
}
Esto cortará el div en cuestión en:
- 0 píxeles desde la parte superior
- 5 píxeles fuera del borde derecho (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 se requieren comas entre los valores de píxel.
No se requiere posicionamiento absoluto y el tamaño del div puede ser flexible.
Solución 2: clip (obsoleto)
Si:
- estabas dispuesto a establecer
position: absoluteen el div en cuestión - Y sabes las dimensiones de la div
- O no sabes las dimensiones del div pero estás dispuesto a eliminar solo las sombras superiores y / o izquierdas
... podría usar la propiedad de clip obsoleta .
Necesitarías usar clip: rect(px, px, px, px); donde los valores de píxel se calculan desde la parte superior izquierda. Lo he usado de la siguiente manera para cortar la sombra de la caja superior pero mantengo el fondo 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 recortará las sombras de caja superior e inferior mientras deja las sombras de caja izquierda y derecha de 5px. Tenga en cuenta que el tamaño del div debe ser conocido.
Si no se conoce el tamaño de div, este método solo funcionará para recortar las sombras superior e izquierda utilizando algo como clip: rect(0, 3000px, 3000px, 0); (tenga en cuenta el valor masivo de los valores derecho e inferior para permitir que el div sea de cualquier tamaño).