昔、IEに「Filter」という優れたCSSがありました。
ですが、W3Cの基準とはかけ離れた規格だったので、IEもVersion10から非対応となりました。
ですが、なぜかCSS3の新機能に「filter」が追加されたのです。
（以前のIE独自のFilterとはちょっと規格変更されていますが…）
埋め込みのGoogle Mapの色を変えようと思ったら、APIを使わなければならず、設置がものすごく大変でしたし、そして最近APIが有料化の流れになってきました。
今回は、晴れて全ブラウザに対応、となりました、「filter」を使って、埋め込み地図の色を調整してみましょう。
オリジナル
彩度変更（saturate）
filter: saturate(2);filter: saturate(0.5);
モノクロ（grayscale）
filter: grayscale(1);明度（brightness）
filter: brightness(120%);filter: brightness(70%);
セピア（sepia）
filter: sepia(70%);filter: sepia(100%);
色相回転（hue-rotate）
filter: hue-rotate(-50deg);階調反転（invert）
filter: invert(1);filter: invert(0.7);
ぼかし（blur）
filter: blur(3px);組み合わせて使用（hue-rotate、brightness、invert、saturate）
filter: hue-rotate(180deg) brightness(60%) invert(1) saturate(0.4);filter: sepia(100%) brightness(80%) contrast(150%) hue-rotate(60deg);
filterで使用できる命令
| 関数名(単位) | 値 | 効果 |
|---|---|---|
| blur(px) | 0px(初期値)～10px | ぼかし |
| brightness(%) | 0%～100%(初期値) | 明度 |
| contrast(%) | 0%～100%(初期値) | コントラスト |
| drop-shadow | x軸方向の影の位置 y軸方向の影の位置 広がりの大きさ 色 | 影 |
| grayscale(%) | 0%(初期値)～100% | モノクロ |
| hue-rotate(deg) | 0deg(初期値)～360deg | 色相回転 |
| invert(%) | 0%(初期値)～100% | 階調反転 |
| opacity(%) | 0%～100%(初期値) | 透過 |
| saturate(%) | 0%～100%(初期値) | 彩度 |
| sepia(%) | 0%(初期値)～100% | セピア |
おまけ。ドロップシャドウ（drop-shadow）
こちらの filter:drop-shadow(); は box-shadow とは違い、透過画像の場合は透過部分に沿って影を付けてくれるという素晴らしい機能になっております。
下のサンプルを見れば、一目瞭然ですね♪
box-shadow: 5px 5px 10px #555;