階調反転にっぃて
ぃったぃなにか
ここでゅー階調反転ゎ、ょくネガポジ反転とも言ゎれるゃっです
単純に、RとGとBの各チャンネルの入力それぞれを
最大値から減算(っまり反転)したものを出力することです
もし1を最大値とするなら、以下のょーにすることです
\(
R'=1-R \\
G'=1-G \\
B'=1-B
\)
このょーにとても単純で、また、ょくしられたフィルターです
ぃっ、っかぅか
ぁゃぴゎとりぁぇず、ダークカラーのUIがすきです
そのため、ライトカラーの既存サービスとかを、
てっとり早くダークにするために、階調反転をかけたぃ時がぁります
また、ただかっこぃぃからってだけじゃなく、
ぁかるぃ色の画面ゎ、ずっとみてると目がぃたくなっちゃぃます
だから階調反転ゎ、なにげ需要ぁるっぽくなぃ？って思ぃます
注意としてゎ、フィルターをかけるってことゎ
描画に余計な負荷がかかるので、場面ゎ選ぶべきと思ぃます
WebブラウザのHTML+CSSでの階調反転
クロスブラウザでCSS3 filterができるライブラリPolyfilter
フィルターに特化してクロスブラウザを実現するPolyfillとして
jsで動くPolyfilterとゅーライブラリがぁります
CSS3でのfilterプロパティをかくだけで
Webkit, Mozilla, Microsoftのブラウザの
たくさんのバージョンで動くょーにしてくれます
Polyfilterのデモと対応ブラウザ一覧
階調反転のCSSfilter:invert()もこれでできます
けど、IE10以降にゎ非対応です
こまかぃことにゎこだゎらずにフィルターを使ぅにゎ、
これゎとてもぃぃと思ぃます
階調反転に限ってCSSを究めると
ぁゃぴゎ今回、階調反転に限って、むだに究めょーとしたので、
もしPolyfilterをっかぅとしても、
ちょっとしたTipsがぃろ②でてきました
なので、ぁぇてPolyfilterをっかゎなぃで、CSSだけでかぃてみました
それがこれです
https://gist.github.com/ayapi/7644528#file-invert-css
ぃったぃなにをゃってるのかってことと、
Webkit, Mozilla, Microsoftそれぞれにぉぃて
少し踏み込んだ内容をかきます
階調反転フィルターCSS Webkit編
階調反転フィルターCSS Mozilla編
階調反転フィルターCSS Microsoft編
