css filter속성

 

css filter 속성

흐림 효과나 색상 변형 등 그래픽효과를 요소에 적용

보통 필터는 이미지, 배경 테두리 렌더링을 조정하는 데 쓰입니다.

 

 

 

 

filter 값

filter : blur(5px); /* 흐림도 결정 */
filter : brightness(0.4); /* 밝기 결정 */
filter : contrast(200%); /* 명암대비 결정 */
filter : drop-shadow(16px 16px 20px blue); /* box-shadow와 같은 값 */
filter : grayscale(50%); /* 흑백화하는 속성 */
filter : hue-rotate(90deg); /* 색상을 변경 */
filter : invert(75%); /* 색상과 명암을 한번에 반전 */
filter : saturate(30%); /* 채도를 변경 */
filter : opacity(25%); /* 투명도 */
filter : sepia(60%); /* 갈색톤을 변경 */

/* 다중값*/
filter : contrast(175%) brightness(3%);

/* 필터 없음 */
filter : none;

/* 전역값 */
filter : inherit; /* 상속받다 */

 

 

 

 

blur()

- blur()요소는 흐림도를 결정하는 속성

- 0px이 기본값

- 수치가 커질수록 흐림 정도가 심해짐

 

(왼쪽) 3px / (오른쪽) 14px

 

 

 

 

 

brightness()

- 요소의 밝기 정도를 결정하는 속성

- 1이 기본값

- 0으로 근접할수록 어두워지고, 1보다 수치값이 커질수록 점점 밝아진다.

- 0% 일 경우 완전히 검은색 이미지, 100%일 경우 이미지가 그대로 유지

 

수치값 : 0.5 / 1 / 1.5

 

 

 

 

contrast()

- 요소의 명암대비를 결정하는 속성

- 0%일 경우 완전히 회색 이미지가 되고, 100%일 경우 이미지가 그대로 유지됨

- 작아지면 명도대비가 낮아지고, 높아질수록 대비가 심해진다.

 

수치값 : 0% / 50% / 150%

 

 

 

 

drop-shadow()

- 주어진 이미지에 그림자 효과를 적용합니다.

- box-shadow와 쓰는 속성값이 같다.

drop-shadow(5px 5px 10px #aaa);
//가로, 세로, 번지는효과, 색상

 

 

 

 

 

 

grayscale()

- 주어진 이미지를 흑백으로 변환합니다.

- 0%일 경우 이미지가 그대로 유지되며, 100%일 경우 완전히 흑백 이미지가 됩니다.

 

수치값 : 0% / 50% / 100%

 

 

 

 

 

hue-rotate()

- 이미지 색상환을 기준으로 요소의 색상을 변경

- 0deg 경우 이미지가 그대로 유지 ~ 360deg로 각도를 증가시킬수록 색상이 점점 변경된다.

(최대값이 존재하지는 않지만, 360deg 이상의 값은 0deg와 360deg 사이를 순환합니다.)

- 현재 색상의 정반대색을 지정하고 싶다면, 현재 색상의 정반대편인 180deg를 지정

 

수치값 : 60deg / 180deg / 300deg

 

 

 

 

 

invert()

- 요소의 색상과 명암을 한번에 반전시키는 속성

- 0% 일경우 이미지를 그대로 유지하며, 100%로 근접할수록 반전도가 심해진다.

 

수치값 : 0%(기본값) / 100%

 

 

 

 

 

saturate()

- 요소의 채도를 변경하는 속성

- 1이 기본값 = 100%일 경우 이미지 그대로 유지

- 0%에 근접할수록 채도가 점점 낮아져서 흑백에 가까워진다.

- 1보다 커질수록 채도가 높아진다.

 

수치값 : 0.4 / 10 / 50

 

 

 

 

 

sepia()

- 요소의 갈색톤을 변경하는 속성

- 0%가 기본값이고 100%로 증가할수록 갈색톤이 증가

 

수치값 : 20% / 60% / 100%