|
Der IE hat uns in der frühen Entwicklungsphase Kopfschmerzen bereitet, aber er ist auch anders. Er unterstützt nicht Dinge, die andere unterstützen, und er hat auch Dinge, die andere nicht unterstützen. Heute werde ich kurz eine seiner Funktionen vorstellen – Filter.
CSS-Filter werden hauptsächlich verwendet, um verschiedene Spezialeffekte bei Bildern zu erzielen. Es spielt eine ganz magische Rolle bei der Website-Erstellung. CSS-Filter können die Website schöner machen. In CSS stellt das Filterattribut die Bedeutung des Filters dar, mit dem die Filtereffekte von Text, Bildern und Tabellen festgelegt werden können.
Syntax: STYLE={"filter:filtername(fparameter1,fparameter2...)}
Hinweis: Filtername ist der Name des Filters, fparameter1, fparameter2 usw. sind die Parameter des Filters.
13 CSS-Filtereffekte 1. Filter: Chroma – Sonderfarben transparent machen.
Syntax: STYLE="filter:Chroma(Farbe=Farbe)"
Beschriftung: Farbe: #rrggbb-Format, beliebig.
2. Filter: Unschärfe – erzeugt einen Hochgeschwindigkeitsbewegungseffekt, also einen Unschärfeeffekt.
Syntax: STYLE="filter:Blur(Add=hinzufügen,Direction=Richtung,Strength=Stärke)"
Hinweis: Addition: normalerweise 1 oder 0; Richtung: Winkel 0 – 315 Grad, Schrittlänge 45 Grad; Stärke: der Wert der Effekterhöhung, normalerweise 5.
3. Filter: FlipV – Erstellen Sie ein vertikales Spiegelbild.
Syntax: STYLE="filter:FlipV"
4. Filter: Alpha - Legt die Transparenzstufe fest. Syntax: STYLE="filter:Alpha(Opacity=opacity,FinishOpacity=finishopacity,Style=style,StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)"
Hinweis: Opazität: Startwert, Bereich von 0 bis 100, 0 für transparent und 100 für das Originalbild; FinishOpacity: Zielwert; Stil: 1 oder 2 oder 3; StartX: beliebiger Wert; StartY: beliebiger Wert 5. Filter: FlipH – Erstellen Sie ein horizontales Spiegelbild.
Syntax: STYLE="filter:FlipH"
6. Filter: Glühen – Fügt den Kanten nahegelegener Objekte einen Glanz hinzu.
Syntax: STYLE="filter:Glühen(Farbe=Farbe,Stärke=Stärke)"
Beschriftung: Farbe: leuchtende Farbe; Stärke: Stärke (0-100)
7.Filter:Maske – Erstellen Sie eine transparente Maske auf dem Objekt.
Syntax: STYLE="filter:Maske(Farbe=Farbe)"
8. Filter: Filter: Röntgen – Lässt das Objekt aussehen, als wäre es mit Röntgenstrahlen beleuchtet worden.
Syntax: STYLE="filter:Xray"
9.Filter: invertieren – Farbe invertieren.
Syntax: STYLE="filter:Invert"
10.Filter:Schlagschatten – erstellt einen festen Schatten eines Objekts.
Syntax: STYLE="filter:DropShadow(Farbe=Farbe,AusX=ausX,AusY=ausY,Positive=positiv)"
Beschriftung: Farbe: #rrggbb-Format, beliebig; Offx: Offsetwert der X-Achse; Offy: Offsetwert der Y-Achse; Positiv: 1 oder 0.
11. Filter: Grau – Bild in Graustufen umwandeln.
Syntax: STYLE="filter:Grau"
12. Filter: Welle – Kräuseleffekt.
Syntax:Filter:Welle(Add=Hinzufügen,Freq=Freq,LichtStärke=Stärke,Phase=Phase,Stärke=Stärke)
Beschriftung: Add: normalerweise 1 oder 0; Freq: Verformungswert; LightStrength: Verformungsprozentsatz; Phase: Winkelverformungsprozentsatz; Strength: Verformungsstärke.
13.shadow – Erstellen Sie einen versetzten, festen Schatten.
Syntax:Filter:Schatten(Farbe=Farbe,Richtung=Richtung)
Beschriftung: Farbe: #rrggbb-Format; Richtung: Winkel, 0–315 Grad, Schrittlänge beträgt 45 Grad.
Eine Sache, die Sie bei der Verwendung von CSS-Filtern beachten sollten, ist, dass in aktuellen Website-Layouts Filter häufig an Divs angehängt werden. Wenn Sie im HTML-Code einfach eine ID für das Div festlegen, funktioniert der Filter nicht. Sie müssen das ID-Attribut im Stil oder CSS definieren, sonst funktioniert es nicht.
Es ist nur ein Codesatz erforderlich, um beim Erstellen einer Website Bilder wie PPT-Dokumente frei wechseln zu lassen. Es ist ganz einfach! Vor der Konvertierung müssen wir drei grundlegende Codes verstehen:
Drehung: style="filter: progid:DXImageTransform.Microsoft.BasicImage(rotation:1)"
Hintergrundfarbe entfernen: style="filter:Chroma(Color=#000000)"
Legen Sie die Verlaufsfarbe fest: style="position:relative;left:0px;top:0px;filter:progid:DXImageTransform.Microsoft.gradient(startcolorstr=#ff0000,endcolorstr=#ffff00,gradientType=1)"
Highlight-Rezension: Umfassende Sammlung von CSS-Filtereffekten für den Website-Aufbau Unten finden Sie eine umfassende Sammlung von Bildkonvertierungsfiltern. Ich hoffe, sie kann Ihnen helfen! ! !
Zufällige Transformation: progid:DXImageTransform.Microsoft.RevealTrans(enabled=true,transition=23)
Das Quadrat wird allmählich kleiner: progid:DXImageTransform.Microsoft.Iris(irisstyle=square,motion=in)
Das Quadrat wird allmählich größer: progid:DXImageTransform.Microsoft.Iris(iristyle=square,motion=out)
Überblendung: progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=in)
Überblendung: progid:DXImageTransform.Microsoft.Iris(irisstyle=cross,motion=out)
Die Sternform wächst allmählich: progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=out)
Die Sternform wird allmählich kleiner: progid:DXImageTransform.Microsoft.Iris(irisstyle=star,motion=in)
Der Kreis wird allmählich größer: progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=out)
Der Kreis wird allmählich kleiner: progid:DXImageTransform.Microsoft.Iris(irisstyle=circle,motion=in)
Diamant wird allmählich kleiner: progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=in)
Der Diamant wächst allmählich: progid:DXImageTransform.Microsoft.Iris(irisstyle=diamond,motion=out)
Pluszeichen wird größer: progid:DXImageTransform.Microsoft.Iris(irisstyle=plus,motion=out)
Pluszeichen wird allmählich kleiner: progid:DXImageTransform.Microsoft.Iris(iristyle=plus,motion=in)
Nach oben löschen: progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=up)
Nach unten löschen: progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=down)
Links löschen: progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=left)
Rechts löschen: progid:DXImageTransform.Microsoft.Blinds(bands=1,direction=right)
Verkleinern Sie den linken und rechten Mittelteil: progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=vertical)
Zufällige Überblendung: progid:DXImageTransform.Microsoft.RandomDissolve(enable=true)
Erweitern Sie den mittleren Teil nach oben und unten: progid:DXImageTransform.Microsoft.Barn(motion=out,orientation=horizontal)
Erweitern Sie die Mitte links und rechts: progid:DXImageTransform.Microsoft.Barn(motion=out,orientation=vertical)
Zufällige horizontale Linien: progid:DXImageTransform.Microsoft.RandomBars(orientation=horizontal)
Zufällige vertikale Linien: progid:DXImageTransform.Microsoft.RandomBars(orientation=vertical)
Verkleinern Sie den oberen und unteren Mittelteil: progid:DXImageTransform.Microsoft.Barn(motion=in,orientation=horizontal)
Standard-Gradiententransformation: BlendTrans (aktiviert=true, Prozent=10)
Anpassbare Farbverlaufstransformation: progid:DXImageTransform.Microsoft.Fade(enabled=true,overlap=1.0)
Unten rechts einfügen: progid:DXImageTransform.Microsoft.Inset(enabled=true)
Versteckte Streckung: progid:DXImageTransform.Microsoft.Stretch(stretchstyle=hide)
Push-Stretch: progid:DXImageTransform.Microsoft.Stretch(stretchstyle=push)
Rotationsstreckung: progid:DXImageTransform.Microsoft.Stretch(stretchstyle=spin)
Gegen den Uhrzeigersinn: progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=wedge)
Radiale Strahlen: progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=radial)
Mosaikeffekt: progid:DXImageTransform.Microsoft.Pixelate(maxSquare=20)
Uhr: progid:DXImageTransform.Microsoft.RadialWipe(wipestyle=clock)
Treppe unten links: progid:DXImageTransform.Microsoft.Strips(motion=leftdown)
Treppe oben rechts: progid:DXImageTransform.Microsoft.Strips(motion=rightup)
Treppe oben links: progid:DXImageTransform.Microsoft.Strips(motion=leftup)
Treppe rechts runter: progid:DXImageTransform.Microsoft.Strips(motion=rightdown)
Spiralkontraktion: progid:DXImageTransform.Microsoft.Spiral(gridSizeX=20,gridSizeY=20)
Windmühlenrotation: progid:DXImageTransform.Microsoft.Wheel(spokes=20)
Z-förmiger Zickzack: progid:DXImageTransform.Microsoft.Zigzag(gridSizeX=20,gridSizeY=20)
H-Jalousien: progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=down)
:progid:DXImageTransform.Microsoft.Blinds(Bands=6,Richtung=oben)
:progid:DXImageTransform.Microsoft.Blinds(Bands=60,Richtung=nach unten)
:progid:DXImageTransform.Microsoft.Blinds(Bands=60,Richtung=nach oben)
V Jalousien: progid:DXImageTransform.Microsoft.Blinds(bands=6,direction=right)
:progid:DXImageTransform.Microsoft.Blinds(Bands=6,Richtung=links)
:progid:DXImageTransform.Microsoft.Blinds(Bands=60,Richtung=rechts)
:progid:DXImageTransform.Microsoft.Blinds(Bands=60,Richtung=links)
Folie austauschen: progid:DXImageTransform.Microsoft.Slide(slidestyle=swap,bands=1)
:progid:DXImageTransform.Microsoft.Slide(slidestyle=swap,bands=20)
Folie im Push-Stil: progid:DXImageTransform.Microsoft.Slide(slidestyle=push,bands=1)
:progid:DXImageTransform.Microsoft.Slide(Slidestyle=push,Bands=20)
Versteckte Folie: progid:DXImageTransform.Microsoft.Slide(slidestyle=hide,bands=1)
:progid:DXImageTransform.Microsoft.Slide(Slidestyle=Ausblenden,Bands=20)
Vorwärts verwischen: progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0.5,wipestyle=0,motion=forward)
:progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0,5,Wischstil=0,Bewegung=umgekehrt)
:progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0,5,Wischstil=1,Bewegung=vorwärts)
:progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=0,5,Wischstil=1,Bewegung=umgekehrt)
Vertikales Schachbrett: progid:DXImageTransform.Microsoft.CheckerBoard(direction=right,squaresX=12,squaresY=12)
:progid:DXImageTransform.Microsoft.CheckerBoard(Richtung=links,QuadrateX=12,QuadrateY=12)
:progid:DXImageTransform.Microsoft.Checkerboard(Richtung=rechts,QuadrateX=2,QuadrateY=2)
:progid:DXImageTransform.Microsoft.Checkerboard(Richtung=links,QuadrateX=2,QuadrateY=2)
:progid:DXImageTransform.Microsoft.Checkerboard(Richtung=rechts,QuadrateX=60,QuadrateY=60)
:progid:DXImageTransform.Microsoft.Checkerboard(Richtung=links,QuadrateX=60,QuadrateY=60)
Horizontales Schachbrett: progid:DXImageTransform.Microsoft.CheckerBoard(direction=down,squaresX=12,squaresY=12)
:progid:DXImageTransform.Microsoft.CheckerBoard(Richtung=nach oben,QuadrateX=12,QuadrateY=12)
:progid:DXImageTransform.Microsoft.Checkerboard(Richtung=nach unten,QuadrateX=2,QuadrateY=2)
:progid:DXImageTransform.Microsoft.Checkerboard(Richtung=nach oben,QuadrateX=2,QuadrateY=2)
:progid:DXImageTransform.Microsoft.Checkerboard(Richtung=nach unten,QuadrateX=60,QuadrateY=60)
:progid:DXImageTransform.Microsoft.Checkerboard(Richtung=nach oben,QuadrateX=60,QuadrateY=60)
|
