CSS Filter

웹에서 이미지를 제어하는 경우는 이제 꽤나 흔한 일이다. 보통 이미지를 제어하는 경우에는 서버에서 이미지를 처리한 후 처리된 이미지를 받아서 사용하는 로직을 많이 사용하나, 일부 표현 방식에 따라서 흑백이었던 이미지를 컬러로 바꾼다던가, Blur 이미지를 Clear하게 만드는 등의 표현 방식을 사용할 수도 있다.

CSS Filter는 CSS를 이용해서 요소에 Filter를 넣어주는 속성으로 (당연히) IE에서는 지원되지 않고 모던 브라우저에서만 지원하고 있다.

브라우저 호환성:

Can I use... Support tables for HTML5, CSS3, etc

먼저 지원되는 속성을 하나하나 살펴보면서 Filter에 대해 이해해보도록 하자.

blur

blur 속성은 요소를 뿌옇게 만들기 위해 사용한다.

.target {
  filter: blur(5px)
}

blur를 주지 않은 박스와 준 박스의 차이

brightness

brightness는 이미지의 밝기를 조절한다. 숫자가 크면 클 수록 이미지가 밝아진다.

.filter-1 {
 filter:brightness(50%)
}
.filter-2 {
 filter:brightness(150%)
}
.filter-3 {
 filter:brightness(200%)
}

실제 이미지를 편집할 때에도 밝기를 저렇게 마구잡이로 조절하지는 않고 소숫점 단위로 조절하기 때문에 어두운 이미지를 활용할 때 유용하게 활용할 수 있다.

contrast

contrast는 이미지의 대비를 조절한다. 숫자가 커질수록 더 큰 대비를 준다.

.filter-1 {
 filter:contrast(50%)
}
.filter-2 {
 filter:contrast(150%)
}
.filter-3 {
 filter:contrast(200%)
}

saturate

saturate는 이미지의 채도를 조절한다. 숫자가 높을 수록 이미지의 색상이 더욱 풍부해지고, 숫자가 적을 수록 이미지의 색상이 줄어든다. saturate(0) 은 grayscale(100%)와 동일하다.

.filter-1 {
 filter:saturate(0%)
}
.filter-2 {
 filter:saturate(150%)
}
.filter-3 {
 filter:saturate(200%)
}

grayscale

grayscale은 이미지의 흑백여부를 정한다. 100% 까지만 사용이 가능하며 100%인 경우 완벽한 흑백을 의미한다.

.filter-1 {
 filter:grayscale(25%)
}
.filter-2 {
 filter:grayscale(50%)
}
.filter-3 {
 filter:grayscale(100%)
}

opacity

opacity는 이미지의 투명도를 정한다. opacity 속성을 사용한 것과 매우 유사하게 동작한다.

.filter-1 {
  filter:opacity(50%)
}
.filter-2 {
  filter:opacity(15%)
}

일단 여기까지 작성하고 추후에 sepia, invert 등을 소개하도록 하겠다.