남의 사이트를 평면으로 만든 CSS를 강행하다

CSSfilter 효과가 누적됨에 따라 iframe 안에 나타난 사람들의 사이트도 평면 디자인의 외관을 강제로 만들 수 있다.

#frame {
  -webkit-filter: sepia(100%) invert(100%) brightness(15) saturate(180%) hue-rotate(90deg);    
  filter: sepia(100%) invert(100%) brightness(15) saturate(180%) hue-rotate(90deg);
}

<iframe id="frame" src="http://ja.wikipedia.org/" frameborder="0" width="600" height="600"></iframe>

효과 세부 정보

번갈아 가면서 효과가 적용되는 순서도 바뀐다.중첩Photoshop의 조정 레이어된 생각과 같다.
sepia(100%)
- 이미지에 채도의 단색 남기기
invert(100%)
→ 대부분의 사이트가 흰색 배경이기 때문에 단색 이미지를 반전시킨다
brightness(15)
→ 명암 수정 강행
saturate(180%)
→채도를 무리하게 올리다
hue-rotate(90deg)
→ 이전에 조정한 결과의 색상을 엇갈리게 하여 좋아하는 색상으로 조정한다.이 각도를 바꾸면 전체적인 톤이 갑자기 바뀌어요.

실용성

복수의 효과가 겹쳐 무겁다.최근의 주류 사이트는 iframe를 허용하지 않는다는 설정으로 원래 iframe 자체가 사용할 수 없기 때문에 사용하는 곳이 제한되어 있다.더 나아가 영상 처리이기 때문에 매우 더럽게 보인다.

Filter 속성 세부 정보 및 브라우저