CSS - 필터(filter)로 다양한 그래픽 효과주기

닌니디자인 CSS 썸네일

filter

HTML 요소에 다양한 시각 효과를 적용하기 위해 사용한다. 이 속성은 이미지나 배경뿐만 아니라 텍스트나 다른 요소에도 그래픽 효과를 적용할 수 있다. 여러 함수를 조합하여 사용할 수 있으 순서는 상관없다.

blur(px)	블러 효과. 픽셀 단위로 블러 정도를 지정하고 값이 클수록 더 흐릿해진다.
brightness(%)	밝기를 조절. 100%가 기본값이며, 그 이상의 값은 밝게, 그 이하의 값은 어두워진다.
contrast(%)	명암 대비를 조절. 100%가 기본값이며, 그 이상의 값은 대비를 높이고, 그 이하의 값은 대비를 줄인다.
drop-shadow(x y blur spread color)	이미지에 그림자 효과. x, y 값은 위치를 나타내고 필수사항이다. blur는 블러정도(음수값 X)를, spread는 그림자 확산정도를, color는 색상을 나타내며 선택사항이다.
grayscale(%)	흑백 효과. 값은 0부터 100% 까지로, 100% 이면 완전한 흑백이 된다. (음수값 X)
hue-rotate(deg)	색상 회전. 각도 단위(deg)로 지정되며, 양수는 시계 방향으로 회전하고, 음수는 반시계 방향으로 회전한다. (최대값: 360deg)
invert(%)	색상 반전. 값은 0부터 100% 까지로, 100% 이면 완전한 반전이 된다. (음수값 X)
opacity(%)	투명도. 값은 0부터 100% 까지로, 100% 이면 완전히 불투명하고, 0이면 완전히 투명하다. (음수값 X)
saturate(%)	채도 조절. 100% 가 기본값이며, 그 이상의 값은 채도를 높이고, 그 이하의 값은 채도를 줄인다. (음수값 X)
sepia(%)	세피아 톤 효과. 값은 0부터 100% 까지로, 100% 이면 완전한 세피아 톤이 됩니다.

 

 

 

---

 

blur()

 

 

 

brightness()

 

 

 

contrast()

 

 

 

drop-shadow()

 

 

 

grayscale()

 

 

 

hue-rotate()

 

 

 

invert()

 

 

 

opacity()

 

 

 

saturate()

 

 

sepia()

 

 

 

---

 

참고사이트

CSS filter Property