Salut,

Les dégradés en CSS est une propriété que j’avais survolé il y a quelques mois, et que j’avais besoin de mieux maîtriser. De mon point de vue de débutant, cette technique permet d’égayer une page sans ajouter d’image, sans ralentir de chargement par la même occasion. Ce n’est qu’un avis, je n’ai pas encore eu l’occasion de monter de grosse page, avec un objectif d’optimisation du chargement de la page. Nous verrons que le dégradés offres d’autres possibilités assez pratiques je trouve…

 

Les dégradés linéaires

Comme leur nom l’indique, ces dégradés vont être réalisés le long d’une ligne, une direction:

  • gauche > droite (left > right),
  • bas > haut ( bottom > top),
  • etc.

Pour réaliser ces dégradés  » en ligne », on utilise la propriété background, et on lui appliquera la valeur linear-gradient, à l’intérieure de laquelle on va pouvoir indiquer plusieurs choses:

  • la direction:  depuis la droite, la gauche, etc,
  • la couleur de départ (en code héxadecimal, en rgb, en utilisant les noms de couleurs, etc),
  • la couleur d’arrivée (en code héxadecimal, en rgb, en utilisant les noms de couleurs, etc),
  • des couleurs intermédiaires,
  • un angle si l’on veut changer la direction du dégradé.

Il est à noter qu’on ne peut pas faire de dégradé suivant un ligne courbe en CSS (ou alors c’est que je n’ai pas trouvé l’information). cela doit être possible mais en utilisant d’autres techniques avec  Javascript ou Canvas. J’ai vu quelques infos à ce sujet , mais n’étant pas spécialiste, je vais en rester là pour le moment. (ici  un lien montrant que c’est possible, mais je ne peux pas expliquer le code à ce jour, ni le vérifier…).

Remarque:

Les dégradés utilisent des couleurs pour être réalisés, là je ne t’apprends surement rien. Tu peux donc utiliser toutes les techniques que tu veux pour désigner ces couleurs (héxadécimal, rgb, rgba, noms des couleurs, ….). Voir si besoin mon article sur la propriété color.

Voilà donc à quoi la nouvelle propriété CSS ressemble:

.class{
	height: 200px;
	width: 200px;
	background: linear-gradient(red,blue); 
}

Pour revenir à ce que je disais dans un article précédent, il y a une valeur par défaut. En effet, si tu ne précises pas la direction de ton dégradé, celui-ci se fera automatiquement de haut en bas. La première valeur que tu déclares, sera positionné en haut.

Comme d’habitude je te laisse un lien vers Codepen ou tu pourras trouver plusieurs exemples, modifiables à souhait.

Les angles

Dernier point sur la valeur linear-gradient. Je t’ai dit qu’on pouvait appliquer un angle pour changer la direction du dégradé.  En revanche, il faut savoir que les navigateurs n’ont pas tous la même référence de mesure pour les angles. Certains utilisent le cercle trigonométrique (si tu as des palpitations à la lecture de ce mot j’en suis désolé…), d’autres utilisent la norme du W3C (organisme qui régule les règles des langages internet pour la faire très courte.).

norme angle css

(Cette image provient du site  Mammouthland).

Il faudra faire attention au rendu que tu souhaites. Pour certains navigateurs tu devras noter un angle de 60 degrés, et pour les autres 30 degrès pour obtenir le même résultat.

Les dégradés radiaux

On parle  de dégradé  radiaux, mais la valeur s’appelle radial-gradient. Comme précédemment cette valeur sera attribuée à une propriété background. Ce dégradé prend la forme du bloc qui le contient:

  • si ce bloc est carré, alors le dégradé aura la forme d’un cercle,
  • si le bloc est rectangulaire, alors le dégradé aura la forme d’une éllipse.

Comme pour le linear-gradient, il est possible de préciser les couleurs d’arrivées, de départs et intermédiaires si besoin.

Voici à quoi ressemble cette propriété:

.class{
	width:200px;
	height:200px;
  background: radial-gradient(red, yellow);
}

Je te remets le lien codepen, qui t’amènera à mon fichier de test. Dans les exemples j’indique une dimension (height et width) puisque je crée une div exprès. Dans un projet réel, tu n’auras probablement pas besoin de donner la dimension de ton bloc. Tes dégradés rempliront automatiquement le conteneur que tu cibleras.

Les arrêt de couleurs

Par défaut, les couleurs que tu indiqueras se répartiront également sur tout le bloc, qu’il y en ai 2 ou 10. Nous avons la possibilité d’être plus précis et de choisir quel pourcentage de telle ou telle couleur nous voulons. Plus précisément, ce pourcentage défini la position de la couleur  que tu auras saisi sur la ligne de dégradé.

Pour cela il suffit d’ajouter une indication complémentaire dans les valeurs que nous avons vues plus haut: linear-gradient() et radial-gradient().

Tu peux écrire la chose suivante:

.arret-de-couleur1{
background: linear-gradient(red 20%, green 70%, blue);
}

 

Dans le projet Codepen consacré à cet article , tu pourras voir la différence. J’ai créé 2 div:

  • la première présente une répartition égale entre chaque couleur, à savoir
  • la seconde présente la répartition suivante:
    • – la ligne rouge s’étendra jusqu’à 20% de la taille de la div, puis nous aurons un dégradé jusqu’à la couleur suivante,
    • – la ligne verte présente à 70% de la div puis laissera sa place à la dernière couleur, le bleu.

Le décalage au départ

Il est possible de ne faire démarrer un dégradé qu’à partir d’un certain point. Cette technique est à mon sens une variante de celle que je viens de te montrer. C’est assez simple dans la mesure ou il suffit de noter une première fois la couleur, puis de la noter une seconde fois suivi de celle vers laquelle on veut dégrader. Voici ce qu’on peut écrire:

.sans-decalage{
	background: linear-gradient(yellow, green);
	width: 400px;
	height: 400px;
}

.avec-decalage{
	background: linear-gradient(yellow, yellow, green);
	width: 400px;
	height: 400px;
}

Tu peux retrouver le résultat sur Codepen. La première version (.sans-decalage) réparti les 2 couleurs de manière égale sur toute la div. Dans la seconde (.avec-decalage), la part de jaune non soumise au dégradé est plus importante. Il est possible d’obtenir un rendu similaire en notant par exemple un pourcentage plus important pour le jaune que pour le vert, en utilisant la technique vu précédemment.

Cette technique de décalage au départ est adaptable avec les dégradés radiaux, voir dans le projet Codepen.

La transparence

Ici, rien à voir bien sûr avec de la politique, même si c’est d’actualité… Je continue de mélanger tout ce que j’apprends et il est possible d’utiliser les couleurs rgba (voir mon article sur la propriété color).

Pour bien voir l’effet, je vais créer une première div avec un fond noir, un paragraphe auquel, j’appliquerai le dégradé. A voir , comme d’habitude, dans Codepen.

Voici le code que l’on peut utiliser pour intégrer de la transparence dans un dégradé:

.sans-transparence{
	background:linear-gradient(27deg, rgb(256,0,0), green);
}

.avec-transparence{
	background:linear-gradient(27deg, rgba(256,0,0,0.4), green);
}

 

La répétition

Par défaut un dégradé va toujours avoir tendance à s’étirer dans toute la div qui le contient. Si l’on souhaite avoir un dégradé de 2 couleurs, il faut préciser un arrêt de couleur pour une des 2 couleurs. Pour un dégradé de 3 couleurs, précise un arrêt pour 2 d’entre elle, et ainsi de suite.

Pour réaliser cette répétition, il faut utiliser la propriété background et lui attribuer la valeur repeating-linear-gradient:

.repet{
	width:100%;
	height:200px;
	background: repeating-linear-gradient(90deg ,blue 50%, red);
	/*Dans l'exemple je fais un dégradé suivant une ligne horzontale, d'où les 90 degrés.*/ 
}

Personellement, je ne trouve pas cette propriété formidable, d’un point de vue du rendu, mais bon, au moins j’aurais vu ce que c’était. Elle a le mérite d’exister….

La compatibilité

Cette partie est un peu ce qui rends tout cela compliqué. En effet, comme j’en avais parlé plus haut, tous les navigateurs n’interprettent pas tous les dégradés de la même manière. Bien qu’à ce jour la plupart comprennent cette propriété, il faudra toujours prendre l’habitude d’écrire plusieurs fois la même ligne de code.

« Ok, mais ça multiplie le risque d’erreur non? Et ça encombre le code pour rien?? »

C’est pas faux (Perceval…), et il faudra pour cela inscrire un préfixe différent au début de chacune des lignes. J’ai découvert en faisant cet article que l’éditeur ATOM, le faisait automatiquement. Il faut que je vérifie, mais je suis presque sur que SublimText doit avoir un plugin pour faire la même chose… Bref c’est pas le sujet, voici à quoi ressemblerait une écriture pour tout les navigateurs:

.class{
background: -webkit-linear-gradient(top left, #500 50%, #000 50%);/*préfixe pour Chrome, Safari, Android*/
background: -o-linear-gradient(top left, #500 50%, #000 50%);/*préfixe pour Opara*/
background: -moz-linear-gradient(top left, #500 50%, #000 50%);/*préfixe pour Mozilla*/
background: -ms-linear-gradient(top left, #500 50%, #000 50%);/*préfixe pour Internet Explorer*/
background: linear-gradient(to bottom right, #500 50%, #000 50%);/* Selon le MDN, la syntaxe standard doit être la dernière*/
}

Voilà, tu vois c’est assez léger… Attention donc aux modifications, penses à modifier toutes les lignes… J’ai lu qu’il était aussi possible d’écrire une propriété par défaut au cas où aucun des dégradés ne fonctionnait, en utilisant la propriété background-image. N’ayant pas trouvé la date de publication de cette information, je pense qu’on peut s’en passer aujourd’hui. regarde sur le site CanIUse, tu verras que cette propriété est compatible avec la majorité des navigateurs modernes.

– Bonus –

Donc dans cet article je mets un petit bonus, ou un mini projet, comme tu veux. J’ai essayé d’appliquer un filtre sur une photo avec un dégradé, par exemple Sépia (teinte un peu marron). Le code sera visible dans un autre projet Codepen, celui de l’article étant déjà très chargé… Le rendu ne sera pas du Photoshop, c’est du gratos.. donc pas de miracle non plus, mais je trouve l’effet intéressant.

Comment faire?

J’ai mis la photo de base en premier pour que tu puisses bien voir la différence.

Ensuite, j’ai créé une div générale qui contient la photo et une deuxième qui contiendra le filtre. Il faut veiller à ce que la photo et le filtre fasse la même taille afin d’éviter que ça soit bizarre…

Coté CSS, ce n’est pas très compliqué, il faut que la div générale (class= »container ») ai une position relative afin que l’on puisse positionner facilement le filtre par rapport à cette div, et non par rapport au body. Ensuite, avec les propriétés de position ( top, bottom, left, right), positionnes le filtre sur la photo.

Pour finir tu peux t’amuser avec les couleurs de filtres, linear-gradient et radial-gradient. Il est possible de faire la même chose avec un background-image (rgba), qui ne comportera donc pas de dégradé.

Et c’est fini!

Si tu as des questions, n’hésites pas à les poser en commentaire, j’essaierais d’y répondre.

J’espère que cet article t’as plus, personnellement j’ai découvert des choses en le rédigeant. D’ailleurs cette technique des dégradés m’a donné plusieurs d’idées de mini projets, tu peux d’ailleurs voir le premier à ce lien. J’ai essayé de refaire le casque de Darth Vader (Star Wars) et les dégradés m’ont permis de réaliser les diagonales. Je me suis aussi beaucoup servi de Bootstrap pour ce projet. Je parlerais de ce framework dans une série de prochain article.

 

A bientôt,

Guillaume