IE 지원 안함
filter 속성은 흐림 효과나 색상 변형, 대비 조절 등 그래픽 효과를 요소에 적용한다.
보통 filter는 이미지, 배경, 테두리 렌더링을 조정하는데 쓰인다.
img, svg, div 등에 적용할 수 있다.
svg filter
svg 필터를 가리키는 URI를 받는다.
filter: url();
filter: url(resources.svg#C1);filter 함수
blur( )
주어진 이미지에 가우시안 블러 효과를 적용한다.
값이 클수록 이미지가 흐려진다.
px단위로 조정한다.
filter: blur( )
/* 예시 */
filter: blur(5px)brightness( )
주어진 이미지에 선형 배수를 적요해서 이미지를 밝거나 어둡게 표시한다.
0%인 경우 검은색 이미지가 되고, 100%인 경우 이미지가 그대로 유지된다.
100%보다 큰 값도 허용되며, 이때는 더 밝은 이미지가 생성된다.
filter: brightness( )
/* 예시 */
filter: brightness(0.5)contrast( )
주어진 이미지의 대비를 조정한다.
0%인 경우 완전 회색 이미지가 되고, 100%인 경우 이미지가 그대로 유지된다.
100%보다 큰 값도 허용되며, 이때는 대비가 더 큰 이미지가 생성된다.
filter: contrast( )
/* 예시 */
filter: contrast(200%)drop-shadow( )
주어진 이미지에 그림자 효과를 적용한다.
filter: drop-shadow(offset-x offset-y blur-radius(선택) color(선택)>
/* 예시 */
filter: drop-shadow(16px 16px 10px black)grayscale( )
주어진 이미지를 흑백으로 변환한다.
amout 값은 흑백으로 전환하는 비율을 지정한다.
100%일 경우, 완전히 흑백 이미지가 되고, 0%인 경우 이미지가 그대로 유지되며, 그 사이 값은 효과의 선형 배수로 작용한다.
filter: grayscale(100%)hue-rotate( )
주어진 이미지에 색조 회전을 적용한다.
angle 값은 입력 샘플을 조절할 색상환 각도이다.
0deg인 경우, 이미지가 그대로 유지되고, 360deg 이상의 값은 0 ~ 360deg 사이를 순환한다.
filter: hue-rotate(90deg)invert( )
주어진 이미지의 색을 반전한다.
amout 값이 변형 정도를 지정한다.
100%인 경우 생을 정 반대로 바꾸고, 0%인 경우 이미지를 그대로 유지한다.
filter: invert(100%)opacity( )
주어진 이미지의 불투명도를 설정한다.
amount 값이 변형 정도를 지정한다.
0%인 경우, 완전히 투명해지고 100%인 경우 이미지를 그대로 유지한다.
filter: opacity(50%)saturate( )
주어진 이미지의 채도를 변경한다.
amount 값이 변형 정도를 지정한다.
0%인 경우 완전히 무채색이 되고, 100%인 경우 이미지를 그대로 유지하며 그 사이의 효과는 선형 배수로 작용한다.
filter: saturate(200%)sepia( )
주어진 이미지를 세피아로 변환한다.
amount 값이 변형 정도를 지정한다.
100%인 경우 완전히 세피아가 되고, 0%인 경우 이미지를 그대로 유지하며 그 사이의 값은 효과의 선형 배수로 작용
함수 조합
원하는 만큼 함수를 조합해서 그려지는 모습을 바꿀 수 있다.
https://codepen.io/ohmy0418/pen/KKvEKNe
Reference
https://developer.mozilla.org/ko/docs/Web/CSS/filter
