CSS 심화 - Filter

Filter

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

linear-gradient

색상을 정의하여 그라데이션을 지정한다.
주의해야 할 점은 background-color가 아닌 background-image에 사용하는 함수이다.

background-image: linear-gradient(orange, royalblue);

blur()

요소의 흐림 정도를 px 단위로 지정한다.

filter: blur(4px);

grayscale()

%로 지정하며 요소의 색상을 흑백으로 보여준다. 인수를 생략하면 기본값은 100%이다.

filter: grayscale(100%);

invert()

%로 지정하며 요소의 색상을 반전시켜 보여준다. 인수를 생략하면 기본값은 100%이다.

filter: invert(100%);

drop-shadow()

요소에 그림자를 생성한다. 쉼표가 아닌 띄어쓰기로 구분한다.
box-shadow처럼 그림자의 크기를 지정하는 옵션은 없다.
색상을 지정하지 않으면 글자 색상을 상속받고, 흐림 정도를 지정하지 않으면 선명하게 생성된다.
요소에 배경 색상과 배경 이미지가 없는 경우에만 내부에 들어있는 요소의 경계선에 맞게 그림자가 생성된다.

filter: drop-shadow(10px 20px 10px red);
/* x축 거리, y축 거리, 흐림 정도, 그림자 색상 */

brightness()

요소의 명도를 지정한다. 기본값은 1이다.
숫자가 작을수록 더 어두워지고 커질수록 밝아진다.

filter: brightness(.5); /* 0은 생략 가능 */

contrast()

요소의 대비를 지정한다. 기본값은 100%이다.

filter: contrast(100%);

opacity()

요소의 투명도를 지정한다. 기본값은 100%이다.
opacity 속성과 다른 점은 % 단위로 지정한다는 것이다.

filter: opacity(100%);

saturate()

요소의 채도를 지정한다. 기본값은 100%이다.

filter: saturate(50%);

sepia()

요소의 sepia(오래돼서 바래진 느낌)톤을 지정한다. 기본값은 100%이다.
0이면 sepia가 없는 것과 같다.

filter: sepia();

hue-rotate()

요소의 색조를 변경한다.
각도를 입력하여 hue rotate 색조를 지정한다.

filter: hue-rotate(300deg);

backdrop-filter

filter와 다르게 요소 자체에 필터 효과를 적용하는 것이 아닌 배경에 대한 필터 처리를 한다. filter에서 사용하던 함수들을 동일하게 적용할 수 있다.

backdrop-filter: blur(10px);

filter 예제

<div class="container">
  <div class="item"></div>
  <img src="https://interactive-examples.mdn.mozilla.net/media/examples/firefox-logo.svg" alt="파이어폭스 아이콘">
</div>
<div class="cover"></div>

.container {
  filter: hue-rotate(300deg);
}
.container .item{
  width: 120px;
  height: 120px;
  background-image: linear-gradient(orange, royalblue); 
}

.container img{
  width: 220px;

}

.cover{
  width: 150px;
  height: 200px;
  border: 4px solid;
  position: fixed;
  top: 30px;
  left: 30px;
  backdrop-filter: blur(10px) grayscale(); /* 함수들을 띄어쓰기로 연달아서 작성 가능 */
}