W jednym z projektów nad którym pracowaliśmy kilka tygodni temu pojawiła się potrzeba umieszczenia ramki z mapą google w jednej z sekcji na stronie głównej. Sekcję nazwaliśmy „skp-on-google-maps” i umieściliśmy w niej mapę Google na całą szerokość okna, w którym strona jest wyświetlana. Co prawda domyślny styl map zbytnio nie pasuje do motywu strony głównej, dlatego postanowiliśmy nadać jej czarno-białe barwy, a dopiero po najechaniu kursorem na ramkę mapa „odzyskuje” swoje standardowe kolory.
Jak zrobić czarno-białą mapę Google?
Sprawa jest banalnie prosta. Zresztą zobaczcie poniższy kod:
.skp-on-google-maps iframe {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}Za pomocą powyższego kodu, który należy wkleić do arkuszu stylów w naszym projekcie, ramka (iframe) w bloku „skp-on-google-maps” otrzyma filtr „grayscale” i to wszystko!
Oczywiście są różne filtry i można je dowolnie stosować (nakładać na zdjęcia, bloki, a także łączyć ze sobą). W tej materii polecam artykuł na webroad.pl gdzie jest to obszernie opracowane.