본문 바로가기

프로그래밍/web

css3 Filter 효과

IE에서는 필터효과를 사용하여 이미지 렌더링할 수 있는 방법들이 있다. 하지만 그것은 표준을 무시한 방법으로 IE에서만 되는 것이었고, 윈도의 DX를 끌어다 쓰는 것이기 때문에 호환성에 문제가 많았다.

HTML5표준이 제정되고 브라우저간의 호환성이 굉장히 중요하기 시작했다. 그리고 최근에 IE의 필터와는 다른 css3의 filter효과가 채택되었다.

https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html

굉장히 장문의 글을 볼 수 있다. 모든 브라우저에서 똑같은 환경을 구현해야 하다 보니 굉장히 구체적이다. 색상을 어떤식으로 표현해야하는지에 대한 내용도 상당부분 있음을 볼 수 있다. 표준이라는 것은 정하기 어려운 것이지만 호환성을 위해 어쩔 수 없는 선택인듯하다.

그러면 새로 나온 필터효과들을 구경하자. 현재 filter효과는 크롬 카나리아 빌드에서만 확인할 수 있다.

크롬 카나리아 빌드: http://tools.google.com/dlpage/chromesxs

아래 링크로 들어가면 예제들을 확인할 수 있다.

http://cfs.tistory.com/custom/blog/93/932846/skin/images/filter_test.html?=687568954

확인하기 귀찮은 분들은 사진으로나마 확인하시기 바랍니다.

필터효과굉장히 멋있지 않습니까?


이 효과들을 구현하는데 얼마나 많은 코드가 필요할까요? HTML5의 filter효과와 함께라면 걱정할 필요 없습니다.


<img src="https://t1.daumcdn.net/cfile/tistory/136A473D4F70845836" style="" />

<img src="https://t1.daumcdn.net/cfile/tistory/136A473D4F70845836" style="-webkit-filter: blur(2px);" />

<img src="https://t1.daumcdn.net/cfile/tistory/136A473D4F70845836" style="-webkit-filter: brightness(30%);" />

<img src="https://t1.daumcdn.net/cfile/tistory/136A473D4F70845836" style="-webkit-filter: contrast(30%);" />

<img src="https://t1.daumcdn.net/cfile/tistory/136A473D4F70845836" style="-webkit-filter: grayscale();" />

<img src="https://t1.daumcdn.net/cfile/tistory/136A473D4F70845836" style="-webkit-filter: sepia();" />

<img src="https://t1.daumcdn.net/cfile/tistory/136A473D4F70845836" style="-webkit-filter: invert();" />

<img src="https://t1.daumcdn.net/cfile/tistory/136A473D4F70845836" style="-webkit-filter: opacity(30%);" />

<img src="https://t1.daumcdn.net/cfile/tistory/136A473D4F70845836" style="-webkit-filter: saturate(50%);" />

<img src="https://t1.daumcdn.net/cfile/tistory/136A473D4F70845836" style="-webkit-filter: saturate(300%);" />

<img src="https://t1.daumcdn.net/cfile/tistory/136A473D4F70845836" style="-webkit-filter: hue-rotate(90deg);" />

<img src="https://t1.daumcdn.net/cfile/tistory/136A473D4F70845836" style="-webkit-filter: hue-rotate(300deg)" />

<img src="https://t1.daumcdn.net/cfile/tistory/136A473D4F70845836" style="-webkit-filter: drop-shadow(rgba(0,0,0,0.5) 0 5px 5px);" />


끝입니다. 몇글자만으로 굉장히 고급 기술들을 사용할 수 있고, 효과들을 복합적으로 사용하면 훨씬 멋있는 모양을 만들어 낼 수 있습니다. 굉장히 신선한 충격입니다.