CSS3의 Apple 환경 시트의 그림자?

Question

CSS3를 사용하여 Apple의 환경 정보 시트의 그림자처럼 그림자를 만들 수 있습니까?

example image http://images.apple.com/environment/images/footprint_graph20100920.jpg

이 솔루션은 크로스 브라우저 호환 될 필요가 없습니다. 이 사이트의 데모 밖으로

Answer 1

예 :

여기가 그림자 효과를 사용하는 특정 코드입니다. 완료 방법은 this blog post 및 the demo page을 참조하십시오.

Answer 2

확인 :

http://lab.galengidman.com/css3stickynote/

그들은 :before 및 :after 부두의 무리와 함께 순수 CSS 정말 비슷한 뭔가.

#stickynote:before { 
    content:''; 
    display:block; 
    width:90%; 
    height:20%; 
    position:absolute; 
    left:10px; 
    bottom:3px; 
    background-color:rgba(0,0,0,.5); 
    -o-transform:rotate(-3deg); 
    -webkit-transform:rotate(-3deg); 
    -moz-transform:rotate(-3deg); 
    box-shadow:0 0 10px #000; 
    -webkit-box-shadow:0 0 10px #000; 
    -moz-box-shadow:0 0 10px #000; 
    opacity:1; 
    z-index:-1; 
} 

#stickynote:after { 
    content:''; 
    display:block; 
    width:90%; 
    height:20%; 
    position:absolute; 
    right:10px; 
    bottom:3px; 
    background-color:rgba(0,0,0,.5); 
    -o-transform:rotate(3deg); 
    -webkit-transform:rotate(3deg); 
    -moz-transform:rotate(3deg); 
    box-shadow:0 0 10px #000; 
    -webkit-box-shadow:0 0 10px #000; 
    -moz-box-shadow:0 0 10px #000; 
    opacity:1; 
    z-index:-1; 
}