CSS Filter Nebeleffekt

Aus dem Blog


CSS Filter Nebeleffekt

Vor Kurzem bin ich auf die neuen CSS-Filter aufmerksam geworden, mit denen man Bilder und Seiten im Browser manipulieren kann, ohne das die Originaldatei verändert wird. Die Filter wirken also nicht destruktiv. Ich habe ein bisschen mit diesen Filtern herumgespielt und einen Nebeleffekt für meine Startseite gebastelt. Der Nebel lichtet sich, sobald der Mauszeiger kurze Zeit über der Seite schwebt oder sich bewegt. Gefällt er oder nervt er eher?

Hier zwei Beispiele, wie man die Filter anwenden kann:

Morgennebel

Morgennebel

Für den Nebel-Effekt habe ich die CSS-Filter wie folgt konfiguriert:

img { filter: blur(2px) contrast(70%) brightness(110%) opacity(50%); }

Der Graustufenfilter ist dagegen einfacher:

img {  filter: grayscale(100%) ; }

 

Mehr zu den CSS-Filtern gibts z.B. auf css-tricks.com.


Dein Kommentar