Explication détaillée d'exemples d'implémentation d'effets de filtre dans CSS3

La plupart de mes projets récents sont entrés en contact avec CSS3, mais ce foutu IE ne le supporte pas. Après avoir cherché, j'ai trouvé que les filtres d'IE sont très utiles. Il semble que le W3C normalise les filtres. Découvrez les effets de filtre d'IE. N'oubliez pas. Utilisez IE pour parcourir. Les amis intéressés peuvent en savoir plus. J'espère que cet article vous sera utile

La plupart de mes projets récents impliquent CSS3, mais ce foutu IE le fait. ne le prend pas en charge. Après avoir cherché, j'ai trouvé que les filtres d'IE sont plutôt bons. Cela fonctionne, il semble que le W3C normalise les filtres. Aujourd'hui, je vais trier les effets de filtre d'IE (veuillez utiliser IE pour parcourir), et demain j'écrirai les effets correspondants de CSS3 (veuillez utiliser le noyau Webkit pour parcourir). , si les lecteurs ont d'autres meilleurs articles et espèrent les partager, n'hésitez pas à rejoindre le groupe de communication Web front-end (75701468) pour partager votre et la mienne

Filtre : Effet de transparence

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

Instructions :
Opacité : valeur de départ, allant de 0 à 100, 0 est transparent, 100 est l'image originale.
FinishOpacity : valeur cible.
Style : 1 ou 2 ou 3
StartX : n'importe quelle valeur
StartY : n'importe quelle valeur
FinishX : n'importe quelle valeur
FinishY : n'importe quelle valeur

Effet de transparence général : filtre : alpha(opacity=30);

Code W3C : -webkit-filter:opacity(0.3);

rose

Transparence du type de ligne : filtre : alpha(Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=200, FinishY=180);

Code W3C : inconnu ;

Rose

Radiotransparent : filtre : Alpha(Opacity=0, FinishOpacity=100, Style=2);

Code W3C : inconnu;

Rose

Filtre à effet de lumière douce :alpha(opacity=100, finishOpacity=0,style=3);

Code W3C : inconnu ;

Rose

Filtre : Effet d'ombre portée

Syntaxe : filtre :DropShadow (Color=color, OffX=offX, OffY=offY, Positive=positive)

Description :
Couleur : format #rrggbb, n'importe lequel.
Offx : valeur de déviation de l'axe X.
Offy : valeur de décalage de l'axe Y.
Positif : Si "Vrai", créez une ombre visible pour tous les pixels non transparents. Si "Faux", créez une ombre visible pour la partie transparente du pixel.

Effet d'ombre : filter:progid:dXImageTransform.Microsoft.DropShadow(color=#000000,offX=5,offY=5,positives=true);

Code W3C : -webkit-filter :drop-shadow(5px 5px 0 #000000); ou box-shadow:5px 5px 0 #000;

Rose

Effet d'ombre : progid : DXImageTransform.Microsoft.Shadow(color=#000000,direction=135,strength=10);

Code W3C : inconnu;

Rose

Effet de considération des couleurs : progid:DXImageTransform.Microsoft.Chroma(color=#59A074);

Code W3C : inconnu;

Fleur rose

mosaïque : filter:progid:dXImageTransform.Microsoft.Pixelate(maxsquare=3);

Code W3C : inconnu;

Rose

Effet Glow : filter:progid:dXImageTransform.Microsoft.Glow(color=#000000,Strength=5);

Code W3C : inconnu;

Rose

Flip horizontal : filtre : fliph;

Code W3C : -webkit-transform:rotateY(180deg);

Rose

Flip vertical : filtre : flipv;

Code W3C : -webkit-transform:rotateX(180deg);

Rose

Effet d'inversion : filtre : invert;

Code W3C : -webkit-filter:invert(1);

Rose

Effet noir et blanc : filtre : gris;

Code W3C : -webkit-filter:grayscale(1);

Rose

Photo radiographique : filtre:xray;

Code W3C : -webkit-filter:grayscale(1) invert(1);

Rose

Filtre : Effet de flou

Syntaxe : filtre : Flou (Ajouter = ajouter, Direction = direction, Force = force)

Description :
Ajouter : Spécifiez si l'image est modifiée en un effet de flou impressionniste. 1 est vrai, 0 est faux.
Direction : angle, 0 ~ 315 degrés, la taille du pas est de 45 degrés.
Force : combien de pixels de largeur sont affectés par le flou, la valeur par défaut est de 5 pixels.

Flou du vent (avec angle) : filtre : flou(add=true,direction=45,strength=30);

Code W3C : Aucun

Rose

Flou général : filter:progid:DXImageTransform.Microsoft.Blur(pixelradius=7);

Code W3C : -webkit-filter:blur(3px);

Rose

Filtre : Effet d'ondulation

Syntaxe : filtre : Vague(Ajouter=ajouter, Freq =freq, LightStrength= force, Phase=phase, Force=force)

Description :
Ajouter : S'il faut perturber, la valeur par défaut est "Vrai".
Freq : combien d'ondulations complètes sont générées.
LightStrength : améliore la lumière et l'ombre, entier valeur de 0 à 100.
Phase : le décalage de l'onde sinusoïdale, généralement la valeur est 0, et la plage est une valeur entière de 0 à 100.
Force : représente l'amplitude.

Onde sinusoïdale : filtre : Wave(Add=0, Freq=60, LightStrength=1, Phase=0, Strength=3);

Code W3C : inconnu ;

Rose

Effet de dégradé : filtre : progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr="#000000", EndColorStr="#ffffff"); 🎜>

CSS3 Gratuit. tutoriel vidéo

Explication détaillée des 10 principales commandes de CSS3

Brève description de la façon dont les concepteurs Web peuvent bien utiliser la technologie CSS3.

Css3 pour créer des effets de survol de la souris

Exemple CSS3 de définition de la couleur RVB.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!