Najlepszy sposób na zrobienie tego rodzaju cienia?

Question

Mam witrynę, która będzie zawierała kolumnę obrazów i elementów div (obu), które zawsze będą miały ten sam rozmiar.

Na wszystkie te chcę dodać pewien rodzaj cienia (jak tutaj):

Pracowałem już z CSS cieni, ale nigdy nie widziałem takiego w CSS. Czy można to zrobić w CSS? Zakładając, że nie może wtedy zgaduję, że użyłbym tylko plastra cieniowania jako grafiki, być może tła. Jeśli jest to jedyna droga do zrobienia, w jaki sposób zastosować to do każdego obrazu lub elementu div?

Teraz to, co robię jest oddanie div pod każdym obrazem lub Gr:

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

... i robi to w 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; 
} 

Czy istnieje lepszy sposób na zrobienie tego? Dzięki!

Answer 1

Jeśli preferujemy użycie CSS do tworzenia tego typu cieni, można użyć CSS3 jako 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!

Answer 2

Można użyć box-shadow:

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

To stworzy podobny efekt, ale to nie będzie wyglądać tak samo.

Some info na ten temat.

Answer 3

Coś wzdłuż linii

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

Dodatkowa wyściółka u dołu umożliwia usadowienie tła we właściwym miejscu.

Czy to pomaga?