Filter
CSS filter 속성은 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용합니다. 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 쓰입니다.
다양한 filter 함수들에 대하여 알아봅시다.
blur
요소의 내용을 흐림 처리를 할 수 있게 해주는 속성입니다. 값이 클수록 이미지가 흐려집니다.
filter: blur(10px)grayscale
요소의 무채색을 적용하는 속성으로 기본값은 100%이다. 100%일 경우 완전히 흑백 이미지가 되고, 0%일 경우 이미지가 그대로 유지된다.
filter: grayscale(40%)invert
요소가 가진 색상들을 반전 시키는 효과로 기본값은 100%이다. 100%일 경우 색을 정반대로 바꾸고, 0%일 경우 이미지를 그대로 유지합니다.
filter: invert(80%);drop-shadow
x, y축으로의 그림자 효과를 지정할 수 있다.
x축 기준점 위치, y축 기준점 위치, 그림자흐림정도, 그림자색상 순으로 값을 입력한다.
주의할 점은 요소의 배경색상이나 배경이미지가 없는 경우에만 내부에 있는 아이템의 경계에 맞게 아이템에 효과가 지정된다.
filter: drop-shadow(10px 20px 10px red);brightness
기본값은 1으로 요소의 밝기 정도를 나타내며 기본값 보다 작으면 어두워지고 높으면 밝아진다.
0%일 경우 완전히 검은색 이미지가 되고, 100%일 경우 이미지가 그대로 유지됩니다.
filter: brightness(1);contrast
색상의 대비를 조정해주는 함수로 기본값은 100%이다.
0%일 경우 완전히 회색 이미지가 되고, 100%일 경우 이미지가 그대로 유지됩니다.
filter: contrast(100%);opacity
요소의 투명도를 지정한다.
opacity 속성과 다른 filter의 함수이며 기본값이 100%로 시작되며 값은 퍼센트 단위로 이루어진다.
filter: opacity(80%);saturate
요소의 채도를 지정하며 기본값은 100%이다.
0%일 경우 완전히 무채색이 되고, 100%일 경우 이미지를 그대로 유지합니다.
filter: saturate(100%);sepia
sepia톤은 오래된 사진을 표현하는 톤과 비슷한 느낌의 톤을 지정하는 함수이다. 기본값은 100% 이다.
100%일 경우 완전히 세피아가 되고, 0%에서는 이미지를 그대로 유지합니다.
filter: sepia(0);hue-rotate
색의 분포가 이루어진 색 원형표를 기준으로 입력 각도에 해당하는 색조를 지정하는 함수이다.
0deg일 경우 이미지가 그대로 유지됩니다.
filter: hue-rotate(320deg);backdrop-filter
자기 자신에 filter 함수들을 적용하는 것이 아니라 해당하는 요소의 배경에 보여지는 영역에 한하여 filter 함수를 적용하는 속성이다.
backdrop-filter: blur(10px) grayscale();실습
참고자료
