[CSS]종이 끝이 살짝 떠있는듯한 효과

 

 

가상클래스를 이용해 그림자를 넣어 한쪽 끝에만 그림자가 보이도록 구현하였다.

 

 

마우스를 올려 종이를 눌러보세요...

 

 

 

.page:before{ /* 그림자를 넣을 가상 클래스 생성 */
  z-index:-1;
  content:'';
  position:absolute; 
  width:90%; height:90%;
  bottom: 3px; right:4px;
  box-shadow: 2px 2px 18px #444;
  transform:skew(2deg, 2deg); /* 살짝 비틀어서 모서리쪽만그림자가  보이도록 만든다 */
  transition:all 0.3s;
  
}