css - tabla - poner sombra a un texto en html
¿Por qué un fondo rompe un efecto de inserción de sombra de cuadro? (6)
Como también tengo este problema y tampoco veo que este comportamiento sea normal, presenté un informe de error en Mozilla
Sin embargo, también puedo reproducir el problema en Google Chrome, así que me pregunto si esto es realmente un error. Pero podría ser.
editar:
De hecho, no es un error, sino la forma en que debe funcionar. Entonces, sobre la base de esta información, bifurqué su ejemplo de jfiddle y encontré esta solución:
El marcado ahora se ve así:
<div id="box">
<div id="wrapper">
<div id="box_content">
Content here
</div>
<div id="mask"></div>
</div>
</div>
La máscara se convierte en otro div, que se coloca sobre el #box_content uno por medio de estar absolutamente posicionado. Este es el CSS:
#wrapper{
position: relative;
display: inline-block;
width: 280px;
height: 280px;
border-radius: 5px;
margin: 10px;
}
#mask {
position: absolute;
top: 0px; left: 0px;
width: 100%;
height: 100%;
pointer-events: none; /* to make clicks pass through */
box-shadow: 0 0 10px #000000 inset;
}
#box_content{
background-color: #0ef83f;
height: 100%;
}
Estoy tratando de lograr un efecto de sombra interior en una caja simple, algo como: alt text http://gotinsane.com/test.jpg
donde el cuadro verde es el contenido dentro de otro cuadro.
Mi problema es que si le doy a la caja de contenido cualquier tipo de fondo, el efecto de sombra de caja de la caja exterior desaparecerá.
Aquí, un ejemplo de mi problema (con marcado y css), he ajustado la altura del contenido para evidenciar el problema: en la atmósfera realmente no me importa IE *, esto es solo una prueba.
¿Alguna idea?
ACTUALIZAR
El contenido dentro de la caja es una especie de diapositiva, aquí un ejemplo (problema original) . La respuesta de treintadot hace el truco, pero me obliga a hacer un pequeño truco, cambiando el fondo del envoltorio en función del contenido: ejemplo aquí (truco de treintadot) .
Esto puede ser una solución, pero no me gusta demasiado y aún no entiendo por qué la sombra de la caja exterior se pone detrás del fondo de la caja interior (color, imagen)
ACTUALIZACIÓN 2
Al hablar de este problema en otro foro, encontré otra manera : básicamente, en lugar de usar box-shadow en el contenedor, que actuará como una máscara, uso box-shadow y border-radius directamente en el contenido (elementos .step ) Sin embargo, el efecto de "máscara" es exactamente lo que estaba tratando de lograr, por lo que tampoco es la solución.
Todavía no entiendo cómo y por qué el fondo de un elemento interno interfiere con el diseño de un elemento externo, o por qué la sombra que cae del elemento externo se pone detrás del interior. ¿Podría ser esto un error css?
ACTUALIZACIÓN3
Alguien abrió un error en Mozilla y obtuvo esta respuesta que aclara el ''problema'':
De http://www.w3.org/TR/css3-background/#the-box-shadow :
En términos de los contextos de apilamiento y el orden de pintura, las sombras externas de un elemento se dibujan inmediatamente debajo del fondo de ese elemento, y las sombras internas de un elemento se dibujan inmediatamente sobre el fondo de ese elemento (debajo de los bordes y la imagen del borde, Si alguna).
En particular, los fondos de los niños del elemento pintarían por encima de la sombra del recuadro (y de hecho pintarán por encima de los bordes y el fondo del propio elemento).
Así que la representación es exactamente lo que requiere la especificación.
Actualización 4
Fabio A. señaló otra solución, con los pointer-events css3 . Se ve bien y funciona en IE8 también;)
Compruebe este violín: http://jsfiddle.net/FEk3c/6/
#box{
background-color: #FFFFFF;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 10px #000000;
width: 300px;
height: 300px;
}
#body{
margin: 0;
}
#wrapper{
display: inline-block;
width: 280px;
height: 280px;
border-radius: 5px;
box-shadow: 0 0 10px #000000 inset;
margin: 10px;
}
#box_content{
background-color: #0ef83f;
height: 100px;
}
El problema es que las capas se superponen, puede evitarlo utilizando el margen o el relleno. Pruebe http://jsfiddle.net/pramendra/FEk3c/5/
#box{
background-color: #FFFFFF;
border-radius: 10px 10px 10px 10px;
box-shadow: 0 0 10px #000000;
width: 300px;
height: 300px;
}
#body{
margin: 0px;
}
#wrapper{
display:inline-block;
width: 280px;
height: 280px;
border-radius: 5px;
box-shadow: 0 0 10px #000000 inset;
box-shadow:inset 0 0 10px 0 #000000;
margin: 10px;
}
#box_content{
background-color: #f00;
margin:5px;
}
Esto funciona muy bien para mí sin ningún elemento DOM adicional (como ''wrapper'', etc.):
div.img {
display: inline-block;
position: relative;
width: 400px;
height: 280px;
background-image: url(/images/anyimage.png);
}
div.img:after {
display: inline-block;
width: 100%;
height: 300px; //parent height +20px
position: absolute;
top: -10px;
left: 0;
box-shadow(inset -25px 0 25px -25px rgba(0,0,0,.2), inset 25px 0 25px -25px rgba(0,0,0,.2));
content: '' '';
pointer-events: none;
}
Estoy un poco confundido de lo que realmente estás buscando. Si no está del todo bien, hágamelo saber :)
Esta es mi mejor conjetura.
CSS:
(He añadido en las reglas de prefijo de proveedor.)
#box {
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 0 10px #000;
-moz-box-shadow: 0 0 10px #000;
box-shadow: 0 0 10px #000;
width: 280px;
height: 280px;
padding: 10px
}
#wrapper {
background-color: #0ef83f;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 0px 18px #000;
-moz-box-shadow: inset 0px 0px 18px #000;
box-shadow: inset 0px 0px 18px #000;
width: 240px;
height: 240px;
padding: 20px
}
HTML:
<div id="box">
<div id="wrapper">
Content here
</div>
</div>
Solo asegúrate de que la propiedad de fondo hijo se especifique con rgba , como en este violín .
Dele a los padres un background-color para evitar que se vea lo que hay debajo.
ul {
box-shadow : inset 0 0 10px 10px gray;
background-color: white;
}
li:nth-child(even) {
background : rgba(255,0,0,0.2);
}