Assombrir la couleur d'arrière-plan des éléments avec CSS

L'amélioration de l'interface utilisateur implique de mettre en évidence des éléments interactifs, tels que des boutons, en modifiant leur apparence. Une approche courante consiste à assombrir la couleur d'arrière-plan lors du survol.

Au départ, on peut tenter d'ajuster l'opacité, mais cela affecte à la fois la couleur et la transparence. Une solution plus ciblée existe.

Méthode : superposer un calque sombre

Créez une superposition sombre à l'aide d'une image d'arrière-plan. Cette méthode préserve la couleur d'origine du texte tout en assombrissant l'arrière-plan.

Implémentez le calque de superposition en CSS :

.Button {
  background-image: linear-gradient(rgb(0 0 0/40%) 0 0);
}

.Button:hover {
  background-color: /* Original background color */;
}

Cette technique assombrit automatiquement n'importe quelle couleur d'arrière-plan, même plusieurs couleurs, comme le montre l'exemple :

 some text 
En tirant parti de cette méthode de superposition, les développeurs peuvent facilement assombrir les couleurs d'arrière-plan des éléments au survol, améliorant ainsi l'interactivité de l'utilisateur sans avoir à calculer manuellement les nuances plus sombres.