Filter

오민영·2023년 2월 20일
0

CSS

목록 보기
17/22

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

https://blog.naver.com/jsy930609/221671999277

https://css-tricks.com/almanac/properties/f/filter/

profile
이것저것 정리하는 공간

0개의 댓글