Maison > Article > interface Web > Tutoriel CSS (7) Filtre
CSS fournit des effets de filtre multimédia intégrés. Grâce à cette technologie, vous pouvez ajouter des filtres visuels et des effets de transformation à un élément HTML standard, tel que des images, des conteneurs de texte et d'autres objets. Dreamweaver4 propose 16 filtres parmi lesquels choisir, comme indiqué ci-dessous :
Voyons ensuite comment utiliser facilement ces filtres CSS dans Dreamweaver4.
Créez un style personnalisé ".filter", sélectionnez le filtre Alpha dans la liste déroulante Filtre, nous allons "Alpha(Opacity=?, FinishOpacity=?, style=?, StartX=?, StartY= ? , FinishX=?, FinishY=?)" définissez le paramètre Opacité sur 50 et supprimez tous les paramètres suivants, comme indiqué ci-dessous :
Après avoir appuyé sur OK, un style personnalisé de ".filter" est créé. Nous Appliquez ce style à une image et l’image sera semi-transparente. Si vous appliquez ce style à un tableau, le tableau deviendra également semi-transparent. Notez que tous les effets de filtre ne sont visibles que dans le navigateur. Voici le code original :
Remarque : Dans cet exemple, nous n'avons pas utilisé les paramètres suivants, uniquement le paramètre Opacité, donc Supprimez les autres paramètres.
Expliquons les effets et les paramètres de chaque filtre :
1. Alpha : Définir la transparence
Alpha(Opacity=?, FinishOpacity=?, style=? , StartX= ?, StartY=?, FinishX=?, FinishY=?)
Opacité : niveau de transparence, la plage est de 0 à 100, 0 représente complètement transparent, 100 représente complètement opaque.
FinishOpacity : Lors de la définition de l'effet de transparence du dégradé, il est utilisé pour spécifier la transparence à la fin, et la plage est également de 0 à 100.
style : définissez le style de transparence du dégradé. Une valeur de 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 du dégradé.
2. BlendTrans : effet de fondu entrant et sortant entre les images
BlendTrans(Duration=?)
Durée : temps de fondu entrant ou sortant.
Remarque : Ce filtre doit être utilisé avec JS pour créer une séquence d'images afin de créer des effets entre les images.
3. Bluru : Créer un effet de flou
Flou (Ajouter=?, Direction=?, Force=?)
Ajouter : S'il faut flouter dans une direction, ceci Le paramètre est une valeur booléenne, vraie (et non 0) ou fausse (0).
Direction : définissez la direction du flou, où 0 degré représente la verticale vers le haut, puis tous les 45 degrés sont une unité.
Force : représente la valeur du pixel flou.
4. Chroma : définissez la couleur spécifiée sur transparente
Chroma(Color=?)
Color : fait référence à la couleur à définir comme transparente.
5. DropShadow : Créer un effet d'ombre
DropShadow(Color=?, OffX=?, OffY=?, Positive=?)
Color : Spécifiez la couleur de l'ombre.
OffX : Spécifie le décalage horizontal de l'ombre par rapport à l'élément, un nombre entier.
OffY : Spécifie le décalage vertical de l'ombre par rapport à l'élément, un nombre entier.
Positif : C'est une valeur booléenne. Lorsque la valeur est vraie (non-0), cela signifie établir une ombre extérieure ; lorsqu'elle est fausse (0), cela signifie établir une ombre intérieure.
6. FlipH : retournez l'élément horizontalement
7. FlipV : retournez l'élément verticalement
8 Glow : créez un effet de lueur extérieure
Glow. (Color=?, Strength=?)
Color : spécifie la couleur de la lumière. Force : L'intensité de la lumière, qui peut être n'importe quel nombre entier compris entre 1 et 255. Plus le nombre est grand, plus la portée de la lumière est grande.
9. Gris : supprimez la couleur de l'image et affichez-la sous forme d'image en noir et blanc
10. Inverser : inversez la couleur de l'image, produisant un effet semblable à celui d'un film
11. Lumière : l'effet de placer une source de lumière, qui peut être utilisée pour simuler l'effet de projection d'une source de lumière sur un objet
Remarque : cet effet nécessite que JS définisse la position et l'intensité. de la lumière.
12. Masque : Créez un masque transparent
Masque(Couleur=?)
Couleur : Définissez la couleur d'arrière-plan pour rendre la partie de l'objet recouvrant l'arrière-plan transparente.
13. RevealTrans : Créer un effet de commutation
RevealTrans(Duration=?, Transition=?)
Durée : est le temps de commutation, en secondes.
Transtition : C'est la méthode de commutation et peut être réglée de 0 à 23.
Remarque : Si vous souhaitez basculer entre les pages, vous pouvez ajouter une ligne de code dans la zone
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!