L'essence des effets de filtre CSS

Auteur：Eve Cole Date de mise à jour：2009-06-12 17:23:02

L'exemple de code HTML et le code CSS qu'il contient sont donnés ci-dessous. L'image utilisée est fd.jpg Copiez le code et nommez une image fd.jpg pour voir l'effet complet

Effet de filtre CSS.html

Propriétés du filtreDescriptionParamètres et valeursExemples d'effets
AlphaDéfinir l'effet de transparenceopacité : niveau de transparence, 0 à 100, 0 est complètement transparent

style : Spécifie les caractéristiques de forme de la zone transparente, 0 est une distribution uniforme ; 1 est linéaire ; 2 est radial ; 3 est rectangulaire
finishopacity : définit la transparence à la fin du dégradé, la valeur est de 0 à 100

startX, startY : coordonnées de début de l'effet de transparence dégradé
finishX, finishY : coordonnées de fin de l'effet de transparence dégradé

FlouCréer un effet de flouajouter : Spécifiez si l'image doit être modifiée en effet de flou, vrai et faux

direction : définissez la direction du flou, 0 degré signifie verticalement vers le haut, tous les 45 degrés sont une unité, la valeur par défaut est de 270 degrés vers la gauche
force : représente le nombre de pixels de largeur affectés par le flou, la valeur par défaut est 5< /td>

BONNE CHANCE !

ChromaDéfinir la couleur spécifiée sur transparentecouleur : Spécifier la couleur transparentechroma

Exemple < /div>
DropShadowCréer un contour d'image décalé, c'est-à-dire projeter une ombrecolor : la couleur de la projection
offx, offy : ombre dans le Décalage des directions x, y

positif : true crée une ombre pour tout pixel non transparent, false crée une ombre pour les pixels transparents

exemple de dropshadow

FlipHRetournement horizontalAucun

Retournement horizontal

< /tr>
FlipVRetournement verticalAucun

Retournement vertical

< /tr>
GlowAjouter des effets de lumière à la limite extérieure de l'objetcouleur : spécifiez la couleur de la lumière

force : intensité lumineuse

Exemple GLOW

GrisRéduire la couleur de l'image et la transformer en niveaux de grisAucun

InverserInverse complètement les valeurs de couleur, de saturation et de luminosité pour créer un effet négatifAucun

LumièreProjeter de la lumière sur un objetnonnon
MasqueCréer un masque transparent pour un objetcouleur : Préciser la couleur du masque

Exemple de MASQUE

OmbreÉtablir un contour solide d'un objet, c'est-à-dire un effet d'ombrecouleur : couleur de projection
direction : direction de projection < div class="shadows">Exemple d'OMBRE

VagueUtiliser des ondulations sinusoïdales pour perturber l'image dans les directions des axes X et Yajouter : vrai signifie perturber l'image en vagues, faux pas le perturber

freq : La fréquence de génération des ondulations (combien d'ondulations sont générées)
lightstrength : Améliore l'effet des ondulations générées (la valeur est de 0 à 100)

phase : définissez le décalage au début de l'onde sinusoïdale, généralement 0, jusqu'à 100
force : définissez l'amplitude de l'onde sinusoïdale

Exemple WAVE
XrayAfficher uniquement le contour de l'objetAucun