CSS Grayfilter with crossbrowsing

Posted by Readiz
2014.04.17 01:18 Creation/Design


  Grayfilter makes image gray. With CSS, any images are turned into gray simply. It's easy to apply, and cool. Many websites have already apply this filter.



Here is the trick:

	
img.grayscale {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
} 
	

Source: http://www.karlhorky.com/2012/06/cross-browser-image-grayscale-with-css.html




  It's a cross-browsing code, except IE10 and IE11. Every problem is occurred with IEs. Fortunately, they support the SVGs, so it's possible to make them work. The github project named 'gray' has been distributed with full cross-browsing.




Another Solution


 


  Notice the another plugin named 'Black and White'.






저작자 표시 비영리 변경 금지
신고
이 댓글을 비밀 댓글로
  1. ie 에서는 gray이걸로 되는거였네요... 전 필터 속성이 안되는줄알았네요 ie 구버전에서는... ㅋ

    그리고 파이어폭스에서는 svg 랑.. url 등 이것저것 많이 적용되어있는데....저건 왜 그런거죠?? 파이어폭스에서 필터 효과를 적용하려면 저렇게 해야하는건지??

    저번에 백그라운드 배경 이미지에만 필터를 적용 해 보려고 했는데, body 영역에 그래이 필터가 적용되서 블로그의 모든 요소가 다 회색으로 바뀌더라고요 ㅎㅎ

    혹시 body 내에 사용되는 백그라운드 이미지에만 필터를 적용하는 방법이 있을까요?
    • 브라우저마다 필터 지원 스펙이 달라서일겁니다.. opacity처럼 간단하게 되는 경우도 있고 이번 grayfilter처럼 복잡한 경우도 있죠.
      그리고 body에만 class를 적용하면 body에만 될텐데요.. 이상하네요;;
      child selector가 없는 이상 지정된 곳에서만 되어야 정상입니다. ㅠㅠ

      그리고 오신김에 티에디션 안쓰고 만든 블로그 메인 한번 봐주세요 (..)
      그냥 고쳐야될 느낌 알려주시면 될 것 같습니다. 티에디션을 빼니까 확실히 메인 로딩속도가 빨라졌어요.
      티에디션 1.6에서는 버릴 예정입니다. 선택적으로 사용하실 수 있게는 열어두겠습니다만.. 블로그 메인을 지금 RSS에서 끌어와서 이것저것 테스트해보고 있어요. 아직은 레이아웃은 안이쁘지만.. 손보면 티에디션보다 이뻐질 기미가 보입니다.
    • 티에디션을 제거한 요소도 괜찮네요... 왠지 Feedly.com 의 홈 화면 느낌도 나네요. 지금상태처럼 메인을 꾸미신다면, Feedly 에서 제공하는 레이아웃을 참고 하시면 도움이 되실거 같아요..

      feedly 가 가독성을 염두해서 레이아웃이 구성된거다보니... FastBoot 과도 어울릴거 같습니다.
    • GTmetrix.com 에서 테스트 해보니, 95% 나오네요 ㄷㄷㄷ 티에디션이 있을때는 잘나와봐야 최고 70%였는데... 완전 대박 입니다.
  2. 사진들이 눈에 익은건데 음 ㅎㅎ
    흑백였다가 마우스올리면 색들어오는건 맘에드네요 ㅎㅎ
    • 저작권 없는 윈도우의 내 그림 폴더의 사진들이죠.. ㅋㅋ
  3. 제가 사용하고 있는 feedly 의 홈 화면 레이아웃 입니다. 티에디션에 있던 아이템들과 비슷한 것들이긴 하네요 ㅎㅎ

    1번: https://api.monosnap.com/image/download?id=VMqVxwnhiQpNgbKgCwwPAgbNRlI57q

    2번: http://monosnap.com/image/NN68fKXYLXxl0C4AkadYCqy8OV9U8C

    3번: http://monosnap.com/image/dwZE6WLgoBstsBBpj1BaPkCECqq3vk

    모노스냅 서버가 지금 느린 상태네요... 이미지 파일 업로드하고, 링크주소 바로 활용할 수 있어서 애용하고 있는데,,, 다른 서비스로 바꿔야 될거 같네요 ㅜㅜ;

    혹시 이미지 파일 업로드하고, 파일 주소 url 을 제공하는 서비스 좋은 곳 있으면 추천좀 해 주세요 ㅎㅎ
    • 도움이 많이 될 것 같네요.. rss 리더들 참고 해보겠습니다. 감사합니다.
      저는 imgur을 쓰는데 이것도 그다지 빠른것 같지는 않군요..
      저는 걍 티스토리 비공개로 올려버리는 경우가 많은것 같네요. ㅋㅋ
    • Imgur 내일 함 찾아보고 이용 해 봐야겠네요 ㅎㅎ 감사합니다.
  4. 메인이 확 달라졌네요..^^
    이것이 티에디션 없이 적용을 한 것인가요...??
    저에겐 좀 많이 낯설어 보여서...ㅋㅋ
    • 메인화면이 훨씬 시원하고 빨라졌는데요. 이제 구시대의 유물 티에디션 탈출하게 되는군요. 다음버젼 기대됩니다.
    • 네 여러 개선 작업중입니다.. ㅎㅎ
  5. 스킨이 바뀌어 놀랐네요;; 영어라서 두번 놀라고요 ㅋㅋ
    흑백도 좋은 디자인 요소죠.
    • 바뀐건 메인뿐인걸요.. ㅋㅋ
      손봐야 할게 많네요....
  6. 그리고 파이어폭스에서는 svg 랑.. url 등 이것저것 많이 적용되어있는데....저건 왜 그런거죠?? 파이어폭스에서 필터 효과를 적용하려면 저렇게 해야하는건지??
  7. 저건 왜 그런거죠?? 파이어폭스에서 필터 효과를 적용하려면 저렇게 해야하는건지??

티스토리 툴바