effet de filtre du didacticiel de base CSS

1. Filtre Alpha

Syntaxe :

{FILTER：ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,
starty=starty,finishx=finishx,finishy=finishy)}

L'attribut "Alpha" consiste à mélanger un élément cible avec l'arrière-plan. . Les concepteurs peuvent spécifier des valeurs numériques pour contrôler le degré de fusion. Cette « fusion avec l’arrière-plan » est familièrement connue sous le nom de transparence d’un élément. En spécifiant des coordonnées, vous pouvez spécifier la transparence des points, des lignes et des surfaces.

Les significations de leurs paramètres sont les suivantes :

"opacité" représente le niveau de transparence. La plage par défaut va de 0 à 100, ce qui correspond en fait à un pourcentage. Autrement dit, 0 représente complètement transparent et 100 représente complètement opaque.

"finishopacity" est un paramètre facultatif. Si vous souhaitez définir l'effet de transparence du dégradé, vous pouvez les utiliser pour spécifier la transparence à la fin. La plage va également de 0 à 100.

Le paramètre "style" précise les caractéristiques de forme de la zone transparente. Parmi eux, 0 représente une forme uniforme, 1 représente une forme linéaire, 2 représente une forme radiale et 3 représente un rectangle.

"STARTX" et "STARTY" représentent les coordonnées X et Y de départ de l'effet de transparence dégradé.

"FINISHX" et "FINISHY" représentent les coordonnées X et Y de la fin de l'effet de transparence dégradé.

L'effet est le suivant :

2. Filtre de flou

Syntaxe : Pour HTML :

{ilter:blur(add=add,direction=direction,strength=strength)}

Pour le langage Script :

[oblurfilter=] object.filters.blur

Lorsque vous glissez rapidement votre doigt sur une peinture à l'huile qui n'a pas encore séché, l'image devient floue . "Flou" produit le même effet de flou.
Le paramètre "ADD" est un jugement booléen "TRUE (par défaut)" ou "FALSE". Il précise si l'image est modifiée en un effet de flou impressionniste. L'effet de flou s'effectue dans le sens des aiguilles d'une montre

Le paramètre "DIRECTION" permet de définir la direction du flou. 0 degré représente la verticale vers le haut et tous les 45 degrés sont une unité. Sa valeur par défaut est de 270 degrés vers la gauche ;

La valeur "STRENGTH" ne peut être spécifiée qu'à l'aide d'un nombre entier, qui représente le nombre de pixels de largeur qui seront affectés par le flou. La valeur par défaut est 5.

Pour les polices de la page Web, si vous définissez son flou "ADD=1", alors l'effet de ces polices sera très beau. Comme suit :

filter:blur(add=ture,direction=135,strength=10）

Je vole vers toi, la pluie tombe doucement !

3. Les filtres FlipH, FlipV

Syntaxe : {filter:filph}, {filter:filpv} sont respectivement une inversion horizontale et une inversion verticale, en particulier comme suit :

4、Chroma 滤镜

语法：

{filter:chroma(color=color)}

       使用”Chroma"属性可以设置一个对象中指定的颜色为透明色，参数COLOR即要透明的颜色。下面是兰色文字，然后用Chroma 滤镜过滤掉兰色，就成了下面的样子。

filter:chroma(color=blue)

滴水檐坊

5、DropShadow 滤镜

语法：

{filter:dropshadow(color=color,offx=ofx,offy=offy,positive=positive)}

“DropShaow"顾名思义就是添加对象的阴影效果。其工作原理是建立一个偏移量，加上较深。

"Color"代表投射阴影的颜色，"offx"和"offy"分别是X方向和Y方向阴影的饿偏移量。

"Positive"参数是一个布尔值，如果为“TRUE（非0）”，那么就为任何的非透明像素建立可见的投影。

如果为“FASLE（0）”，那么就为透明的像素部分建立透明效果

正常文字	dropshadow(color=gray,offx=5,offy=5.positive=0)后的文字

6、Glow 滤镜

语法：

{filter:glow(color=color,strength)}

当对一个对象使用"glow"属性后，这个对象的边缘就会产生类似发光的效果。“COLOR”是指定发光的颜色，“STRENGTH”则是强度的表现，可以从1到255之间的任何整数来指定这个力度。
filter:glow(color=red,strength=10) 后的效果

滴水檐茶坊

filter:glow(color=#ffff00,strength=5) 后的效果

滴水檐茶坊

好象可以把PhotoShop踹到一边了，是吗？

以上就是css基础教程之滤镜效果的内容，更多相关内容请关注PHP中文网（www.php.cn）！