filter
(Auszug aus "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" von Rachel Andrew & Dan Shafer)
Die Eigenschaft filter funktioniert nur im Internet Explorer für Windows. Mit ihr können HTML-Elementen statische Spezialeffekte oder animierte Übergänge zugewiesen werden.
Vererbt: nein
Werte
Der Internet Explorer für Windows ab Version 4 unterstützt 14 statische Effekt- und zwei animierte Übergangsfilter. Ab Version 5.5 unterstützt der Internet Explorer für Windows eine neue Filtertechnologie, die zusätzlich eine Reihe neuer Filter bereitstellt, z. B. zwei prozedurale Oberflächenfilter, 16 statische Effektfilter und 17 animierte Übergangsfilter.
Die statischen Filter bieten Effekte wie durchscheinende Elemente, Schattenwurf, glühende Ränder, Wischeffekt, Spiegelung, Rotation, Beleuchtungseffekte und Verzerrungen. Mit Übergangsfiltern wird die Veränderung eines Elements als animierter Verlauf angezeigt, als Effekte gibt es einfache Wischverläufe im Stil von Microsoft PowerPoint, weiche Fades, sich aufbauende Wischeffekte und phantasievolle Pixelübergange. Animierte Übergänge werden mit CSS zugewiesen und mit JavaScript ausgelöst.
Filter werden im Internet Explorer 4 mit folgender Syntax deklariert:
filter: filter(param=value, ...)
Im Internet Explorer 5.5 werden Filter folgendermaßen deklariert:
filter: progid:DXImageTransform.Microsoft.filter(param=value, ...)
Filter lassen sich in jeder sinnvollen Kombination einsetzen und werden in einer Liste, durch Leerzeichen voneinander getrennt, angegeben.
Standardwert: none
Kompatibilität
CSS-Version: ist nicht Bestandteil des CSS-Standards
Der Internet Explorer für Windows ab Version 4 unterstützt 14 statische Effekt- und zwei animierte Übergangsfilter. Ab Version 5.5 unterstützt der Internet Explorer für Windows eine neue Filter-Technologie, die zusätzlich eine Reihe neuer Filter bereitstellt, z. B. zwei prozedurale Oberflächenfilter, 16 statische Effektfilter und 17 animierte Übergangsfilter.
Beispiele
Folgende Stilregel benutzt den statischen IE-4-Filter dropShadow, um hinter allen HTML-Elementen der Klasse schwebend einen Schatten zu erzeugen:
.schwebend {
filter: dropShadow(color=#000000, offx=5, offy=5);
}Das folgende Beispiel weist dem Element mit der ID symbolleiste den animierten Übergangsfilter Pixelate für eine Darstellung im IE 5.5 zu. Mit JavaScript wird ein Event-Script programmiert, das gestartet wird, sobald die Seite vollständig geladen ist. Es aktiviert den Filter und weist ihm mit Apply() den Ausgangszustand für den Übergangsverlauf zu. Dann macht es das Element sichtbar (im CSS ist es noch unsichtbar) und spielt den Übergang mit Play() ab:
<style type="text/css">
#symbolleiste {
visibility: hidden;
filter: progid:DXImageTransform.Microsoft.Pixelate(MaxSquare=50, Duration=1, Enabled=false);
}
</style>
<script type="text/javascript" language="JavaScript">
window.onload = function() {
var symbolleiste = document.getElementById('toolbar');
symbolleiste.filters[0].enabled = true;
symbolleiste.filters[0].Apply();
symbolleiste.style.visibility='visible';
symbolleiste.filters[0].Play();
}
</script>| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright © 2006 der deutschen Übersetzung dpunkt.verlag GmbH
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS − Anspruchsvolle Websites mit Cascading Stylesheets" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
dpunkt.verlag GmbH, Ringstraße 19, 69115 Heidelberg