Wer Bilder auf Webseiten per CSS in S/W-Bilder umwandeln möchte, der findet im Artikel Convert Images To Black And White With CSS das Gesuchte. Hier die Zusammenfassung der CSS-Regeln:
img.desaturate {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url(desaturate.svg#greyscale);
filter: gray;
-webkit-filter: grayscale(1);
}
Die benötigte SVG-Datei kann hier heruntergeladen werden (Rechtsklick -> Speichern unter).
Das funktioniert im Chrome ab Version 18 und im Firefox ab Version 4. Weiterhin ist Internet Explorer Unterstützung ab Version 6-9 gewährleistet. Für zukünftige Browser sollte die Regel auch funktionieren.
Das lässt sich auch ganz einfach als Hover-Effekt (oder umgekehrt: bei Überfahren der Maus von Schwarz-Weiß auf Farbe) einsetzen. Dazu einfach eine zusätzliche Regel einbauen, mit „:hover“ Pseudo-Klasse, die dann die gleichen Regeln mit 0% statt der 100% enthält und am Schluss ein „filter: none“. Also passend zu obigem Beispiel dann so:
img.desaturate:hover {
filter: none;
}
Gabriel arbeitet seit 2003 als selbständiger Webentwickler und Berater für Marketing und Suchmaschinenoptimierung. Er ist am einfachsten per E-Mail unter gabriel [ät] suralin.de zu erreichen.
Außerdem freut er sich über Kontaktanfragen auf
Hallo Gabriel,
kannst Du den ganzen CSS Befahl mal eingeben oder mir senden das die Bilder/Grafiken erst in SW und beim rüberfahren der Maus in Farbe erscheint?
Danke und Gruß
Danny
Probier‘ es mal wie oben erweitert. Einfach dem Bild die css-Klasse zuweisen:
Wenn es nicht funktioniert, meld‘ Dich noch mal.
Gesucht – Gefunden – Ausprobiert – Funktioniert
Danke dir :)
Inwieweit funktioniert es in den aktuellen und älteren Browsern?
@Paul:
dank CSS3 (filter: grayscale) sollte es in allen bekannteren aktuellen Browsern funktionieren.
Für IE 6-9 oder ältere der anderen Marken sind dann weitere Regeln eingebaut. Im oben verlinkten (englischen) Artikel wird das auch einzeln erläutert.
Danke, dann probiere ich das entsprechend mal aus. :)
Im Google Chrome Version 29.0.1547.76 m funktioniert es leider nicht :/
Mit:
img.desaturate:hover {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none;
}
geht es
Hmmm, ich habe hier auch einen Chrome „Version 29.0.1547.76“ getestet, und es funktioniert (siehe z.B. auf KuhSeite.de).
Ehm…hast Du auch die Datei „desaturate.svg“ geladen und im entsprechenden Verzeichnis abgelegt beim Ausprobieren?
Hi,
danke für den Trick :)
weißt du, ob bzw. wie das Ganze im Zusammenhang mit transition funktioniert?
Ich habe ein Bild, das mit Greyscale schwarz-weiß gemacht ist und bei einem Hover (greyscale 0%) wieder bunt wird.
Wäre schön, wenn das ganze jetzt noch einen soften Übergang hätte.
Liebe Grüße,
Kim
Hallo Kim,
ja, das funktioniert, habe es gerade ausprobiert – wenn Du folgendes in den Hover-Stil reinschreibst:
transition-property: all;
transition-duration: 1s;
Viel Spaß damit! :)
Bei mir funktionierts leider nicht..
img.grey {
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url(grey.svg#greyscale);
filter: gray;
-webkit-filter: grayscale(1);
transition-property: all;
transition-duration: 1s;
}
img.grey:hover {
filter: grayscale(0%);
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-ms-filter: grayscale(0%);
-o-filter: grayscale(0%);
filter: none;
transition-property: all;
transition-duration: 1s;
}
So sieht das ganze bei mir aus. Vielleicht sollte ich aber auch einfach morgen nochmal draufschauen.. ;)
OK, stimmt hatte es nur im Chrome Browser getestet – dort funktioniert das von Dir gepostete reibungslos. Firefox und Internet Explorer wollen das allerdings so nicht. Müsste ich mir auch erst genauer anschauen. Vielleicht finde ich am Wochenende mal Zeit dazu.
Ah, ja das macht Sinn, ich verwende Firefox.
Aber schön zu wissen, dass es im Chrome schonmal funktioniert :-)
Ich hätte noch eine Frage bzgl. dem hover.
…und zwar habe ich alles dank der Hilfen hier super hinbekommen und lokal funktioniert auch alles, aber sobald ich es online stelle klappt das hover nicht mehr.
Habe die grey.svg im direkten Verzeichnis abgelegt. (Aber auch alle anderen funzen nicht). Habe auch bei „url“ schon alles mögliche schon versucht. (Wenn das überhaupt ersetzt werden muss…)
Könnte mir bitte jemand weiterhelfen?
Momentan sieht der Code so aus:
.image.full{
display: block;
width: 100%;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
-ms-filter: grayscale(100%);
filter: grayscale(100%);
filter: url(grey.svg#greyscale);
}
.image.full:hover{
display: block;
width: 100%;
filter: none;
}
@Addi:
nur mal ins blaue geraten: könnte es sein, dass Deine CSS-Datei in einem Unterverzeichnis liegt und die Bild-Datei im Hauptverzeichnis? Falls ja, einfach mal einen / (Slash) vor den Namen der Datei schreiben, um einen absoluten Pfad zu erhalten und ggf. Anführungszeichen – also z.B.
filter: url(/grey.svg#greyscale);
Wenn das nicht klappt, gib‘ noch mal bescheid.
Mit dem „ins blaue raten“ lagst du schon mal gar nicht so schlecht. :-)
…die CSS-Datei liegt in einem Unterverzeichnis und die Bilddatei auch. (Hauptverzeichnis mit der index und jeweils das Unterverzeichnis mit dem Ordner „CSS“ und „images“.)
…aber leider hat es mit dem Slash auch nicht geklappt. Habe sowohl das Verzeichnis in Hochkommas, sowohl auch ohne versucht. Beides leider Erfolglos.
Wie schon gesagt. Das komische daran ist, dass wenn ich die komplette Ordnersturktur des Servers lokal kopiere es wunderbar funktioniert.
Hallo Addi,
füg‘ mal in der CSS-Regel „.image.full:hover“ noch ein „-webkit-filter: none;“ hinzu.
Vielleicht bezog sich das „funktioniert nicht“ nur auf Webkit-basierte Browser wie den Chrome und Opera.
Also, das “-webkit-filter: none;” hat funktioniert.
…aber leider nur unter Safari. (Danke schon mal dafür!)
Unter z.B. Firefox und IE ist immer noch der selbe Fehler zu sehen.
Ich verzweifel echt noch damit…
PS: Sorry, dass ich hier deinen Artikel so Volltexte.
Hallo Addi,
kein Problem, dafür sind die Kommentare ja da.
Ich sehe, dass die Datei „/grey.svg“ nicht aufrufbar ist. Es ist wichtig, dass diese Datei auch existiert auf Deinem Server, da diese ja sonst nicht geladen werden kann. Oben im Beitrag ist ein solche SVG-Datei verlinkt. Musst Du nur umbenennen und auf dem Server an die geeignete Stelle legen (und ggf. den Pfad in der CSS-Anweisung „filter: url(/grey.svg#greyscale);“ anpassen).
Danke für das Update @ Paul.
Ohne die „0%“ würde es nicht gehen.
Habe das ganze auch mit „none“ statt den grayscale(0%) versucht, und ging auch.
Allerdings nur im Opera getestet. Wäre etwas kürzer zwecks Code optimierung, aber sicherer ist wohl die 0% Variante.
Merci für die kurze Anleitung!
Wunderbar! Nach langem ergebnislosem Frickeln mit Pixastic und den jQuery GreyScale Plugin eine wunderbar einfache und Browser-kompatible Lösung! Super!
die kuhseite hat keine grayscales in ie10/11 :(
Ja, das stimmt – im IE10/11 werden die grayscale-Filter nicht mehr unterstützt und die neuen Versionen haben den CSS3-Standard leider nicht wie anderen Browser implementiert.
Hier ist eine Lösung mit JavaScript und CSS – aber ich werde das nicht einsetzen, weil es mir nicht so wichtig ist, dass ich dafür die Nachteile mit einkaufe.
Geht, aber wozu ne SVG Datei? Geht doch auch ohne …
Ich gehe davon aus, dass in 2012 als der Beitrag erschien ein oder mehrere Browser damit noch Probleme hatten – daher der Workaround mit der SVG-Datei.