Vous connaissez en tant que développeur CSS les dégradés linéaires et radiaux, qui permettent de se passer d'images, signifiant gain de performance tant au niveau de la rapidité d'exécution que dans le poids d'une page web.
Cependant, il n'existait jusqu'à présent que ces deux types de dégradés, ce qui limitait un peu la créativité. C'est ainsi que sont apparus les dégradés coniques dans le quatrième niveau du module CSS Image Values and Replaced Content . On parle de dégradé conique car, vu du dessus, la répartition des couleurs fait tout simplement apparaître un cône.
Vous pouvez d'ores et déjà utiliser cette nouvelle fonctionnalité puisqu'il existe un polyfill réalisé par Lea Verou , en attendant le support complet des navigateurs.
La fonction CSS conic-gradient()
Similaire à un dégradé radial, le dégradé conique est circulaire et utilise le centre de l'élément comme point source des arrêts de couleur. La différence majeure réside dans le fait que ces arrêts de couleurs se propagent à partir du centre pour le dégradé radial tandis qu'ils se placent autour du cercle concernant le dégradé conique.
Autrement dit, avec les dégradés coniques, les arrêts de couleur commencent depuis la direction pointant vers le haut puis effectuent une rotation dans le sens des aiguilles d'une montre. Pour ce qui est du dégradé radial, les transitions progressent depuis le centre vers l'extérieur du cercle.
Tout comme les autres dégradés, les dégradés coniques ne possèdent pas de dimension prédéfinie. En effet, la taille réelle du dégradé va dépendre de la taille de l'élément ou de l'image.
Pour réaliser un dégradé conique, nous allons utiliser la fonction conic-gradient(). Voici un exemple simple, suivi du code correspondant :
background: conic-gradient(red, gold);
Les mots-clés from et at :
Par défaut, si aucun angle n'est déclaré pour les couleurs, le dégradé est alors divisé de manière égale entre les couleurs, qui commence à 0 degré pour se terminer à 360 degrés. Néanmoins, il est possible de changer l'angle d'un dégradé conique.
C'est ainsi que l'on va utiliser le mot-clé from. Dans l'exemple ci-dessous, nous allons changer l'angle de rotation de 45 degrés :
Utilisons maintenant les deux mots-clé ensemble, ce qui va nous permettre de changer et la position de l'angle et l'angle de rotation :
background: conic-gradient(from 45deg at 25% 50%, red,gold);
Le polyfill ne permet pas d'utiliser les deux mots-clés. Mais cela fonctionne sur les navigateurs supportant les dégradés coniques (sans polyfill donc).
Points d'arrêts de couleur :
Nous avons pu voir des exemples simples avec deux couleurs (nécessaires pour réaliser n'importe quel type de dégradé), mais vous pouvez déclarer de nombreux arrêts de couleurs.
Contrairement aux dégradés radiaux et linéaires où les points d'arrêt de couleur sont exprimés avec une longueur, les points d'arrêt de couleur d'un dégradé conique sont placés à partir d'un angle.
Il existe plusieurs unités pour les angles :
-deg : pour les degrés
-rad : pour les radians
-grad : pour les grades
-turn : pour les tours
Les points d'arrêts de couleur vont nous permettre de créer des transtions douces ou brutales.
Ci-dessous une utilisation sans transition qui ressemble à un camembert :
background: conic-gradient(#0af 30%, gold 0 70%, red 0);
Pour une transition en douceur, il suffira de reprendre la même couleur au début et à la fin du dégradé conique :
Juste pour information, il est possible de reproduire un genre de dégradé conique en utilisant le pseudo-élément ::before ainsi que la propriété border :
Il est également possible comme avec les dégradés linéaires et radiaux de répéter un dégradé conique avec la fonction repeating-conic-gradient(). Un exemple ci-dessous :
Vous avez remarqué une faute, un oubli, un lien mort ? Vous ne comprenez pas un point précis de l'article ? Vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux.
