Skew Card

배운점

transform: skew 속성은 원래 알고 있었지만 ::after와 ::before 엘리먼트를 겹쳐서 이런 시각적인 효과를 주는 발상을 할 수 있다는 것에 감탄했다.

추가로, filter라는 속성에 대해 간략하게나마 알 수 있었다. 위의 이미지에서 blur효과를 볼 수 있는데 이 부분을 filter:blur(50px)로 구현했다.

filter속성에는 blur뿐만 아니라 여러가지 다양한 속성들이 있고, 이를 활용해 디자인적인 효과들을 입힐 수 있으니 확인해보면 좋을 것 같다.