[해피CGI][cgimall] Stacked Paper Effect - Css-tricks

Css3의 속성중인 box-shadow를 이용하여 종이가 겹쳐 있는 모양을 만들수 있습니다.

 

 

 

HTML

<div class="page"></div>


Css

.pape {
   background: #fff;
   box-shadow:
  /* The top layer shadow */
  0 1px 1px rgba(0,0,0,0.15),
  /* The second layer */
  0 10px 0 -5px #eee,
  /* The second layer shadow */
  0 10px 1px -4px rgba(0,0,0,0.15),
   /* The third layer */
  0 20px 0 -10px #eee,
  /* The third layer shadow */
  0 20px 1px -9px rgba(0,0,0,0.15);
  /* Padding for demo purposes */
  padding: 30px;
 }



border값을 이용하지 않고 첫번째 부터 세번째 레이어까지 모두 box-shadow를 이용하여 만들었습니다.
transform 효과를 이용하면 좀 더 재미있는 효과도 줄수 있으니 참고 하시면 좋겠습니다.

 

 

보다 자세한 내용은 홈페이지 링크나 아래의 링크주소를 클릭하여 확인하실 수 있습니다.

https://css-tricks.com/snippets/css/stack-of-paper/