CSS 의 filter 속성 정리

< 참고 자료 >

 

developer.mozilla.org/en-US/docs/Web/CSS/filter

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

---

CSS 에는 해당 요소에 먹일수있는 filter 속성이 있다. 

이 filter 의 파라미터들은 라이트룸에서 사용하는것과 동일하다고 생각하며 된다.

하나씩 살펴보자.

---

div { filter: blur(50px); }

---

div { filter: brightness(0.5); }

brightness 는 0 이 되면 검정색이 되고, 1이 되면 background-color 색이 된다.

---

div { filter: contrast(50%); }

contrast 는 사진 보정할때 contrast 를 생각하면 된다.

constrast 값 100% 가 기본이고, 더 올릴수도, 내일수도있다.

현재 하나의 도형이라서 잘 못느끼겠지만, 

이미지 파일로 하면 더 잘 contrast 를 느낄수있을것이다.

---

div { filter: drop-shadow(16px 16px 20px blue); }

box-shadow 와 달리 inset 이 불가능하다.

shadow 를 만들고자한다면 box-shadow 를 사용하자.

---

div { filter: grayscale(100%); }

grayscale 은 100% 가 되어갈수록, 점점 회색화 시켜준다.

0% 일때 background-color 색이다.

---

div { filter: saturate(0%); }

채도를 설정하는것인데, grayscale 과 반대라고 보면 된다.

0% 일때는 색이 다 빠져 회색이 되고, 100% 가 되면 

background-color 가 된다.

---

div { 
    
    filter: hue-rotate(90deg);
    filter: invert(75%);
    filter: opacity(25%);
    filter: sepia(60%);

}

이외에 것들이다. 잘 안쓸꺼같아 따로 정리하지는 않겠다.

위에 코드처럼, 여러개의 filter 를 사용할수있으며,

또는 한줄로 적을수도있다.

div { 
    
    filter: contrast(175%) brightness(3%);

}

---

filter opactiy vs opacity

 

필터의 opacity 가 브라우저에 따라 더 나은 성능을 가질수있다고 한다.

 

Note: This function is similar to the more established opacity property.

The difference is that with filters, some browsers provide hardware acceleration for better performance