CSS3 filter grayscale

Als ich am Wochenende gelesen hatte, dass die Filter Effects 1.0 jetzt den Status Editor’s Draft haben und am 26.03.2013 aktualisiert wurden, dachte ich mir, es sei jetzt bestimmt eine gute Zeit, einen alten Gedanken aufzugreifen, und die „CSS-Eigenschaft“ „filter: grayscale()“ nocheinmal auszuprobieren. Die allgemeine Unterstützung sollte heute doch besser sein?

Eine ganze Zeit lang hatte ich (meist auf Startseiten, Single-Site-Domains) ein kleines Set an schwarz-weiss-images auf einer Seite. Bei „mouseover“ wurde dann das betroffene Fotos geswitched zur Farbvariante. Sah ganz schick aus, fand ich, war aber sehr aufwendig, weil ich a) jeweils 2 Varianten des Fotos erstellen musste, und b) (meist) die Farbversion dann noch mit vorausladen musste …

Hier eine Grafik, damit man sich vorstellen kann, wie das ausgesehen hat:

startpages
(Mit Klick auf die Grafik könnt Ihr es auch noch! live sehen.(02.04.2013))

Lange Rede, kurzer Sinn: da war doch was mit „filter:grayscale()„? Hier schon mal das „Endprodukt“ mit filter: grayscale() (Farbvariante auf :hover, :active), allerdings nicht ganz ohne Probleme umgesetzt.

Weiterlesen