[CSS] 이미지 편집 없이 CSS만으로 마스크 기능 만들기 (mask-image)

디자이너라면, 아니 디자인 툴을 접해본 사람이라면 마스크기능이 어떤것인지 설명하지 않아도 어느정도 알것입니다. 그만큼 디자인을 할 때 많이 사용하게 되는 기능인데요, 마스크란 어떤 요소의 특정 부분을 가리거나 투명하게 만드는 효과로 다양한 디자인적 연출이 가능하게 합니다. 이 마스크 기능을 CSS만으로 구현할 수 있는 방법이 있어 소개하려 합니다.

 

mask-image

mask-image는 요소의 특정부분을 가리거나 투명하게 만들어 마스크 효과를 주는 CSS속성입니다. 다양한 방법으로 적용하여 디자인을 구현할 수 있습니다. 기본적인 사용방법은 이렇습니다. 

.element {
  mask-image: url('mask.png'); /* PNG, SVG 등 마스크 이미지 사용 */
  -webkit-mask-image: url('mask.png'); /* 크로스 브라우징 */
}

이미지에 페이드 효과 주기

.element {
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));
}

mask-image를 그라디언트 마스크로 활용하면 요소의 위쪽은 보이고 아래쪽으로 갈수록 투명해지는 페이드 효과를 줄 수 있습니다.

SVG 활용하기

.element {
  mask-image: url('mask.svg');
  -webkit-mask-image: url('mask.svg');
}

SVG를 활용하면 더욱 정교한 모양의 마스크를 만들 수 있습니다. SVG파일에서 흰색으로 처리한 부분은 나타나고, 검은색이나 투명한 부분은 안보이게 됩니다.