transform: skew
속성은 원래 알고 있었지만 ::after
와 ::before
엘리먼트를 겹쳐서 이런 시각적인 효과를 주는 발상을 할 수 있다는 것에 감탄했다.
추가로, filter
라는 속성에 대해 간략하게나마 알 수 있었다. 위의 이미지에서 blur효과를 볼 수 있는데 이 부분을 filter:blur(50px)
로 구현했다.
filter
속성에는 blur뿐만 아니라 여러가지 다양한 속성들이 있고, 이를 활용해 디자인적인 효과들을 입힐 수 있으니 확인해보면 좋을 것 같다.