【CSS】埋め込みGoogle MapをAPIなしで色変化させる方法。（Filterの解説）

むかしむかし、Internet Explorerには「Filter」という優れた機能がありました。

（「とほほのWWW入門」にその残骸が残っております(笑)）

Waveで画像を波打たせたり、本当にいろんなことができる機能でした。

個人的には、

「これが標準化されて他のブラウザにも実装されないかなあ」

と思っておりました(^^;)

ですが、W3Cの標準とは大きく異なる独自仕様だったため、IE10で廃止されてしまいます。

ところが、その後CSS3で「filter」が登場。

昔のIE独自Filterとは別物ですが、画像や要素の色を加工できる便利な機能として生まれ変わりました。

---

昔、Google Mapの色を変更しようと思うと、

Google Maps APIを使ってスタイル設定を行う必要がありました。

設定もなかなか大変ですし、API利用料の問題もあります。

ですが、埋め込み地図にCSSのfilterを適用するだけでも、

意外と雰囲気を変えることができます。

ポートフォリオからサンプルのURLに入ってみてください。

そちらの方がわかりやすいです。

https://coconala.com/users/6145929/portfolios/1404258

個人的には、

filter: sepia(70%);

あたりの色合いが、ちょっとレトロで渋くて好きです(笑)

■１．オリジナルのGoogle Map

<iframe src="https://www.google.com/maps/embed?pb=～～～～～～～～～～" allowfullscreen=""></iframe>

■２．彩度変更（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);

■10．filterで使用できる命令

■11．おまけ。ドロップシャドウ（drop-shadow）

box-shadow は要素の四角形に対して影を付けますが、

filter: drop-shadow()

は画像の透明部分を認識して、

実際の形状に沿って影を付けてくれます。

PNG画像やSVGアイコンでは、非常に重宝する機能です。

下のサンプルを見れば、一目瞭然ですね♪

filter:drop-shadow(5px 5px 10px #555);

box-shadow: 5px 5px 10px #555;

※お気に入りに登録してくださった方に、20％引きのクーポンを配布いたします！ まずは「お気に入り登録」をお願いいたしますm(_ _)m