¿La mejor manera de hacer este tipo de sombra paralela?

Tengo un sitio que tendrá una columna de imágenes y divs (una combinación de ambos) que siempre tendrá el mismo tamaño.¿La mejor manera de hacer este tipo de sombra paralela?

En todos estos Quiero añadir un cierto tipo de sombra (como se ve aquí): enter image description here

He trabajado con sombras CSS, pero nunca he visto uno como este en el CSS. ¿Esto se puede hacer en CSS? Asumiendo que no puede, entonces supongo que usaría solo una porción de sombra paralela como un gráfico, posiblemente un fondo. Si esa es la única ruta a seguir, ¿cómo la aplico a cada imagen o div?

En este momento lo que estoy haciendo es poner un div debajo de cada imagen o div:

<div class="rightimgdropshadow">&nbsp;</div>

... y hacer esto en el CSS: .rightimgdropshadow

{ 
    background-image: url(../images/site-structure/right-col-image-shadow.jpg); 
    background-repeat: no-repeat; 
    background-position: center top; 
    width 100% 
    height: 20px; 
}

¿Existe una mejor manera de hacer esto? ¡Gracias!

Fuente

2012-05-10 Chris Cummings

Tienes que usar Transformaciones CSS3 para lograr ese tipo de sombra, ¡pero es desordenada y mal soportada! – Zuul

Si prefere utilizar CSS para crear ese tipo de sombras, puede utilizar CSS3 como seen here!

CSS

/* Lifted corners */ 

.lifted { 
    -moz-border-radius:4px; 
     border-radius:4px; 
} 

.lifted:before, 
.lifted:after { 
    bottom:15px; 
    left:10px; 
    width:50%; 
    height:20%; 
    max-width:300px; 
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); 
     -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); 
      box-shadow:0 15px 10px rgba(0, 0, 0, 0.7); 
    -webkit-transform:rotate(-3deg);  
     -moz-transform:rotate(-3deg); 
     -ms-transform:rotate(-3deg); 
     -o-transform:rotate(-3deg); 
      transform:rotate(-3deg); 
} 

.lifted:after { 
    right:10px; 
    left:auto; 
    -webkit-transform:rotate(3deg); 
     -moz-transform:rotate(3deg); 
     -ms-transform:rotate(3deg); 
     -o-transform:rotate(3deg); 
      transform:rotate(3deg); 
}

Made a Fiddle!

Fuente

2012-05-10 20:14:03 Zuul

Woah, excelente ... ¡NO sabía que podrías hacer eso con CSS! Mucho más elegante que mi solución ... gracias (¡y gracias por el enlace también!) –

@Zuul +1 para el enlace. – mtk

CSS3 Realmente llegó a robar la web :) – Zuul

Puede utilizar box-shadow:

.rightimgdropshadow { 
    box-shadow: 0px 2px 3px rgba(0,0,0,.3); 
}

Esto creará un efecto similar, pero no se verá de la misma manera.

Some info en eso.

Fuente

2012-05-10 20:12:00 zakutnya

Algo a lo largo de las líneas de

border: 1px solid #333; 
border-bottom: none; 
padding: 10px 10px 20px; 
background: url('insert_image') no-repeat; 
background-position: left bottom;

El relleno extra en la parte inferior permite que el fondo se asiente en el lugar correcto.

¿Eso ayuda?

Fuente

2012-05-10 20:21:13

¿La mejor manera de hacer este tipo de sombra paralela?

Respuesta

Cuestiones relacionadas