CSS로 만든 크로스 브라우저 흑백 효과

IE의 경우는 기본 흑백만 제공하고, 캔버스 태그에서 온갖 효과 기능들이 생겨났지만..

다행인 것은 바로 흑백 효과를 CSS를 통해 볼 수 있다는 것이다.

굉장하지 아니한가?

CSS 코드는 아래와 같다.

.grayscale { 
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: url(grayscale.svg); /* Firefox 4+ */
  filter: gray; /* IE 6-9 */
}

안타깝게도 불여우같은 경우 (달버전 말고)는 grayscale.svg 파일이 별도로 필요하다.

일단 여기에 data:uri 적용해놨는데 이게 성공한다면 외부에 의지할 필요가 없는 최고의 상태지만, 실패한다면 안습.

불여우 사용자 중 아래 그림이 흑백으로 보이거나 안보인다면 제보 바란다.

출처는 http://labs.voronianski.com/css3-grayscale/

Download ZIP (with .svg)

composite / 2013년 12월 13일 / 미분류
태그:, , , , , , ,

Comments

  1. 손님 - 2013년 12월 14일 @ 12:03 오후

    Mac OS X 10.9 Firefox 25.0.1 위의 이미지는 보이고 아래 이미지는 전혀 보이지 않습니다.

    Reply
  2. dummy - 2013년 12월 15일 @ 6:40 오전

    윈7 위와 동일합니다. 안보여요.

    출처 링크의 페이지는 잘 동작하네요.

    Reply

답글 남기기

Your email address will not be published / Required fields are marked *