Besonders auf Teamseiten kommen oft Porträtbilder unterschiedlichster Machart zusammen. Ein Studiobild neben einer Aussenaufnahme usw. Das wirkt oft unruhig. Ein guter Trick ist, die Bilder schwarzweiss darzustellen. Doch halt: statt nun alle Ihre Bilder zu bearbeiten, sollten Sie diesen Trick lesen.
Da braucht es nur ein paar Angaben im CSS-Code. Zunächst vergeben Sie aber dem Bild eine CSS-Klasse – wir schlagen «bild-bw» vor.
Nun wechseln Sie in das CSS-Stylesheet Ihrer Website. Dieses erreichen Sie via Design/Customizer/Zusätzliches CSS. Fügen Sie folgenden Code ein – ersetzen Sie allenfalls die CSS-Klasse mit der von Ihnen gewählten:
© Rainer Sturm/pixelio.de
.bild-bw {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}Fertig. Das Resultat sieht so aus:
Das Original ist nach wie vor farbig in Ihrer Mediathek vorhanden und kann also woanders auch farbig dargestellt werden.
Cool. Oder?
© Rainer Sturm/pixelio.de
Zusatztipp: Sepia statt schwarzweiss
Den Code oben können Sie weiter anpassen. Wenn Sie z.B. anstelle des Begriffs «grayscale» an allen Stellen sepia eingeben, ergibt dies folgendes Aussehen:
Ist dann ein richtiger old-fashioned Look.
© Rainer Sturm/pixelio.de