5202

ein Blog über technische Fragen zu Blogger

Schwarz/weiß Effekt auf Bilder mit CSS

von
Neulich kam die Frage auf, wie man ein s/w Bild per Hover auf farbig setzt. Statt super-kompliziert das Bild in einer Bildverarbeitung zu bearbeiten und dann mit Javascript ein zweites Bild nachzuladen, geht das natürlich auch mit CSS.

Ich habe das damals wohl pädagogisch schlecht rübergebracht und deswegen wurde mir das nicht geglaubt - als Beweis, dass das tatsächlich auch mit purer CSS funktioniert, könnt ihr euch meine Skizze anschauen.

Der Effekt ist in Chrome, Firefox, Internet-Explorer ab Version 7 und Safari ab Version 6 sichtbar:

CSS

Der Effekt ist denkbar einfach - statt die Bilder extern zu bearbeiten, definiert ihr mit CSS einen entsprechenden Filtern. Bezogen auf _alle_ Bilder im Blog könnt ihr für einen s/w Effekt diese CSS benützen:
.separator img {
    filter: url("data:image/svg xml; nowhitespace: afterproperty;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray; 
    -webkit-filter: grayscale(100%); 
    -webkit-transition: all .6s ease; 
    -webkit-backface-visibility: hidden; 
}
Für den Hover Effekt setzt ihr die Filter auf none beziehungsweise 0% und die Bilder werden wie gehabt in aller Farben Pracht angezeigt:
.separator img:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
}
Bestimmte Bilder auswählen
Alle Bilder in einem Blog komplett auf s/w zu setzen, ist natürlich hartes Brot - wenn ihr den Effekt nur auf bestimmte Bilder anwenden wollt, gebt ihr diesem Bild eine neue Klasse .black_white und formuliert die CSS so:
.separator .black_white {
    filter: url("data:image/svg xml; nowhitespace: afterproperty;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray; 
    -webkit-filter: grayscale(100%); 
    -webkit-transition: all .6s ease; 
    -webkit-backface-visibility: hidden; 
}
.separator .black_white:hover {
    filter: none;
    -webkit-filter: grayscale(0%);
}

Bildbearbeitung im Browser

Bildbearbeitung gibt's natürlich nicht für lau sondern braucht ordentlich Bumps im Browser, sprich, das geht auf die Performance!

Falls ihr zu den Bloggern gehört, die eh schon 40 Fotos auf der Startseite haben, 10min durchschnittliche Ladezeit und 'Read more' für irgendwie doof haltet, dann würde ich das an eurer Stelle nicht benützen.

Das ist was für die Post-Seite, eigene Unterseite oder einem-Bild-per-Post-auf-der-Hauptseite. Wenn ihr euch unklar seit, dann schaut euch mal euren Blog auf einem Laptop an und ob das beim scrollen 'ruckelt' - wenn ja, dann habt ihr zu viele Bilder auf der Startseite und ich würd's lassen ...

Anmerkungen, Fragen

Wenn ihr Fragen, Anmerkungen oder Jubelschreie dazu habt - tut euch keinen Zwang an, dazu sind die Kommentare da!