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

IE 滤镜	W3C 滤镜
Alpha：设置透明层次. blur：创建高速度移动效果，即模糊效果. Chroma：制作专用颜色透明. DropShadow：创建对象的固定影子. FlipH：创建水平镜像图片. FlipV：创建垂直镜像图片. glow：加光辉在附近对象的边外. gray：把图片灰度化. invert：反色. light：创建光源在对象上. mask：创建透明掩膜在对象上. shadow：创建偏移固定影子. wave：波纹效果. Xray：使对象变的像被x光照射一样.	grayscale 灰度 sepia 褐色 saturate 饱和度 hue-rotate 色相旋转 invert 反色 opacity 透明度 brightness 亮度 contrast 对比度 blur 模糊 drop-shadow 阴影

.

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"); 🎜>

Code W3C : background:-webkit-linear-gradient(#000000 0, #ffffff 100%);

[Recommandations associées]

1

CSS3 Gratuit. tutoriel vidéo

2.

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

3

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

4.

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

5

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!