Der HTML-Beispielcode und der darin enthaltene CSS-Code sind unten aufgeführt. Das darin verwendete Bild ist fd.jpg. Kopieren Sie den Code und nennen Sie ein Bild fd.jpg, um den vollständigen Effekt zu
sehen //DTD HTML 4.01 Transitional//DE">
<html>
<Kopf>
<title>CSS-Filtereffekt.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="das ist meine Seite">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
.alphas
{
filter:alpha(opacity=0,finishopacity=100,style=1,startx=0,starty=85,finishx=150,finishy=85);
}
.verwischt
{
Schriftfamilie:lucida handwirting italic;
Schriftgröße:72px;
Schriftstil:fett;
Farbe:#336600;
width:350px;/*Dieses Attribut ist wichtig, sonst ist der Effekt nicht sichtbar*/
filter:blur(add=true,direction=90,strength=25);
}
.chromas
{
Schriftfamilie:lucida handwirting italic;
Schriftgröße:72px;
Schriftstil:fett;
Farbe: rot;
Breite: 350 Pixel;
filter:chroma(color=red);
}
.Schlagschatten
{
Schriftfamilie:lucida handwirting italic;
Schriftgröße:72px;
Schriftstil:fett;
Farbe:#336600;
Breite: 350 Pixel;
filter:dropshadow(color=red,offx=15,offy=10,positive=1);
}
.fliphs
{
Schriftfamilie:lucida handwirting italic;
Schriftgröße:72px;
Schriftstil:fett;
Farbe:#336600;
Breite: 350 Pixel;
filter:fliph;
}
.flipvs
{
Schriftfamilie:lucida handwirting italic;
Schriftgröße:72px;
Schriftstil:fett;
Farbe:#336600;
Breite: 350 Pixel;
filter:flipv;
}
.leuchtet
{
Schriftfamilie:lucida handwirting italic;
Schriftgröße:72px;
Schriftstil:fett;
Farbe:#336600;
Breite: 350 Pixel;
filter:glow(color=blue,strength=15);
}
.Grautöne
{
Schriftfamilie:lucida handwirting italic;
Schriftgröße:72px;
Schriftstil:fett;
Farbe:#336600;
Breite:350px;
Filter:grau;
}
.invertiert
{
Schriftfamilie:lucida handwirting italic;
Schriftgröße:72px;
Schriftstil:fett;
Farbe:#336600;
Breite: 350 Pixel;
Filter:invertieren;
}
.Masken
{
Schriftfamilie:lucida handwirting italic;
Schriftgröße:72px;
Schriftstil:fett;
Farbe:#336600;
Breite:350px;
filter:mask(color=grün);
}
.Schatten
{
Schriftfamilie:lucida handwirting italic;
Schriftgröße:72px;
Schriftstil:fett;
Farbe:#336600;
Breite: 350 Pixel;
filter:shadow(color=red,direction=225);
}
.Wellen
{
Schriftfamilie:lucida handwirting italic;
Schriftgröße:72px;
Schriftstil:fett;
Farbe:#336600;
Breite: 350 Pixel;
filter:wave(add=true,freq=3,lightstrength=100,phase=45,strength=20);
}
.Röntgenaufnahmen
{
Schriftfamilie:lucida handwirting italic;
Schriftgröße:72px;
Schriftstil:fett;
Farbe:#336600;
Breite: 350 Pixel;
Filter:Röntgen;
}
</style>
</head>
<Körper>
<Tabellenbreite=1000 Rand=1>
<tr><td width=100>Filtereigenschaften</td><td width=100>Beschreibung</td><td width=400>Parameter und Werte</td><td width=400>Effektbeispiele< /td ></tr>
<tr><td><span class=alpha>Alpha</span></td><td>Transparenzeffekt festlegen</td><td>Deckkraft: Transparenzstufe, 0 bis 100, 0 ist vollständig transparent<br>
Stil: Gibt die Formeigenschaften des transparenten Bereichs an. 0 ist eine gleichmäßige Verteilung. 2 ist eine radiale Verteilung von 0 bis 100<br>
startX, startY: Startkoordinaten des Verlaufstransparenzeffekts<br>finishX, finishY: Endkoordinaten des Verlaufstransparenzeffekts</td><td><p><img src="fd.jpg" class="alphas"/ ></p ></td></tr>
<tr><td>Unschärfe</td><td>Erstellen Sie einen Unschärfeeffekt</td><td>hinzufügen: Geben Sie an, ob das Bild in einen Unschärfeeffekt geändert werden soll, wahr und falsch<br>
Richtung: Legen Sie die Unschärferichtung fest. 0 Grad bedeutet vertikal nach oben. Alle 45 Grad sind eine Einheit. Der Standardwert ist 270 Grad nach links.<br>Stärke: Gibt an, wie viele Pixel der Breite von der Unschärfe betroffen sind. Der Standardwert ist 5< /td>
<td><div class="blrs">VIEL GLÜCK!</div></td></tr>
<tr><td>Chroma</td><td>Setzen Sie die angegebene Farbe auf transparent</td><td>Farbe: Geben Sie transparente Farbe an</td><td>Chroma<div class="chromas">Beispiel < /div></td></tr>
<tr><td>DropShadow</td><td>Erstellen Sie einen versetzten Bildumriss, das heißt, werfen Sie einen Schatten</td><td>Farbe: die Farbe der Projektion<br>offx, offy: Schatten im x-, y-Richtungsversatz<br>
positiv: true erstellt einen Schatten für jedes nicht transparente Pixel, false erstellt einen Schatten für transparente Pixel</td><td><div class="dropshadows">Beispiel für einen Schlagschatten</div></td></tr>
<tr><td>FlipH</td><td>Horizontaler Flip</td><td>Keine</td><td><div class="fliphs">Horizontaler Flip</div></td >< /tr>
<tr><td>FlipV</td><td>Vertikaler Flip</td><td>Keine</td><td><div class="flipvs">Vertikaler Flip</div></td >< /tr>
<tr><td>Glühen</td><td>Fügen Sie Lichteffekte zur äußeren Begrenzung des Objekts hinzu</td><td>Farbe: Geben Sie die Farbe des Lichts an<br>
Stärke: Lichtstärke</td><td><div class="glows">GLOW-Beispiel</div></td></tr>
<tr><td>Grau</td><td>Reduziert die Farbe des Bildes und wandelt es in Graustufen um</td><td>Keine</td><td><img src="fd.jpg"-Klasse ="Grautöne"/></td></tr>
<tr><td>Invertieren</td><td>Invertiert Farb-, Sättigungs- und Helligkeitswerte vollständig, um einen negativen Effekt zu erzeugen.</td><td>Keine</td><td><img src="fd .jpg" class="inverts"/></td></tr>
<tr><td>Licht</td><td>Licht auf ein Objekt projizieren</td><td>Nein</td><td>Nein</td></tr>
<tr><td>Maske</td><td>Erstellen Sie eine transparente Maske für ein Objekt</td><td>Farbe: Geben Sie die Farbe der Maske an</td><td><div class="masks" >MASK-Beispiel</div></td></tr>
<tr><td>Schatten</td><td>Erstellen Sie einen festen Umriss eines Objekts, also einen Schatteneffekt</td><td>Farbe: Projektionsfarbe<br>Richtung: Projektionsrichtung</td> <td>< div class="shadows">SHADOW-Beispiel</div></td></tr>
<tr><td>Welle</td><td>Verwenden Sie sinusförmige Wellen, um das Bild in Richtung der es stören<br >
Frequenz: Die Häufigkeit der Wellenerzeugung (wie viele Wellen werden erzeugt)<br>Lichtstärke: Verstärken Sie die Wirkung der erzeugten Wellen (Wert liegt zwischen 0 und 100)<br>
Phase: Stellen Sie den Versatz am Anfang der Sinuswelle ein, im Allgemeinen 0, bis zu 100<br>Stärke: Stellen Sie die Amplitude der Sinuswelle ein</td><td><div class="waves">WAVE-Beispiel</ div> </ td></tr>
<tr><td>Röntgen</td><td>Nur den Umriss des Objekts anzeigen</td><td>Keine</td><td><img src="fd.jpg" class="xrays" /> </td></tr>
</table>
</body>
</html>