[CSS] filter 적용하기

 

CSS filter를 이용해 사진에 다양한 이미지 변화효과를 부여할 수 있다.

필터는 주로 이미지, 배경, 테두리 렌더링 조정할 때 쓰인다.

SVG 필터도 적용할 수 있다고 한다.

 

/* SVG 필터를 가리키는 URL */
filter: url("filters.svg#filter-id");

/* <filter-function> 값 */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

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

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

/* 전역 값 */
filter: inherit;
filter: initial;
filter: unset;

 

1. blur(px)

블러효과 : 값이 높을 수록 블러 효과가 진해짐

2. brightness(%)

밝기조정 : 0(dark) < 100(default) < 101(bright)

- 0 보다 작으면 어두워지고, 100%는 기본값, 100% 보다 크면 밝아진다.

3. contrast(%)

대비조정 : 0(dark) < 100(default) < 101(bright)

4. grayscale(%)

회색조 : 0(default) ~ 100(완전회색)

5. hue-rotate(deg)

색조회전 : 0(default) ~ 360도

6. invert(%)

색반전 : 0(default) ~ 100 (흰-검) 밝기모드조정

7. saturate(%)

채도변화 : 0(색상의 양▼) < 100(default) < 101(색상의 양▲)

8. sepia(%)

세피아 : 0(default) ~ 100, 빈티지(컨셉) 

9. 다중효과

2개 이상 filter를 작성하면됨

10. 필터 없음

none 값 부여하면됨

11. drop-shadow()

이미지에 그림자 주기

2개의 파라미터 : x축 y축

3개의 파라미터 : x축 y축 blur의정도 / x축 y축 그림자색상

4개 파라미터 : 색상 x y blur / x y blur 색상

/* Two length values */
/* drop-shadow( <length> <length> ) */
drop-shadow(5px 5px)

/* Three length values */
/* drop-shadow( <length> <length> <length> ) */
drop-shadow(5px 5px 15px)

/* Two length values and a color */
/* drop-shadow( <length> <length> <color> ) */
drop-shadow(5px 5px red)

/* Three length values and a color */
/* drop-shadow( <length> <length> <length> <color> ) */
drop-shadow(5px 5px 15px red)

/* The order of color and length values can be changed */
/* drop-shadow( <color> <length> <length> <length> ) */
drop-shadow(#e23 0.5rem 0.5rem 1rem)
drop-shadow(0.5rem 0.5rem 1rem #e23)

 

📌 참고

[CSS3강좌] 34강 CSS filter속성 - 오쌤의 니가스터디