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

border-image – noch kurz ein Foto als Rahmen?

Ich überlege zwar gerade, wann und wo ich das anwenden würde, aber ich spiele hier ja auch nur ein bisschen mit der “border-image” Eigenschaft.

Ich denke, hier muss man auch “spielen”, um ein Gefühl für die Werte zu bekommen …

Der Internet-Explorer spielt hier (mal wieder) übrigens komplett nicht mit! (Version 9). Fast alle anderen Browser aber auch nur mit -webkit, -o
 

weiteres Beispiel für den Rahmen eines div mit der ID “css3borderimage2” und der border-image Eigenschaft

 
 

box-shadow – 2 Schatten für ein Foto

In meinem letzten Beitrag hatte ich geschrieben, wie man über die “box-shadow“-Eigenschaft (Block-)Elementen einen Schatten zuweisen kann. Eigentlich Spielerei, aber die Frage war, kann ich auch zwei (oder mehrere) Schatten hinzufügen?
 
Die Antwort: Ja, wenn ich die jeweiligen Werte der Eigenschaft durch ein “Komma” trenne.

fisch

Beispiel für zwei Schatten eines Fotos mit der ID “css3fotoshadow” und der box-shadow Eigenschaft