css - filter

포토샵등 이미지 편집 도구를 이용하지 않고 css를 사용해서 이미지에 시각효과를 추가할 수 있다. 

filter란?

filter속성은 요소에 대한 시각효과를 나타낸다. 

 

filter 함수  

blur(px)

이미지에 흐림효과를 적용한다. 값이 클수록 흐림 효과 ↑

 

brightness(%)

이미지에 밝기를 조정한다. 100%가 기본값,  100%보다 크면 밝기를 제공하고 0%보면 완전히 검게 처리한다. 

 

contrast(%)

흐림효과 이미지의 대비를 조정한다. 100%가 기본값,  100%보다 크면 더 많은 대비를 제공한다.

 

drop-shadow(x, y, blur(색상))

이미지의 그림자 효과를 지정한다. 

 

grayscale(%)

이미지를 회색조로 변환한다. 0%가 기본값, 100%는 이미지를 완전히 회색 처리한다. 음수는 제공하지 않는다. 

 

hue-rotate(deg)

0%가 기본값, 이미지에 색조 회전을 적용한다. 0deg ~ 360deg

 

invert(%)

0%가 기본값, 이미지의 색상을 반전시킨다. 100%는 이미지의 색상을 완전히 반전시킨 값이다. 

 

opacity(%)

이미지의 투명도를 지정한다. 100%가 기본값이다. 

 

saturate(%)

이미지의 채도를 지정한다. 100%가 기본값이고 0%면 이미지의 채도를 완전히 없앤다. 100%를 초과하면 채도를 높이는 것이다. 

 

sepia(%)

0%가 기본값, 이미지를 세피아톤으로 변환시킨다.