Comment changer dynamiquement la couleur pendant le défilement avec CSS

Avec des éléments de site Web fixes tels que des logos, vous rencontrerez souvent une confusion de couleurs lors du défilement de la page. Cela peut se produire si l'élément statique passe sur une section du site Web qui partage la même couleur avec l'élément. L'élément statique sera invisible tant qu'il reposera sur cet arrière-plan.

Pour résoudre ce problème, vous devez inverser dynamiquement la couleur du logo lorsqu'il passe sur un élément de la même couleur. Apprenez à obtenir cet effet en utilisant uniquement CSS, sans JavaScript requis !

Télécharger le code de démarrage

Pour suivre ce tutoriel, téléchargez le code de démarrage depuis son Référentiel GitHub à votre ordinateur local.

Ouvrir index.html dans un navigateur qui devrait ressembler à la page montrée ici :

La page HTML contient un logo et quatre sections. Chaque section a un titre factice et trois paragraphes de texte factice. Le texte du logo est de la même couleur noire que l'arrière-plan des deuxième et quatrième sections. Cet effet vient de la

nième enfant (pair) bloquer dans styles.css, qui applique le fond noir aux sections paires.

Rendre le logo collant

Avec ce code de démarrage, le logo ne colle pas au dessus. Cela signifie que le logo disparaît lorsque vous faites défiler la page. Vous pouvez transformer votre logo en en-tête collant en appliquant le position: collante propriété à l'intérieur du fichier CSS. Pour une plongée approfondie dans le positionnement en CSS, lisez notre article sur le Propriété de position CSS.

Assurez-vous que le logo adhère au haut, mais ne le faites que sur des écrans plus grands (car, sur des écrans plus petits, il pourrait recouvrir d'autres éléments). Ce qui suit Requête multimédia réactive HTML crée cet effet :

@médias(largeur > 980px) {
.logo { 
position: collant; 
haut: .5rem; 
 }
}

Désormais, le logo restera en haut à tout moment et vous suivra pendant que vous faites défiler. Mais vous remarquerez également que le texte disparaît lorsque vous faites défiler les sections d'arrière-plan sombre (car le texte du logo est également noir). Maintenant, regardez comment résoudre ce problème.

Ajout du mode mix-blend à votre en-tête collant

Pour vous assurer que le logo noir ne disparaisse pas sur des fonds noirs, vous allez devoir inverser la couleur dynamiquement. La façon dont vous feriez cela est d'utiliser le mode mix-blend propriété CSS et en lui attribuant une valeur de différence:

@médias(largeur > 980px) { 
.logo { 
position: collant; 
haut: .5rem; 
mode mix-blend: différence
 }
}

La propriété CSS mix-blend-mode spécifie comment le contenu d'un élément doit se fondre avec le contenu du parent de l'élément et son arrière-plan. La valeur différente prend la valeur de différence de chaque pixel, en inversant les couleurs claires. Donc, si les valeurs de couleur sont les mêmes, elles deviennent noires. Les différences de valeurs s'inverseront.

L'ajout de CSS ci-dessus fera disparaître complètement le logo. En effet, vous n'avez pas défini la couleur du texte du logo sur blanc en dehors de la requête média. Faites cela avec le code suivant :

.logo { 
couleur: blanc; 
/* Autres propriétés CSS */
}

Vous avez maintenant tout configuré avec succès. Faites défiler la page et dans le fond noir. Vous verriez le logo passer du noir au blanc.

Vous pouvez également travailler avec d'autres couleurs que le noir et blanc. Par exemple, si vous deviez changer la couleur du texte de votre logo en bleu sarcelle (#008080), vous obtiendrez la couleur rose sur fond blanc. L'image suivante illustre cela.

Dans la plupart des cas, vous voudriez que votre élément soit blanc pour obtenir les meilleurs résultats. De plus, si vous faites défiler vers le haut, vous pourriez trouver votre logo coupé en deux. Cela se produit parce que le logo existe en dehors du élément. Pour afficher le logo dans son intégralité, vous devez définir la couleur d'arrière-plan du élément au blanc.

Utiliser une image comme logo au lieu de texte

Cette technique ne fonctionne pas seulement avec du texte, mais aussi avec des images. Bien sûr, vous devez vous assurer d'utiliser une image blanche comme logo. L'exemple suivant utilise un logo lorem ipsum blanc qui se trouve dans le même dossier que le index.html déposer:

<imagesrc="loremipsum-297.svg"autre="Logo Lorem Ipsum">

L'image utilisée ici est un SVG (Scalable Vector Graphic), un type de fichier vectoriel.

Maintenant, la couleur de l'image de votre logo sera noire sur fond blanc, comme indiqué dans l'image ci-dessous.

Mais si vous faites défiler vers un fond noir, la couleur du logo deviendra automatiquement blanche. Vous pouvez le voir dans l'image ci-dessous.

Vous pouvez également augmenter la taille du logo en remplaçant taille de police avec hauteur et largeur dans le bloc CSS ciblant le logo. Après tout, vous avez maintenant affaire à une image plutôt qu'à du texte.

.logo {
couleur: blanc;
largeur: 10Rem;
/* Autres propriétés CSS */
}

Si vous réduisez l'écran, la requête média ne s'appliquera plus. Cela désactivera les différents modes de fusion, faisant disparaître votre logo. Pour ramener le logo sur la page, vous devez définir le mode mix-blend propriété sur le logo en dehors de la requête média :

.logo {
couleur: blanc;
largeur: 10Rem;
mode mix-blend: différence;
/* Autres propriétés CSS */
}

Cela activera le mélange de mélange sur le logo à tout moment, même sur des écrans plus grands. Mais sur les petits écrans, le logo restera en haut et ne vous suivra pas lorsque vous faites défiler vers le bas (car position: collante ne fonctionne que sur les grands écrans). Enfin, pensez toujours à utiliser un logo blanc pour éviter qu'il ne disparaisse de la page.

En savoir plus Trucs et astuces CSS

En utilisant le mode mix-blend, vous pouvez créer des mises en page fascinantes avec des couleurs alternées. Mieux encore, vous n'avez pas besoin de coder en dur une couleur ou de définir des points d'arrêt car le mode mix-blend inversera la couleur de manière dynamique. Il vous permet de créer de jolis mélanges et couleurs pour des parties du contenu d'un élément en fonction de son arrière-plan direct.

CSS est souvent considéré comme l'un des langages les plus passionnants à apprendre. C'est en partie parce que CSS regorge de trucs et astuces comme celui que vous venez d'apprendre dans cet article. D'autres trucs et astuces CSS pratiques sont les effets de survol, le redimensionnement des images pour les adapter aux conteneurs, la troncation du texte avec des ellipses et l'utilisation de la transformation de texte.