Cách tốt nhất để thực hiện loại đổ bóng này?

Question

Tôi có trang web sẽ có cột hình ảnh và div (kết hợp cả hai hình ảnh) sẽ luôn có cùng kích thước.

Trên tất cả những điều đó tôi muốn thêm một loại hiệu ứng bóng đổ (như đã thấy ở đây):

Tôi đã làm việc với đổ bóng CSS nhưng tôi chưa bao giờ thấy một như thế này trong CSS. Điều này có thể được thực hiện trong CSS? Giả sử nó không thể sau đó tôi đoán tôi sẽ chỉ sử dụng một lát bóng thả như một đồ họa, có thể là một nền tảng. Nếu đó là con đường duy nhất để đi, làm cách nào để áp dụng điều này cho mọi hình ảnh hoặc div?

Ngay bây giờ những gì tôi đang làm là đặt một div dưới mỗi hình ảnh hoặc div:

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

... và làm điều này trong 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; 
} 

Có cách tốt hơn để làm điều này? Cảm ơn!

Answer 1

Nếu bạn prefere để sử dụng CSS để tạo ra rằng loại bóng, bạn có thể sử dụng CSS3 như 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

Bạn có thể sử dụng box-shadow:

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

này sẽ tạo ra một hiệu ứng tương tự, nhưng nó sẽ không trông giống như vậy.

Some info trên đó.

Answer 3

cái gì đó dọc theo dòng của

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

Phần đệm thừa ở phía dưới cho phép nền ngồi ở đúng vị trí.

Điều đó có hữu ích không?