In diesem Tutorial, zeige ich euch einen kleinen CSS-Effekt, den ihr auf sämtliche Bilder eurer Webseite anwenden könnt.

Wichtig!:

Dieser Effekt funktioniert nur im Internet Explorer!

Mit dem Filter gray() können die Bilder eurer Seite automatisch in Graustufen konvertiert werden. Diesen Effekt könnte man gut für ein Rollover nutzen, wie hier in der Vorschau: Klick

Als erstes erstellt ihr in eurem Stylesheet die Klasse "Graustufen". Für diese Klasse legt ihr dann den Filter folgendermaßen fest:

.graustufen { filter: gray(); }

Wenn ihr nun diese Klasse auf ein Bild anwendet, wird sich dieses automatisch in ein Graustufenbild verwandeln:

<img border="0" src="EuerBild.jpg" alt="Beschreibung" class="graustufen"/>

Wenn ihr einen Rollover-Effekt, wie in meinem Beispiel erzeugen wollt, dann müsst ihr euren Stylesheet ein wenig umändern:

.rollover { border: 2px solid #fff; }
a:hover .rollover { filter: gray(); }

Wenn ihr nun eines eurer Bilder verlinkt und mit der Klasse "rollover" verseht, habt ihr euren Rollover-Effekt:

<a href="URL" title="Titel" target="_blank"><img border="0" src="EuerBild.jpg" alt="Beschreibung" class="rollover"/></a>

Und fertig!

Ich weiß ich bin heute nicht so gut im Erklären,
aber ich hoffe ihr könnt trotzdem etwas damit anfangen.