[CSS] filter 총정리

 CSS filter 속성은 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용합니다.

 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 쓰입니다.

 SVG 필터 요소를 가리키는 URL 참조를 사용하여 SVG 필터를 적용할 수도 있습니다.

 

 

 

필터 기능(filter-function)의 종류

 

blur( ): 가우시안 블러를 적용

적용값: [length] 0 ~ n px

filter: blur(5px);

 

 

 

 

brightness( ): 선형 배수를 적용해 이미지를 밝거나 어둡게

적용값: [amount] 0%, 0(검은색) ~ 100%, 1(그대로 유지) 100%이상 값 가능

filter: brightness(0.5);

 

 

 

 

contract( ): 대비 조정

적용값: [amount] 0%, 0(완전 회색) ~ 100%, 1(그대로 유지)   *100%이상 값 가능(대비가 더욱 큰 이미지 생성)

filter: contrast(200%);

 

 

 

 

drop-shadow( ): 그림자효과

적용값: [length] *blur-radius :흐려지는 반경

<offset-x>	<offset-y>	<blur-radius>	<color>
(필수)	(필수)	(선택)	(선택)
0 ~ n px	0 ~ n px	0 ~ n px	#color

 

filter: drop-shadow(16px 16px 10px black);

 

 

 

 

grayscale( ): 흑백 변환

적용값: [amount] 0%(원본) ~ 100%(완전 흑백)

filter: grayscale(100%);

 

 

 

 

hue-rotate( ): 색조 회전

적용값: [angle] 0deg(원본) ~ 360deg

filter: hue-rotate(90deg);

 

 

 

 

invert( ): 색 반전

적용값: [amount] 0%(원본) ~ 100%(반대)

filter: invert(100%);

 

 

 

 

opacity( ): 불투명도 설정

적용값: [amount] 0%(투명) ~ 100%(원본)

filter: opacity(50%);

 

 

 

 

saturate( ): 채도 변경

적용값: [amount] 0%(무채색) ~ 100%(원본)    *100%이상 값 가능(원본보다 채도가 큰 이미지 생성)

filter: saturate(200%);

 

 

 

 

sepia( ): 세피아로 변경(갈색 계열)

적용값: [amount] 0%(원본) ~ 100%(세피아)

filter: sepia(100%);

 

 

 

 

 

필터 기능(filter-function)의 예제

 

필터 함수 적용

미리 정의된 함수 사용

.mydiv {
  filter: grayscale(50%);
}

/* 모든 이미지를 50% 흑백 처리하고 10px 흐리게 */
img {
  filter: grayscale(0.5) blur(10px);
}

 

 

SVG 필터 적용

URL 함수와 SVG 리소스를 사용하는 방법

.target {
  filter: url(#c1);
}

.mydiv {
  filter: url(commonfilters.xml#large-blur);
}