caja-sombra sobre div flotantes

¡Tengo un problema al mostrar sombras de caja sobre div flotantes! He probado en Chrome y Firefox con el mismo resultado.caja-sombra sobre div flotantes

<html> 
     <head> 
     </head> 
     <body> 
      <div style="float:left; clear: left; background-color: #aaa; -moz-box-shadow: 0px 8px 8px #000; width: 200px; height: 200px;"> 
      </div> 
      <div style="float:left; clear: left; background-color: #aaa; -moz-box-shadow: 0px 8px 8px #000; width: 200px; height: 200px;"> 
      </div> 
     </body> 
    </html>

Editar: El div en la parte superior no hace que su sombra en el div a continuación, ¿hay alguna solución para este problema o tengo que probar una solución diferente?

respecto /Joel

Fuente

2011-05-13 Yo-L

Obras para mí en Firefox 4, pero que el código no va a funcionar en Chrome o Safari, el -moz es una etiqueta del proveedor que indica mozilla.

usted necesitan añadir todos los siguientes

-moz-box-shadow: 0px 8px 8px #000; width: 200px; 
-webkit-box-shadow: 0px 8px 8px #000; width: 200px; 
box-shadow: 0px 8px 8px #000; width: 200px;

-webkit es la etiqueta de vendedor para Chrome/Safari, lo siguiente será añadir sombras para los vendedores que lo soportan y luego, cuando se apoyaron en forma universal la última regla cubrirá todos los navegadores.

Editar: Para obtener la sombrea superior del div sobre el otro elemento debe position:relative y luego darle un z-index más alto que el inferior.

Fuente

2011-05-13 13:33:01 JaredMcAteer

¿Realmente ve 2 divs con sombras? El div en la parte superior debería arrojar sombras en el div a continuación. Todo lo que veo es una gran caja con sombra. –

Disculpe, su pregunta es un poco ambigua.Necesitas posicionar relativamente tu elemento y luego usar z-index para obtener el uno superior sobre el otro. Ver: http://jsfiddle.net/YJPRN/ – JaredMcAteer

Awsome: D Resolveré la pregunta. –

Dar este tutorial un ir

http://www.positioniseverything.net/articles/dropshadows2.html

Fuente

2011-05-13 13:30:36 Rob

se ve bien en Firefox porque está utilizando -moz-box-shadow, para los navegadores WebKit que tendrá que utilizar -webkit-box-shadow

Fuente

2011-05-13 13:33:08 tcnarss

Sí, sé de eso, simplemente guardé el código pequeño. No funciona para mí en 3.6. ¿Ves 2 cajas con sombra o una? –

ambos tienen una sombra a la derecha, la inferior tiene una sombra en la parte inferior, si quiere que ambos tengan un sombreado inferior, simplemente separe ligeramente el div para usar un '
' o cambie los márgenes de los divs – tcnarss

Lo siento ! como dije, mi pregunta fue puesta erróneamente. –

¿Qué pasa con ellos? Si le preocupa no ver la sombra inferior de la parte superior div es porque necesita una pequeña separación. Si tiene problemas para ver la sombra de cuadro, es porque necesita usar prefijos específicos del proveedor en esta etapa, de ese modo.

Demostración: jsfiddle.net/q5yf3

Si usted quiere que estén pegadas, acaba de dar el primer div un z-index con position:relative y se verá cómo desea que lo haga.

HTML:

<div class="bs up"></div> 
<div class="bs"></div>

CSS:

div.bs { 
    float:left; 
    clear:left; 
    margin:1em; 
    width:200px; 
    height:200px; 
    background:#aaa; 
    box-shadow:0 8px 8px #000; 
    -moz-box-shadow:0 8px 8px #000; 
    -webkit-box-shadow:0 8px 8px #000; 
} 
div.up { z-index:10; position:relative; }

Demostración: jsfiddle.net/VaVhy

Dicho esto, me gustaría también recomendaría mirar en el uso de rgba() en lugar de hexadecimal valores para box-shadow color, ya que proporciona la sombra mucho más natural en fondos no planos.

Fuente

2011-05-13 13:34:32 Marcel

Sí, no tengo ningún margen entre mis divs, y tengo que mantenerlos pegados o al menos hacer que aparezcan así. Tan pronto como agrego color de fondo, la sombra desaparece. –

Ah, sí, agregué una segunda parte a mi respuesta que se relaciona con su problema, después del primer enlace a una demostración. – Marcel

Mantendré en mente la sugerencia de rgba() cuando pruebo esto. Muchas gracias. –

Respuesta

Cuestiones relacionadas