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  : . Si les éléments sont utilisés dans la page, ils doivent être utilisés avec JS.

14. Ombre : Créez un autre effet d'ombre

Shadow(Color=?, Direction=?)

Color : fait référence à la couleur de l'ombre.

Direction : définit la direction de la projection, 0 degré signifie verticalement vers le haut, puis tous les 45 degrés sont une unité.

15. Wave : Effet d'ondulation

Wave(Add=?, Freq=?, LightStrength=?, Phase=?, Strength=?)

Add : Indique si Afficher l'objet d'origine, 0 signifie ne pas afficher, non-0 signifie afficher l'objet d'origine.

Freq : définissez le nombre de fluctuations.

LightStrength : Réglez l'intensité lumineuse de l'effet d'onde, de 0 à 100. 0 signifie le plus faible, 100 signifie le plus fort.

Phase : L'angle de phase de départ de l'onde. Valeur en pourcentage de 0 à 100. (Par exemple : 25 équivaut à 90 degrés, tandis que 50 équivaut à 180 degrés.)

Force : définissez l'amplitude du balancement des vagues.

16. Xray : Afficher le contour de l'image, effet X-ray

Remarque : Lorsque vous utilisez des filtres CSS, vous devez utiliser des éléments avec des zones, tels que des tableaux, des images, etc. Les éléments sans zones tels que le texte et les paragraphes ne peuvent pas utiliser de filtres CSS. Pour ces éléments, nous pouvons définir les styles de hauteur et de largeur ou les coordonnées des éléments pour y parvenir.

Regardez l'exemple ci-dessous. Nous créons un effet d'ombre portée (dropshadow) sur une ligne de texte, créons un nouveau style.shadow personnalisé et sélectionnons "DropShadow(Color=?, OffX=?, OffY=? ,) dans la liste déroulante du filtre. Positive=?)", nous le définissons sur "DropShadow(Color=999999, OffX=2, OffY=2, Positive=1)". Ensuite, lorsque nous appliquons le style défini à la page, nous constatons que le texte du tableau a une ombre, mais que le texte du paragraphe n'a pas d'ombre. Cliquez sur le bouton Modifier la feuille de style dans le panneau des styles CSS et ajoutez l'attribut Hight au style :

Afin de ne pas affecter la hauteur de l'objet d'origine, la hauteur que nous définissons ne peut pas dépasser la hauteur de la police elle-même. . Après OK, vous pouvez voir dans le navigateur que le texte du paragraphe a également une ombre.

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!