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

Kostenlose WordPress- und Divi-Tricks im Abo

Wir schicken Ihnen sporadisch (weniger als 10x jährlich) neue Tricks für Wordpress und das Divi-Theme, aber auch hilfreiche CSS- und HTML-Codes frei Haus.

Füllen Sie zur Anmeldung das folgende Formular aus. Angaben mit * sind Pflichtangaben.









Vielen Dank.

Pin It on Pinterest

Share This