CSS/CSS 응용
[CSS]종이 끝이 살짝 떠있는듯한 효과
알찬 퍼블리셔
2019. 5. 29. 18:15
728x90
반응형
가상클래스를 이용해 그림자를 넣어 한쪽 끝에만 그림자가 보이도록 구현하였다.
마우스를 올려 종이를 눌러보세요...
.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;
}
728x90
반응형