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.

Das nebenstehende Beispielbild soll schwarz/weiss werden.

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

Pin It on Pinterest

Share This
Überblick über den Datenschutz

Diese Website verwendet Cookies, damit wir Ihnen die bestmögliche Benutzererfahrung bieten können. Cookie-Informationen werden in Ihrem Browser gespeichert und dienen dazu, Sie wiederzuerkennen, wenn Sie auf unsere Website zurückkehren, und unserem Team zu helfen, zu verstehen, welche Bereiche der Website Sie am interessantesten und nützlichsten finden.