On m’a demandé où était l’image pour faire la petite ligne de dégradé en bas de la page de mon site :

la ligne de dégradé en CSS en bas de la page de mon site

Il n’y a ni images, ni script, juste une ligne de CSS.

En fait, je mélange ici deux choses désormais largement supportés par les navigateurs :

  • les images multiples
  • les dégradés linear-gradient()

Le principe est le suivant : un dégradé, au niveau du navigateur se comporte comme une image de fond. On peut donc en mettre plusieurs et les décaler les un des autres :

background: linear-gradient(to right, transparent, red), linear-gradient(to right, blue, transparent);

Se comportera (presque) comme :

background: linear-gradient(to right, blue, red);


Après, les images sont décalées avec background-position.
C’est de là que vient mon astuce : il suffit de mettre un premier dégradé (la ligne noire), un deuxième (la ligne blanche) décalée de 1px vers le bas, et un troisième faux dégradé monochrome décalé de deux pixels vers le bas. Le faux dégradé n’a qu’une seule couleur, celle du fond du reste de la page.

Pour résumer, ça fait ça (où le rouge-bordeaux est en fait la couleur de fond du reste de la page, ne laissant alors apparaître que les deux lignes bleue et noire) :
images déclalé en CSS
Il suffit alors de remplacer les couleurs pleines par des dégradés avec 3 couleurs (le transparent sur le côté, une couleur pleine au centre).

Note importante quand même : dans la liste des 3 dégradés de fonds, c’est le premier qui est placé au dessus, les autres sont placés en dessous. Sur mon exemple ci-dessus, il faudra donc déclarer le rouge-bordeaux d’abord, le bleu ensuite et le noir en dernier.

Concernant la ligne de dégradé sur mon site, le code est là :

background: linear-gradient(to right, #212121, #212121) 0 2px no-repeat, linear-gradient(to right, #212121, #646464, #212121 ) 0 1px no-repeat, linear-gradient(to right, #212121, #010101, #212121 ) 0 0px no-repeat;

Remarquez que le premier dégradé est celui qui est unicolore et au-dessus, le second est le blanc et en dernier est la petite ligne noire du haut.

Commentaires fermés

Les commentaires sont fermés pour cet article