他人のサイトを無理矢理フラットデザインっぽくするCSS

CSSのfilter効果を重ねると、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プロパティの詳細と対応ブラウザ