Notes d'étude sur les filtres en CSS3 (filtres statiques et filtres dynamiques)

Cette section présente les filtres en CSS, y compris comment utiliser les filtres statiques et les filtres dynamiques. Les amis qui ne comprennent pas peuvent se référer à ce qui suit :

1. Style de filtre statique CSS. (filter) (uniquement pris en charge par IE4.0 ou supérieur)

Comment utiliser le style de filtre statique CSS : { filter : filtername( settings1, settings2 , .. .) }

Brève description du style de filtre Paramètres pris en charge

alpha : Définissez l'opacité, finishOpacity, le style, startX, startY, finishX de l'image ou du texte, finishY, ajouter, direction, force

flou : Produire un effet de flou dynamique dans la direction et la position spécifiées ajouter, direction, force

chroma : Pour la couleur sélectionnée Rendre la couleur transparente color

dropShadow : Génère des ombres dans la direction et la position spécifiées color, offX, offY, positive

flipH : Retourne l'objet dans la direction horizontale

flipV : retourner l'objet dans le sens vertical

glow : couleur et force de la lueur autour de l'objet

gris : traiter l'objet en niveaux de gris

inverser : Inverser la couleur de l'objet

lumière : Simuler l'éclairage sur l'objet

masque : Générer une couleur de masque sur l'objet

ombre : génère la couleur de l'ombre, la direction le long du bord de l'objet

onde : génère l'ajout d'une forme d'onde sinusoïdale, la fréquence, la force de la lumière, la phase, la force dans la direction verticale

xray : modifiez la profondeur de couleur de l'objet et dessinez une image en noir et blanc

Ce qui précède est l'intégralité du contenu du filtre statique. Veuillez noter que CSS est sensible à la casse !

2. Filtres dynamiques CSS

Les filtres dynamiques peuvent ajouter des effets de fondu d'entrée et de sortie mobiles et de transformation d'image à la page. peut être divisé en Il existe deux types de fusion et de révélation, le premier peut faire disparaître ou apparaître progressivement des objets, et le second fournit 24 effets de transformation d'image. Pour l'appel de filtres dynamiques, en plus du type de filtre, des paramètres, etc. qui doivent être définis dans les filtres statiques, un langage de script est également utilisé pour contrôler son état.

Tout d'abord, avant de démarrer un effet dynamique, vous devez appliquer (Appliquer) puis jouer (Jouer) l'effet dynamique. Vous pouvez également interrompre l'effet dynamique (Arrêter) pendant que l'effet dynamique est en cours. . Vous pouvez utiliser l'implémentation de la méthode suivante :

Nom de l'objet.filters (valeur du filtre).Apply()
Nom de l'objet.filters (valeur du filtre).Play()
Nom de l'objet.filters ( valeur du filtre) .Stop()

L'état du filtre peut être jugé par "nom de l'objet.filters (valeur du filtre).status". Lorsque la valeur est 0, cela signifie que le filtre n'a pas été exécuté. Lorsqu'il vaut 1, cela signifie que le filtre n'a pas été exécuté. Lorsqu'il vaut 2, cela signifie que le filtre est en cours d'exécution.

Lors de la définition d'un filtre, comme mentionné ci-dessus, vous pouvez avoir un mélange ("filter:blendTrans(duration=time value)", la durée représente le temps requis pour l'exécution du filtre, en secondes) et un affichage ("filter: révélationTrans(duration=time value, transition=transition type)", le type de transition est une valeur comprise entre 0 et 23).

Les filtres ne sont pas encore officiellement reconnus par le W3C. Les filtres ne constituent qu'une partie du navigateur IE de Microsoft et ne peuvent pas être utilisés dans les navigateurs Netscape. Les organisations qui formulent des normes pertinentes en discutent, mais ne sont pas encore parvenues à une conclusion définitive. À mon avis, les filtres sont un élément vraiment amusant et essentiel pour créer de superbes visuels. Les filtres économisent de la bande passante et vous permettent d'utiliser le formatage du texte lors de la création de fantastiques conceptions visuelles

sans avoir à créer d'abord d'énormes bitmaps de texte pour obtenir le même effet.

Mais comme ces fonctionnalités ne sont pas encore devenues une partie formelle du HTML, tous les navigateurs ne peuvent pas voir ces fonctionnalités. Parfois, vous devez envisager de créer le même effet de manière traditionnelle et, bien sûr, vous devez continuer à insérer d'énormes fichiers GIF dans des pages Web.
Silence...Silence...

3. Explication détaillée du filtre CSS

Syntaxe :

STYLE="filter:filtername(fparameter1, fparameter2...)"

(Filtername est le nom du filtre, fparameter1, fparameter2, etc. sont les paramètres du filtre)

Description du filtre :

alpha : définir le niveau de transparence
flou : créer un effet de mouvement à grande vitesse, c'est-à-dire un effet de flou
chroma : rendre une couleur spéciale transparente
DropShadow : créer une ombre fixe de l'objet
FlipH : Créer une image miroir horizontale
FlipV : créer un miroir vertical de l'image
lueur : ajouter de la lumière en dehors des bords des objets proches
gris : mettre en niveaux de gris l'image
inverser : inverser la couleur
lumière : créer une source de lumière sur l'objet
masque : créer un masque transparent Membrane sur l'objet
ombre : créer une ombre fixe décalée
vague : effet d'entraînement
Rayon X : donner l'impression que l'objet est illuminé par rayons X

1. Filtre : Alpha

Syntaxe :

STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity, Style=style, StartX=startX, StartY=startY, FinishX=finishX, FinishY =finishY)"

Arahan:
Kelegapan: nilai permulaan, antara 0 hingga 100, 0 adalah lutsinar, 100 ialah imej asal.
FinishOpacity: nilai sasaran.
Gaya: 1 atau 2 atau 3
StartX: sebarang nilai
StartY: sebarang nilai

Contoh: penapis:Alpha(Opacity="0",FinishOpacity="75",Style= "2")

2. Penapis: kabur

Sintaks:

STYLE="filter:Blur(Tambah = tambah, Arah = arah, Kekuatan = kekuatan)"

Penjelasan:
Tambah: Umumnya 1, atau 0.
Arah: Sudut, 0~315 darjah, saiz langkah ialah 45 darjah.
Kekuatan: Nilai pertumbuhan kesan, secara amnya 5 sudah memadai.

Contoh: penapis:Kabur(Tambah="1",Arah="45",Strength="5")

3. Penapis: Chroma

Sintaks:

STYLE="filter:Chroma(Color = color)"

Penerangan: warna: #rrggbb format, mana-mana.

Contoh: penapis:Chroma(Color="#FFFFFF")

4 Penapis: DropShadow

Sintaks:

. STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"

Penerangan:

Warna:#rrggbb format, sebarang.
Offx: Nilai sisihan paksi X.
Mati: Nilai offset paksi-Y.
Positif: 1 atau 0.

Contoh:

penapis:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")

5. Penapis: FlipH

Sintaks:

STYLE="filter:FlipH"

Contoh: penapis:FlipH

6. Penapis: FlipV

Sintaks: STYLE="filter:FlipV"

Contoh: penapis:FlipV

7. Penapis: bercahaya

Sintaks: STYLE="filter:Glow(Color=color, Strength=strength)"

Arahan:
Warna: glow color .
Kekuatan: Kekuatan (0-100)

Contoh: penapis:Glow(Color="#6699CC",Strength="5")

8

Sintaks: STYLE="filter:Gray"

Contoh: penapis:Gray

9. Terbalikkan

Sintaks: STYLE="filter:Invert"

Contoh: penapis:Invert

10: topeng

Sintaks: STYLE=". penapis:Topeng(Warna=warna)"

Contoh: penapis:Topeng (Warna="#FFFFE0")

11. Penapis: bayang

Sintaks: penapis:Bayang(Warna=warna, Arah=arah)

Penerangan:
Warna: format #rrggbb.
Arah: sudut, 0-315 darjah, saiz langkah ialah 45 darjah.

Contoh: penapis:Bayang (Color="#6699CC", Direction="135")

12: gelombang

Sintaks : penapis: Gelombang(Tambah=tambah, Freq=freq, Kekuatan Cahaya=kekuatan, Fasa=fasa, Kekuatan=kekuatan)

Penerangan:
Tambah: Umumnya 1, atau 0.
Kekerapan: nilai ubah bentuk.
Kekuatan Cahaya: peratusan ubah bentuk.
Fasa: Peratusan ubah bentuk sudut.
Kekuatan: kekuatan ubah bentuk.

Contoh: penapis: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")

13. Penapis: Xray

Sintaks: STYLE="filter:Xray"

Contoh: penapis: >