Properties

Properties

Draft
  • account_tree
  • bug_report

filter

요소에게 함수를 통해 시각적 효과를 정의한다.

설명

주로 이미지에게 적용한다.

설정 가능한 속성 값

  • none기본값상수CSS3

    필터 효과를 적용하지 않는다.

  • blur(px)함수CSS3

    이미지에 흐림(blur)효과를 적용한다. 인수로 주어진 값이 클수록 흐려짐이 커진다. 값을 생략하면 0이 된다.

    filter 속성의 blur 테스트

  • brightness(%)함수CSS3

    이미지의 밝기를 설정한다. 0~100% 범위의 값으로 설정이 가능하며 0%이면 이미지는 완전 검정으로 기본 값이 100%(1)은 원본 이미지의 밝기를 의미한다. 100%를 초과하는 경우에는 더 밝은 결과를 만들어준다.

    filter 속성의 brightness 테스트

  • contrast(%)함수CSS3

    이미지의 대비를 설정한다. 인수 값이 0% 이면 완전 검정이 되며 100%(1)은 기본 값이며 원본 이미지가 가지고 기본 대비를 의미한다. 100%를 초과하면 대비가 적은 결과를 만든다.

    filter 속성의 contrast 테스트

  • drop-shadow(offset-xoffset-yblur-radiusspread-radiuscolor)함수CSS3

    이미지에게 그림자 효과를 적용한다. 각 인수의 값을 공백으로 구분하여 작성하며 인수로 설정해야 할 값들 중에서 offset-x는 필수 값이며 수평 방향의 그림자의 위치를 픽셀 단위의 값으로 지정한다. 음수 값은 이미지의 왼쪽에 그림자를 만든다. offset-y 역시 필수 값이며 수직 방향의 그림자의 위치를 픽셀 단위의 값으로 지정한다. 음수 값은 이미지의 위쪽에 그림자를 만든다.

    세번째 인수인 blur-radius는 선택사항이며 픽셀 단위로 값을 설정하여 그림자에 흐림 효과를 적용한다. 만일 생략하면 0이되며 그림자가 선명해진다.

    네번째 인수인 spread-radius는 역시 선택사항이며 픽셀 단위로 값을 설정하여 그림자의 확장과 축소를 해준다. 양수 값을 지정하면 그림자는 확장되고 음수 값을 지정하면 그림자는 축소된다. 생략하면 0이 설정되며 요소와 동일한 크기의 그림자가 만들어 진다. 하지만 이 인수는 대부분의 웹브라우저에서 지원하지 않는다. 오히려 설정을 하면 그림자 효과가 나타나지 않는다.

    다섯번째 인수인 color는 그림자의 색상을 지정한다. 생략하면 웹브라우저의 기본 값으로 처리된다. 참고로 이 함수는 box-shadow 속성과 비슷하다. 차이점이라면 inset을 지원하지 않으며 일부 웹브라우저에서는 성능 향상을 위해 하드웨어 가속 기술을 사용하기도 한다.

    filter 속성의 drop-shadow 테스트

  • grayscale(%)함수CSS3

    이미지를 회색 음영으로 변환한다. 0%는 기본 값이며 원본 이미지를 뜻하며 100%는 이미지를 회색으로 변환한다. 음수 값은 허용되지 않는다.

    filter 속성의 grayscale 테스트

  • hue-rotate(deg)함수CSS3

    이미지에 색상환의 값을 적용한다. 0deg가 기본 값이며 원본 이미지를 의미한다. 360deg가 최대 값이다.

    filter 속성의 hue-rotate 테스트

  • invert(%)함수CSS3

    이미지를 반전한다. 0%는 기본 값이며 원본 이미지를 의미한다. 100%는 이미지를 완전히 반전처리한다. 음수 값은 허용하지 않는다.

    filter 속성의 invert 테스트

  • opacity(%)함수CSS3

    이미지에게 불투명도 레벨을 적용한다. 0%는 완전히 투명하게 하며 100%(1)는 기본 값이며 원본 이미지를 그대로 보여준다. 음수 값은 허용하지 않는다. 참고로 이 필터함수는 opacity 속성과 유사하다.

    filter 속성의 opacity테스트

  • saturate(%)함수CSS3

    이미지의 채도를 설정한다. 0%로 설정하면 채도를 없애고 흑백 이미지로 변환한다. 100%는 기본 값이며 원본 이미지의 채도를 의미한다. 100%를 초과하는 경우에는 채도가 높아진다. 음수 값은 허용하지 않는다.

    filter 속성의 saturate 테스트

  • sepia(%)함수CSS3

    이미지를 어두운 갈색조로 변환한다. 0%(0)는 기본 값이며 원본 이미지를 그대로 둔다. 100%는 이미지를 완전 갈색조로 변환한다. 음수 값은 허용하지 않는다.

    filter 속성의 sepia 테스트

  • url(xml)함수CSS3

    url() 함수를 통해 SVG 필터를 지정하는 XML 파일의 경로를 인수로 지정하여 특정 필터 요소에 대한 앵커를 포함할 수 있다.

  • initial키워드CSS3

    CSS 기본 값으로 설정한다.

구문

  • filter none;기본값CSS3

    필터를 적용하지 않는다.

  • filter blur() or brightness() or contrast() or drop-shadow() or grayscale() or hue-rotate() or invert() or opacity() or saturate() or sepia() or url();기본형식CSS3

    준비된 함수를 통해서 효과를 적용한다.

  • filter brightness() drop-shadow();기본형식CSS3

    두 개 이상의 필터를 공백으로 구분하여 적용할 수 있다.

    두 개 이상의 filter 속성 테스트

지원 웹브라우저