Comment supprimer la couleur de remplissage pour changer la couleur de l'image en utilisant HTML et CSS ?

Dans le monde du développement Web, connaître les dernières technologies CSS et HTML est crucial pour ajouter des visuels époustouflants à votre site Web. L'un de ces effets est l'effet Color Drop, qui vous permet de modifier la couleur d'une image en survol en plaçant une couleur de remplissage dessus.

Avec cet effet, vous pouvez rendre votre site Web plus interactif et attrayant pour vos visiteurs. Dans cet article, nous vous guiderons tout au long du processus de création d'un effet de chute de couleur à l'aide de HTML et CSS. Alors que vous soyez débutant ou développeur web expérimenté, restez à l'écoute pour en savoir plus sur ce visuel passionnant.

Qu'est-ce que l'effet de couleur Drop Fill ?

L'effet Drop Fill Color est un effet visuel appliqué à une image ou un graphique à l'aide de HTML et CSS qui provoque l'apparition d'une goutte de couleur sur l'image lorsque la souris passe dessus, provoquant un changement de couleur de l'image.

Cet effet crée l'illusion de couleurs coulant sur l'image et s'étalant dessus, créant un effet dramatique et dynamique. Cet effet peut être utilisé pour ajouter de l’interactivité et un attrait visuel à un site Web, rendant ainsi les utilisateurs plus engagés.

Pour obtenir cet effet, nous devons utiliser certaines propriétés, voyons-les une par une -

• Filter Property - La propriété filter en CSS est utilisée pour appliquer des effets visuels au contenu d'un élément. Il vous permet d'ajuster l'apparence des images et autres éléments graphiques à l'aide de diverses fonctions de filtrage.

L'attribut

filter peut prendre une ou plusieurs fonctions de filtre appliquées séquentiellement. De nombreuses fonctions de filtrage différentes sont disponibles, chacune appliquant un type d'effet visuel différent.

• propriété clip-path - La propriété CSS clip-path est utilisée pour créer un chemin de détourage, une zone non rectangulaire qui définit la zone visible d'un élément. Cette propriété est utilisée pour masquer les parties d'un élément qui dépassent la portée du chemin de détourage, permettant ainsi des formes et des effets complexes qui n'étaient auparavant possibles qu'avec des masques d'image ou SVG.

• ::before pseudo-élément − Le pseudo-élément ::before en CSS crée un pseudo-élément qui est inséré avant le contenu de l'élément. Il est utilisé pour insérer du contenu avant un élément sans ajouter de balises HTML supplémentaires.

::before Une utilisation courante des pseudo-éléments consiste à ajouter du contenu décoratif, tel que des icônes ou des formes, avant un élément. Le pseudo-élément ::before peut également être utilisé pour ajouter du texte, des images d'arrière-plan et d'autres contenus.

Étapes à suivre

Voici les étapes suivies dans cet exemple -

• Étape 1 - Utilisez .icon-container div pour créer un conteneur d'icônes/images. Appliquez box-sizing: border-box à tous les éléments de la page et définissez les marges et le remplissage sur 0 pour tous les éléments.

• Étape 2 - Ensuite, définissez l'élément body sur display: flex ainsi que justify-content: center et align-items: center pour centrer l'élément conteneur verticalement et horizontalement sur la page. La couleur d'arrière-plan de l'élément body est définie sur gris foncé (#333).

• Étape 3 - Ensuite, nous devons ajouter des styles à l'élément conteneur avec un effet de chute de couleur. Il reçoit un positionnement relatif, une largeur et une hauteur de 200 pixels et une image d'arrière-plan centrée et couvrant l'intégralité de l'élément conteneur.

L'attribut

filter est utilisé pour définir l'image d'arrière-plan en niveaux de gris (c'est-à-dire en noir et blanc), et l'attribut cursor est défini sur pointer b> pour indiquer à l'utilisateur que l'élément est cliquable.

• Étape 4 - Ensuite, nous créons l'effet de goutte de couleur en survol. Utilisez le pseudo-élément ::before pour créer un cercle blanc qui sera découpé au survol pour révéler l'image d'arrière-plan sous-jacente.

La propriété

clip-path est définie sur circle(0% at 50% 0%) en commençant par un cercle de détourage d'un rayon de 0% (c'est-à-dire aucune zone visible), en haut au centre de l'élément conteneur. .

Lorsque la souris est sur l'élément, la propriété clip-path passe à circle(100% at 50% 0%), ce qui crée un cercle qui couvre tout l'élément conteneur. La durée de cette animation de transition est de 0,4 seconde, en utilisant la fonction de temps de sortie.

Exemple

Voyons un exemple -

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8" />
   <title> Color Drop Effect </title>
   <style>
      /* Resetting default styles */
      * {
         margin: 0;
         padding: 0;
         box-sizing: border-box;
      }
      /* Centering the container */
      body {
         display: flex;
         justify-content: center;
         align-items: center;
         height: 100vh;
         background-color: #333;
      }
      /* Creating the color drop effect */
      .icon-container {
         position: relative;
         width: 200px;
         height: 200px;
         background-image: url('https://via.placeholder.com/200');
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
         filter: grayscale(100%);
         cursor: pointer;
      }

      .icon-container::before {
         content: '';
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(255, 255, 255, 0.7);
         clip-path: circle(0% at 50% 0%);
         transition: clip-path 0.4s ease-out;
      }

      .icon-container:hover::before {
         clip-path: circle(100% at 50% 0%);
      }
   </style>
</head>
<body>
   <div class="icon-container"></div>
</body>
</html>

Conclusion

En conclusion, l'utilisation de l'effet de chute de couleur en HTML et CSS peut être un moyen amusant et créatif d'améliorer l'attrait visuel d'un site Web ou d'une application Web. Avec la possibilité de changer la couleur de l'image au survol, vous pouvez ajouter des éléments dynamiques pour attirer l'attention des utilisateurs et faire ressortir votre contenu.

Dans cet article, nous explorons les bases de l'utilisation de l'effet de goutte de couleur pour changer la couleur de votre image. Nous avons abordé l'utilisation de l'attribut filter pour manipuler les niveaux de gris d'une image, l'utilisation du pseudo-élément :before pour créer un effet de superposition et l'utilisation de l'attribut clip-path pour créer un masque circulaire qui affiche la couleur au survol.

En implémentant cet effet, vous pouvez créer une expérience utilisateur plus attrayante et ajouter une certaine personnalisation à votre site Web. Avec un peu d'expérimentation et de créativité, vous pouvez même faire passer cette technique au niveau supérieur et créer des effets de couleur plus complexes qui se démarquent vraiment.

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!