CSS Filter

 

 

CSS의 filter 속성을 사용하면 요소에 다양한 시각적 효과를 적용할 수 있습니다. 다음은 filter에 사용할 수 있는 주요 CSS 함수 목록입니다:

1. Blur

• blur(radius): 요소를 흐리게 합니다.
  • 예: filter: blur(5px);

2. Brightness

• brightness(factor): 요소의 밝기를 조정합니다. 값이 1일 때 원래 밝기, 0보다 작으면 어두워지고, 1보다 크면 밝아집니다.
  • 예: filter: brightness(1.5);

3. Contrast

• contrast(factor): 요소의 대비를 조정합니다. 값이 1일 때 원래 대비, 0이면 회색으로 변하고, 1보다 크면 대비가 높아집니다.
  • 예: filter: contrast(200%);

4. Drop Shadow

• drop-shadow(offsetX offsetY blurRadius color): 요소에 그림자를 추가합니다.
  • 예: filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.5));

5. Grayscale

• grayscale(factor): 요소를 흑백으로 변환합니다. 값이 0이면 원래 색상, 1이면 완전한 흑백입니다.
  • 예: filter: grayscale(100%);

6. Hue-Rotate

• hue-rotate(degrees): 요소의 색상을 회전시킵니다. 0°에서 360°까지의 값을 사용할 수 있습니다.
  • 예: filter: hue-rotate(90deg);

7. Invert

• invert(factor): 요소의 색상을 반전시킵니다. 값이 0일 때 원래 색상, 1일 때 반전된 색상입니다.
  • 예: filter: invert(100%);

8. Opacity

• opacity(factor): 요소의 불투명도를 조정합니다. 값이 0이면 완전 투명, 1이면 완전 불투명입니다.
  • 예: filter: opacity(0.5);

9. Saturate

• saturate(factor): 요소의 채도를 조정합니다. 값이 1일 때 원래 채도, 0이면 회색, 1보다 크면 채도가 높아집니다.
  • 예: filter: saturate(150%);

10. Sepia

• sepia(factor): 요소에 세피아 효과를 적용합니다. 값이 0일 때 원래 색상, 1일 때 완전 세피아입니다.
  • 예: filter: sepia(100%);

 

---

사용 예시

여러 필터를 조합하여 사용할 수도 있습니다:

img {
    filter: blur(5px) brightness(1.2) grayscale(50%);
}

 

위의 함수들을 사용하여 다양한 시각적 효과를 만들어낼 수 있으며, CSS 필터는 특히 이미지, 비디오, 텍스트 등에 유용하게 활용됩니다.