mrcng.pl
mrcng.pl to wypadkowa moich projektów. Projektowanie stron, prowadzenie firmy, branża kreatywna.

WordPress & WooCommerce

Uruchomiłem i na bieżąco uzupełniam cykle wpisów na temat konfiguracji, obsługi WordPressa, Gutenberga, WooCommerce. Zapraszam do lektury i życzę owocnej nauki.

Ponadto zapraszam Cię do sklepu wp-lab.pl gdzie możesz zlecić nam i wygodnie zapłacić online za usługi związane z WordPressem i WooCommerce.

Jak zrobić czarno-białą mapę Google na stronie?

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.