Aperçu des nouvelles fonctionnalités de CSS3 : Comment utiliser CSS3 pour obtenir des effets de filtre

Aperçu des nouvelles fonctionnalités de CSS3 : Comment utiliser CSS3 pour obtenir des effets de filtre

Introduction :

Dans la conception Web, afin d'attirer l'attention de l'utilisateur et d'augmenter le sens artistique et la beauté de la page, nous pouvons utiliser diverses images Effets de filtre pour améliorer l'effet visuel des pages Web. Les nouvelles fonctionnalités de CSS3 nous fournissent des outils puissants pour obtenir ces effets de filtre. Cet article présentera quelques effets de filtre courants de CSS3 et fournira des exemples pratiques d'utilisation de ces effets.

1. Comment utiliser les effets de filtre CSS3

Pour utiliser les effets de filtre CSS3, nous pouvons le faire en ajoutant des attributs CSS pertinents aux éléments HTML. Voici quelques effets de filtre CSS3 couramment utilisés et comment les utiliser :

1. Flou gaussien (flou) : Cet effet peut rendre l'image floue. L'utilisation est la suivante :

   .blur {
       filter: blur(5px);
   }

   Dans le code ci-dessus, nous utilisons le sélecteur de classe .blur pour sélectionner les éléments qui doivent appliquer l'effet de flou gaussien, et utilisons le blur() Fonction pour Spécifier le degré de flou, en pixels. .blur类选择器来选中需要应用高斯模糊效果的元素，并使用blur()函数来指定模糊的程度，以像素为单位。

2. 对比度（contrast）：该效果可以调整图像的对比度。使用方法如下：

   .contrast {
       filter: contrast(200%);
   }

   在上述代码中，我们使用.contrast类选择器来选中需要调整对比度的元素，并使用contrast()函数来指定对比度的值，以百分比为单位。

3. 亮度（brightness）：该效果可以调整图像的亮度。使用方法如下：

   .brightness {
       filter: brightness(150%);
   }

   在上述代码中，我们使用.brightness类选择器来选中需要调整亮度的元素，并使用brightness()函数来指定亮度的值，以百分比为单位。

4. 色相旋转（hue-rotate）：该效果可以改变图像的颜色。使用方法如下：

   .hue-rotate {
       filter: hue-rotate(90deg);
   }

   在上述代码中，我们使用.hue-rotate类选择器来选中需要改变颜色的元素，并使用hue-rotate()函数来指定色相旋转的角度，以度为单位。

5. 饱和度（saturate）：该效果可以调整图像的饱和度。使用方法如下：

   .saturate {
       filter: saturate(200%);
   }

   在上述代码中，我们使用.saturate类选择器来选中需要调整饱和度的元素，并使用saturate()

Contraste : Cet effet peut ajuster le contraste de l'image. L'utilisation est la suivante :

.black-white {
    filter: grayscale(100%);
}

Dans le code ci-dessus, nous utilisons le sélecteur de classe .contrast pour sélectionner les éléments qui doivent ajuster le contraste, et utilisons le contrast()</ code> Fonction pour spécifier le contraste La valeur de,En pourcentage. <p></p><ol><li>Luminosité : Cet effet peut ajuster la luminosité de l'image. L'utilisation est la suivante : <p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.blur-background { filter: blur(10px); }</pre><div class="contentsignin">Copier après la connexion</div></div></p>Dans le code ci-dessus, nous utilisons le sélecteur de classe <code>.brightness pour sélectionner les éléments qui doivent ajuster la luminosité, et utilisons le brightness()</ code> Fonction pour spécifier la luminosité La valeur de,En pourcentage. </li><li><p></p>hue-rotate : Cet effet peut changer la couleur de l'image. L'utilisation est la suivante : </li><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>.text-shadow { filter: drop-shadow(2px 2px 2px black); }</pre><div class="contentsignin">Copier après la connexion</div></div><li>Dans le code ci-dessus, nous utilisons le sélecteur de classe <code>.hue-rotate pour sélectionner les éléments qui doivent changer de couleur, et utilisons hue-rotate() Fonction pour spécifier l'angle de rotation de la teinte, en degrés.

Saturer : Cet effet peut ajuster la saturation de l'image. L'utilisation est la suivante :

.flip-image {
    filter: scaleX(-1);
}

Dans le code ci-dessus, nous utilisons le sélecteur de classe .saturate pour sélectionner les éléments dont la saturation doit être ajustée, et utilisons le saturate() code> fonction pour spécifier la valeur de saturation en pourcentage.

2. Exemples d'utilisation des effets de filtre CSS3

Voici quelques exemples réels d'utilisation des effets de filtre CSS3 pour référence des lecteurs : 🎜🎜🎜🎜Effet noir et blanc de l'image : 🎜rrreee🎜🎜🎜Arrière-plan flou de l'image Effet : 🎜rrreee🎜🎜🎜 Effet de projection de texte : 🎜rrreee🎜🎜🎜 Effet de retournement d'image : 🎜rrreee🎜🎜🎜Conclusion : 🎜🎜Grâce à l'effet de filtre CSS3, nous pouvons facilement ajouter divers effets de traitement d'image aux pages Web, améliorer les effets visuels et l’expérience utilisateur des pages Web. Cet article présente certains effets de filtre courants de CSS3 et comment les utiliser, et fournit des cas pratiques pour référence aux lecteurs. J'espère que les lecteurs pourront mieux appliquer les effets de filtre CSS3 pour embellir la conception Web grâce à l'introduction de cet article. 🎜

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!