CSS filter

요즘은 앱이 너무 잘나와서 굳이 포토샵으로 보정 할 필요가 없을 정도이다!
그 래 서!!
css로 이미지 필터 효과를 낼 수 있는 사랑스러운 아이에 대해 써보려 한다!

이미지의 색상, 밝기, 블러, 반전 등
포토샵보다 못하지만 조절만 잘 해줘도 이미지에 다양한 효과를 보여 줄 수 있다.
추가로 마우스 오버 같은 이벤트로 각각 다른 효과를 넣으면 보다 멋진 표현이 가능하다.👩‍🔧

filter:

blur : 흐림 효과
brightness : 밝기 조정
contrast : 대비 조정
grayscale : 회색조 변환
huerotate : 색조 회전
invert : 색상 반전
opacity : 투명도
saturate : 이미지 포화
sepia : 세피아 변환
shadow :그림자 효과

---

현재 제일 잘 쓰고 있는 filter 4가지!

grayscale (흑백 100% 회색 변경)

0.0 ~ 1.0 사이의 값 입력

hue-rotate (hue(색조, 색상),angle(각도)를 지정 변경)

0,360deg, 720deg는 변화 없음

saturate (채도 변경)

1(변화없음) ~ 9(900%)

sepia (갈색 효과 )

0 ~ 1(100%)

---

css filter를 조금만 잘써도 포토샵 한 아이처럼 이쁘게 만들 수 있다!! 할 수 있다!! 아자아자

https://www.w3schools.com/cssref/css3_pr_filter.php(참고)