8.CSS Filter

1. CSS Filter 함수

  - drop-shadow

  - grayscale

  - sepia

  - saturate

  - hue-rotate

  - invert

  - opacity

  - bright

  - contrast

  - blur

1. CSS Filter 함수

---

1. CSS3 Filter 속성을 사용하면 블러나 색상 변경같은 효과를 요소에 적용할 수 있다. 필터는 일반적으로 이미지, 배경, 테두리의 효과를 조정하는데 사용된다. 이미지 필터링 같은 경우는 어떤 이미지에 대해 다른 스타일을 줄 수 있다. 웹사이트에 여러개의 이미지를 업로드하는 대신 하나의 이미지로 필터 속성만 바꿔가면서 시각적인 효과를 줄 수 있다.

 필터 함수는 blur(), brightness(), contrast(), drop-shadow(), grayscale(), hue-rotate(), invert(), opacity(), saturate(), sepia() 를 포함한다. Filter 속성은 IE, Edge12, Safari5.1 이전 버전에서는 지원하지 않는다.

2. drop-shadow(width, height, blur, color) : 요소에 그림자 효과를 부여한다.

img { width: 130px; height: 100px; } .dropshadow { filter: drop-shadow(5px 9px 2px blue); -webkit-filter: drop-shadow(5px 9px 2px blue); }

 

3. grayscale(0~100%) 함수는 이미지를 흑백효과로 만든다. 0%는 원본 이미지이고 100%는 완전 흑백으로 된 이미지로 변경된다.

.filtered { filter: grayscale(90%); }

4. sepia(0~100%) 함수는 이미지에 세피아 효과(흑백효과와 비슷하지만 적갈색 톤)를 적용한다. 0%는 원본 이미지이고 100%는 완전 세피아 효과가 적용된 이미지이다.

.filtered { filter: sepia(100%); }

5. saturate(% or number) 함수는 이미지의 채도 효과를 조절한다. 0%는 채도없음(흑백)이 되고 100%는 원본 이미지이다.

250%와 2.5는 같은 효과를 갖는다.

.filtered { filter: saturate(250%); }

6. hue-rotate(number deg) 함수는 이미지의 색조를 조절한다. 0~360까지 입력이 가능하며 빨간색에서~보라색으로 변경된다.

DownloadFile

.filtered { filter: hue-rotate(180deg); }

7. invert(%) 함수는 이미지에 보색 효과를 적용시킨다. 매개변수는 보색 비율이다. 0%는 원본 이미지이고 100%는 보색 이미지를 표현한다.

.filtered { filter: invert(100%); }

8. opacity(%) 함수는 이미지의 투명도를 조절한다. 0%는 완전 투명한 이미지고 100%는 원본 이미지다.

.filtered { filter: opacity(70%); }

9. bright(% or number) 함수는 이미지의 밝기를 조절한다. 0%는 완전 검은색 이미지고 100%는 원본 이미지. 100%가 넘어가면 밝은 이미지가 된다. 190%는 1.9와 같다.

.filtered { filter: brightness(50%); }

10. contrast(% or number) 함수는 이미지의 대조 효과를 조절한다. 0%는 이미지를 회색으로 만들고 100%는 원본이미지. 100%가 넘어가면 대조 효과를 증대시킨다. 0.5는 50%와 같다.

.filtered { filter: contrast(250%); }

11. blur(radius) 함수는 이미지에 흐림 효과를 적용한다. 파라미터는 px값으로 얼마나 많은 픽셀이 서로 섞여서 흐려질지 결정한다. 클수록 더 흐려진다.

.blured { filter: blur(5px); }

12. CSS Filter 동시적용

  공백으로 구분하여 filter 함수를 동시에 적용할 수 있다.

.filtered { filter: saturate(30%) drop-shadow(5px 9px 2px gray) blur(1px); }

<연관게시글>