Google Map 埋め込み CSSでデザインをグレー・ダークモードにする方法
CSSでGooglemapのデザインを変更します。
Javascriptの方が自由度高くデザインできますが、CSSの方が簡単で掛かる時間も少ないです。
対応ブラウザ
- Chrome
- Firefox
灰色
グレーベースのサイト、色数の少ないサイトに使えます。
デモ
See the Pen
Googlemap Grayscale by kura (@kuranopen)
on CodePen.
CSS
CSSのfilterプロパティgrayscaleを使います。
filter: grayscale(100%);
ダークモード
背景が黒のサイト、フッターの色が重たいサイトなどに使えます。
デモ
See the Pen
Googlemap Dark Mode by kura (@kuranopen)
on CodePen.
CSS
filterプロパティgrayscale invert contrastを複数組み合わせて使います。
invertとcontrastの数値を下げると、色のトーンを下げられます。
filter: grayscale(100%) invert(92%) contrast(83%);
トーンダウンすることも可能
色合いのトーンが低めのサイトに使えます。
デモ
See the Pen
Googlemap Grayscale 2 by kura (@kuranopen)
on CodePen.
CSS
CSSのfilterプロパティinvertを使います。
filter: invert(100%)
セピア
使い所は少ないですが、こんなことも。
デモ
See the Pen
Googlemap Sepia by kura (@kuranopen)
on CodePen.
CSS
CSSのfilterプロパティsepiaを使います。
filter: sepia(25%);
