Bonjour,
Je suis en pleine réflexion sur des histoires de chronologies. Dans l’idée, je souhaiterais pouvoir mettre des éléments les uns à la suite des autres, avec des couleurs de fond différentes, et avoir une forme de transition en dégradé quand il y a un changement de couleur.
Il ne m’a pas été trop difficile de faire ce qui suit.
Une idée de rendu souhaité
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>Tests dégradés sur éléments qui s'ensuivent</title>
<style>
:root {
--current: darkgrey;
--previous: darkgrey;
}
li:first-of-type {
width: 45px;
--previous: var(--current);
}
li:last-of-type{
width: 75px;
background: linear-gradient(to right, var(--previous), var(--current) 25%);
}
li {
display: inline-block;
width: 60px;
height: 60px;
background: linear-gradient(to right, var(--previous), var(--current) 33%);
}
</style>
</head>
<body>
<ul>
<li style="--current: #00cc00;"></li><li style="--previous: #00cc00; --current: #a9a9a9;"></li><li style="--previous: #a9a9a9;; --current: #00cc00;"></li><li style="--previous: #00cc00; --current: #00cc00;"></li><li style="--previous: #00cc00; --current: #a9a9a9;"></li><li style="--previous: #a9a9a9;; --current: #ffa500;"></li>
</ul>
</body>
Néanmoins, cela ne me paraît pas très propre. Je me suis demandé s’il n’y avait pas moyen de jouer avec les variables directement dans le CSS afin de simplement appliquer une classe pour une couleur (dans le genre de celles des frameworks CSS) et avoir ainsi les "transitions" qui s’appliqueraient plus facilement.
Du coup, j’ai essayé ainsi, en remplaçant les styles explicites dans le HTML par les classes.
.green {
--current: #00cc00;
}
.orange {
--current: orange;
}
li+li {
--temp: var(--previous);
background: linear-gradient(to right, var(--temp), var(--current) 33%);
--previous: var(--current);
}
La partie li + li me semblait pratique, mais je n’avais pas mis les "échanges de valeurs" (lignes 11 et 13), du coup, avec deux cases colorées de suite, je me retrouvais avec un dégradé "abrupt" entre deux. Alors j’ai tenté d’ajouter de quoi changer cela. Seulement j’ai bien l’impression que, quel que soit l’ordre des lignes 12 et 13, les variables ont de toute manière la même valeur et du coup, je perds le dégradé.
Est-ce qu’il existe une astuce pour pallier cela, et quelle est-elle ?
Merci d’avance 
