칼라에서 흑백 - 티에디션에서

이 글에서는 티에디션에 나타나는 이미지에 마우스 커서를 갖다 대면 칼라를 흑백으로 변하는 것에 대해 알아본다. 아래 이미지에 마우스 커서를 갖다 대고 떼 보기 바란다. 어떤 것인지 직접 보기 위해서 이 블로그 처음으로 가면 티에디션이 적용된 첫페이지를 볼 수 있다.

칼라에서 흑백으로 하기

위와 같이 하는 방법은 아래 더보기안에 볼 수 있는 그림처럼 HTML/CSS 편집의 style.css에 아래 파일을 받아 소스를 삽입하기만 하면 되는 간단한 것이다. 그러면 칼라가 흑백으로 될 것이다. 단 이 경우는 티에디션을 사용할 경우라는 것을 알기 바란다. 

티에디션 칼라에서 흑백으로.txt

그리고 아래 말하는데 특정 브라우저에서는 안 된다고도 적는다. 참고로 익스플로러(IE) 10 이상은 칼라가 흑백으로 안돼 불투명도를 변하게 opacity:0.8; filter:alpha(opacity=80);를 추가했다. 참고로 마우스 커서가 올라가면 불투명도를 80으로 했다.

안 되는 경우

칼라 이미지가 흑백으로 변할 것을 확인했다. 그런데 알아야 할 것은 모든 브라우저에서 되는 것이 아님을 알아야 한다. 아래 소스의 빨간 부분을 보면 되는 브라우저가 나와 있다. Firefox는 파이어폭스,Android는 안드로이드 스마트폰의 운영체제,Chrome은 크롬,iOS는 아이폰과 아이패드의 운영체제,Safari는 사파리,IE는 익스플로러이다. 구체적인 예로 우리나라 사람이 많이 사용하는 익스플로러(IE)의 경우 등의 6에서 9 버전까지만 된다고 나왔다. 위에서 말했듯이 익스플로러(IE) 10 이상은 칼라에서 흑백으로 변하는 것이 되지 않는다. 그리니 불투명도를 조절했다.

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 */

그나저나 나의 브라우저는 크롬(Chrome) 33이므로 된다. 자주 자신의 브라우저에서는 흑백으로 안 된다고 말하는 사람이 있다. 아래 더보기를 클릭하면 이 블로그에 접속하는 브라우저 현황을 볼 수 있다.

이 블로그에 설치한 무료 통계 프로그램인 구글 애널리틱스로 본 방문자의 브라우저 접속 현황이 아래 그림과 같이 1위와 2위는 익스플로러(Internet Explorer)7,8이다. 다른 블로그도 비슷할 것이다. 아래 그림을 보면 익스플로러 11 접속하는 경우도 많다는 것을 알 수 있다. 작년까지만 해도 크롬(Chrome)이 3위였다.

맺으면서 

위에서는 티스토리 블로그 티에디션의 경우만 설명했는데 일반적인 경우도 할 수 있다. 이 블로그에서 칼라에서 흑백으로 변하는 경우가 모두 위와 같은 CSS를 사용한 것이다. 그렇게 하는 방법은 먼저 사진에 칼라인 상태가 되게 하기 위해 사진에 아래 소스를 삽입한다. 반대로 흑백이 처음 상태이고 싶다면 소스를 서로 변경하면 위와 아래 소스를 서로 변경하면 된다.

컬러로.txt

그리고 마우스 커서를 사진에 가져갔을 때 흑백으로 변하게 하기 위해서 아래 소스를 추가한다.아래 소스에서 롤오버하면 흑백으로 되는 브라우저가 나와있으니 참고 바란다.  위에서 말했듯이 모든 브라우저가 흑백으로 되는 것은 아니라는 것을 알았으면 한다.

흑백으로.txt

아래 소스를 보면 알겠지만 크롬(Chrome)과 사파리(Safari)에서는 흑백으로 변하는 정도를 조절할 수 있다는 것을 알 수 있다. grayscale은 흑백을 나타내고 뒤에 나오는 수치는 흑백의 정도이므로 그것을 조절하면 된다. 100%는 완전 흑백이며 0% 칼라 상태이다. 이 블로그 사이드바에 있는 BEST BLOGGER BAGDE는 흑백 정도를 60%로 했다.

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 */

무료팩스

BY 엔팩스