filter 속성

in Dev / Css on CSS

filter 속성은 흐림 효과나 색상 변형 등 그래픽 효과를 요소에 적용한다. 보통 필터는 이미지, 배경, 테두리 렌더링을 조정하는 데 쓰인다.

blur()

blur() 함수는 주어진 이미지에 가우시안 블러를 적용한다. radius 값은 화면에서 혼합할 픽셀의 수를 지정하므로 값이 클수록 이미지가 흐려진다.

filter: blur(5px)

brightness()

brightness() 함수는 주어진 이미지를 밝거나 어둡게 표시한다. 0%일 경우 완전히 검은색 이미지가 되고, 100%일 경우 이미지가 그대로 유지된다. 100% 보다 큰 값도 허용되며, 이때는 더 밝은 이미지가 생성된다.

filter: brightness(0.5)

contrast()

contrast() 함수는 주어진 이미지의 대비를 조정한다. 0%일 경우 완전히 회색 이미지가 되고, 100%일 경우 이미지가 그대로 유지된다. 100%보다 큰 값도 허용되며, 이때는 대비가 더 큰 이미지가 생성된다.

filter: contrast(200%)

drop-shadow()

contrast() 함수는 주어진 이미지에 그림자 효과를 적용한다. 이때 추가하는 그림자는, 주어진 이미지의 알파 마스크에 특정한 색상과 오프셋, 흐림 효과를 적용하고 이미지 밑에 합성한 것이다. <shadow> 값의 매개변수는 다음과 같다.

  • <offset-x>, <offset-y> (필수)
    • <offset-x>는 가로 거리를 지정하며, 음수일 경우 그림자가 왼쪽에 배치된다.
    • <offset-y>는 세로 거리를 지정하며, 음수일 경우 그림자가 위쪽에 배치된다.
    • 모두가 0이면 그림자가 요소 바로 밑에 배치되며, <blur-radius> 나 <spread-radius>를 설정한 경우 흐림 효과를 표시할 수 있다.
  • <blur-radius> (선택)
    • 클수록 흐려지는 반경이 커지고 그림자가 옅어진다.
    • 음수 값은 사용할 수 없다.
    • 값을 지정하지 않으면 0으로 취급하여 그림자 가장자리가 날카로워진다.
  • <spread-radius> (선택)
    • 값을 지정하지 않았ㅇ르 때의 색상은 브라우저에 따라 다르다.
      filter: drop-shadow(16px 16px 10px black)

grayscale()

grayscale() 함수는 주어진 이미지를 흑백으로 변환한다. amount 값은 흑백으로 전환하는 비율을 지정한다. 100%일 경우 완전히 흑백 이미지가 되고, 0%일 경우 이미지가 그대로 유지된다.

filter: grayscale(100%)

hue-rotate()

hue-rotate() 함수는 주어진 이미지의 색조 회전을 적용한다. 0deg일 경우 이미지가 그대로 유지된다. 최댓값이 존재하지는 않지만, 360deg 이상의 값은 0deg와 360deg 사이를 순환한다.

filter: hue-rotate(90deg)

invert()

invert() 함수는 주어진 이미지의 색을 반전한다. 100%일 경우 색을 정반대로 바꾸고, 0%일 경우 이미지를 그대로 유지한다.

filter: invert(100%)

opacity()

opacity() 함수는 주어진 이미지의 불투명도를 설정한다. 0%일 경우 완전히 투명해지고, 100%일 경우 이미지를 그대로 유지한다.

filter: opacity(50%)

saturate()

saturate() 함수는 주어진 이미지의 채도를 변경한다. 0%일 경우 완전히 무채색이 되고, 100%일 경우 이미지를 그대로 유지한다. 100%보다 큰 값도 허용되며, 이때는 원본보다 채도가 큰 이미지를 생성한다.

filter: saturate(200%)

sepia()

sepia() 함수는 주어진 이미지를 세피아로 변환한다. 100%일 경우 완전히 세피아가 되고, 0%에서는 이미지를 그대로 유지한다.

filter: sepia(100%)

/* <filter-function> 값 */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* 다중 값 */
filter: contrast(175%) brightness(3%);

/* 필터 없음 */
filter: none;

/* 전역 값 */
filter: inherit;
filter: initial;
filter: unset;
* TOC {:toc}

© 2021. All rights reserved.