Le titre n’est pas très clair, je sais.
Vous vous souvenez qu’il faut utiliser des tailles de polices relatives (em, %, en…) plutôt qu’absolues (px, pt, pc…) ? Ceci permet de conserver les échelles de taille de police quand on zoom (deux polices de taille différentes conserveront leur différence de taille quelque soit le zoom).

Ici il s’agit de faire pareil pour les couleurs. Cette astuce va permettre de modifier la couleur principale d’un thème beaucoup plus rapidement.

Imaginons que l’on ait un menu au fond blanc et au texte gris foncé, avec un effet de survol. Au survol, un élément devient gris. Le problème, c’est que le gris rend le texte (déjà grisé) moins lisible :

the font is barely readable on hover
#menu {
	background: white;
}
#menu li {
	color: #888;
}

#menu li:hover {
	background-color: #aaa;
}

Vous me direz qu’on n’a qu’à ajouter une couleur de texte au survol, aussi, ça résoudrait le problème :

#menu li:hover {
	background-color: #aaa;
	color: #333;
}

Oui, ça marche bien.
Mais que se passe t-il si je veux changer la couleur du menu, par exemple passer d’un thème blanc et clair à quelque chose de plus coloré comme du bleu :

changing the background alone is not enough
Ici, je n’ai modifié que la couleur de fond du menu, mais le hover reste gris et ça fait moche. Pour bien faire, il faudrait modifier 4 couleurs : la couleur de fond du menu, la couleur de fond lors du survol, la couleur de la police et la couleur de la police lors du survol.
On a donc 4 choses à modifier simplement pour changer la couleur principale du thème : ce n’est pas pratique.

Il y a pourtant un moyen de gagner du temps : on peut faire en sorte de modifier seulement la couleur de fond pour répercuter le changement de couleur et de contraste sur toute la chaîne des couleurs.
L’idée c’est d’utiliser des polices et des couleurs non pas grises, mais noires semi-transparentes. Comme ça, si le fond change et devient plus foncé, alors une partie de ce changement sera également répercuté sur la couleur de la police, qui deviendra également plus foncée :

hover enhanced lisibility
#menu {
	background: white;
}
#menu li {
	color: rgba(0, 0, 0, .4);
}

#menu li:hover {
	background-color: rgba(0, 0, 0, .3);
}

Et maintenant, il ne suffit de changer que la couleur de fond du menu, et l’ensemble restera toujours lisible et la couleur du hover sera toujours la même que celle du fond, mais en plus foncée. L’ensemble reste donc cohérent :

hover with good colors
On a donc des couleurs qui ne font que changer de luminosité, en conservant la teinte ainsi que la différence de luminosité. Les couleurs de la police et du hover sont donc relatives à la couleur principale.
Tout ceci fonctionne très bien avec les couleurs pas trop saturées (typiques du material design ou du flat design) et claires.

Si vous préférez un thème sombre, et un effet de survol qui éclaircit au lieu d’assombrir, vous pouvez utiliser des non pas du noir semi-transparent, mais du blanc semi-opaque.

Le même principe peut être appliqué aux ombres portées, dégradés, bordures…

13 commentaires

gravatar
akleinbauer a dit :

J'ai déjà utilisé cette astuce, et tu as le mérite de bien l'expliqué mais malheureusement, celle-ci ne s'applique que lorsqu'on a un thème d'une seule couleur.

Sinon, merci pour l'explication ;)

gravatar
Le Hollandais Volant a dit :

@akleinbauer : Oui, mais c’est de plus en plus le cas, avec le flat et ces modes de design épurés.

Une chose que je n’ai pas dit non plus, c’est l’usage du mot clé « currentColor ».

Si on fait ça :

p {
color: blue;
border: 1px solid currentColor;
}


Alors la bordure du <p> aura la même couleur que le texte. Pour changer de couleur, une seule valeur à changer et la bordure change aussi. Ça permet de gagner un peu de temps.

gravatar
Duncan Idaho a dit :

C'est tout con, facile a mettre en place, et facile a retenir... Merci ! ;)

gravatar
Guenhwyvar a dit :

Les exemples sont parlants, mais restent assez moches. Au final ça m'a l'air de servir que dans quelques cas très précis et très rares.

gravatar
Clem a dit :

Autres astuces,

on peut utiliser les variables et les fonctions de modifications de couleurs de SASS/LESS/Stylus.

$main-color = #ffcc00;
ul.menu{
background-color: $main-color;
>li:hover{
darken(color,30%)
}
}


on peut aussi utiliser le mix-blend-mode et les filter css3 pour des effet sur les couleurs plus pousser que alpha.

gravatar
JackNUMBER a dit :

@Le Hollandais Volant : SASS/LESS/Stylus sont des préprocesseurs CSS. Ils nécessitent une compilation pour obtenir des fichiers .css à utiliser sur un site web.
Même si ça demande un peu de manip au début, c'est aujourd'hui incontournable peut importe la taille du projet/site.

Il y a es if(), des for(), des tableaux, des fonctions... C'est très pratique :)

gravatar
Le Hollandais Volant a dit :

@JackNUMBER : yep, je sais (même si je n’utilise pas pour mes projets), mais vu comme est tourné le commentaire de @Clem je pensais qu’il était désormais possible d’utiliser ça directement dans les navigateurs (et ça m’aurait surpris).

gravatar
jerry wham a dit :

Pour les currentColor, il n'est pas nécessaire de le préciser. Si on ne met que "border: 1px solid;" le navigateur utilisera la couleur du parent.

gravatar
rahan a dit :
et la variable inherit ? suffit de régler l'opacité ensuite ...
gravatar
JeromeJ a dit :
C'est pas con.

Mais ça risque pas d'être un peu plus lourd vu qu'on lui donne pas une couleur et qu'il doit calculer la transparence à chaque fiis ?
gravatar
Le Hollandais Volant a dit :
@rahan : Inhérit permet par exemple de copier la couleur de fond d’un parent sur la couleur de fond d’un enfant.
CurrentColor, permet de copier la couleur de texte sur une couleur de fond. Les buts ne sont pas les mêmes, mais les deux peuvent être utilisés conjointement, oui.

@JeromeJ : Ça revient au même je pense.
Le navigateur ne calcule pas la couleur lors de chaque "hover" : au chargement du CSS, il donne à chaque élément une couleur calculée et cette couleur est fixée.

Le navigateur, lui, ne voit pas des éléments HTML à la suite les uns des autres, mais il les place tous en coordonnées absolu sur la page. C’est ça, le rendu de la page.
Il fait la même chose pour les couleurs : mon titre "couleur relatives" n’est vrai que pour nous quand on édite le CSS. Mais le navigateur, il calcule tout en avance au moment de charger la page.

Je ne suis pas sûr qu’une couleur seule soit plus rapide à faire qu’une couleur + une transparence : une couleur sans transparence n’est toujours qu’un GRBA avec le A à 0.

Les commentaires sont fermés pour cet article