Catégories
Astuces et Design

Un guide complet des dégradés CSS

Comme comment vous pouvez utiliser le background-color propriété en CSS pour déclarer un arrière-plan de couleur unie, vous pouvez utiliser la background-image propriété non seulement de déclarer les fichiers image comme arrière-plans, mais également des dégradés. L'utilisation de dégradés CSS est meilleure pour le contrôle et les performances que l'utilisation d'un fichier image réel (d'un dégradé).

Les dégradés sont généralement une couleur qui se fond dans une autre, mais CSS vous permet de contrôler tous les aspects de la façon dont cela se produit, de la direction et de la forme aux couleurs et à la façon dont elles passent de l'une à l'autre. En fait, il existe trois types de dégradés: linéaire, radial, et conique. Voici la syntaxe de base pour chacun d'eux:

/* Basic linear gradient examples */
background-image: linear-gradient(#ff8a00, #e52e71);
background-image: linear-gradient(to right, violet, darkred, purple);
background-image: linear-gradient(40deg, rgb(255 0 0) 60%, orange);

/* Basic radial gradient examples */
background-image: radial-gradient(#ff8a00, #e52e71);
background-image: radial-gradient(circle at top right, #ff8a00, red, #e52e71);

/* Basic conic gradient examples */
background-image: conic-gradient(#ff8a00, #e52e71);
background-image: conic-gradient(red 50deg, yellow 100deg, lime 200deg, aqua, blue, magenta, red);

Dégradés linéaires

Le type de dégradé le plus courant que nous voyons dans la conception Web est peut-être le linear-gradient(). Cela s'appelle "linéaire" car les couleurs vont de gauche à droite, de haut en bas ou à n'importe quel angle que vous avez choisi dans une seule direction.

Syntaxe

La syntaxe est déclarée soit sur le background (sténographie) ou background-image propriété en CSS. Cela se lit comme suit en anglais simple:

Créer un image de fond c'est un gradient linéaire qui bouge (dans cette direction ou sous cet angle) et commence par (une couleur) et se termine par (une autre couleur).

La syntaxe officielle ressemble plus à ceci:

linear-gradient(
  (  | to  )? ,
  
)
 = (left | right) || (top | bottom)

Usage

Commençons par l'exemple le plus élémentaire, un dégradé à deux couleurs qui va de haut en bas:

.gradient {
  background-image: linear-gradient(#ff8a00, #e52e71);
}

Bonne droite? Notez que nous n'avons pas déclaré l'angle dans l'exemple ci-dessus. CSS assumera from top dans ce scénario, où #ff8a00 est la couleur de départ qui passe à la couleur suivante, #e52e71.

Nous aurions pu écrire la même chose de deux autres manières:

/* Explicitly declare the direction */
background-image: linear-gradient(to bottom, #ff8a00, #e52e71);

/* Explicitly declare the angle, in degrees */
background-image: linear-gradient(90deg, #ff8a00, #e52e71);

Changer de direction

Pour faire passer le dégradé de gauche à droite, on passe un paramètre supplémentaire au début de la linear-gradient() fonction, commençant par le mot to qui indique la direction. Décomposons la valeur de la propriété en lignes distinctes pour qu'il soit plus facile de voir ce qui se passe.

.gradient {
  background-image:
    linear-gradient(
      to right,
      #ff8a00, #e52e71
    );
}

Neat, maintenant les couleurs passent du bord gauche au bord droit de l'élément!

Ce to la syntaxe fonctionne également pour les coins. Par exemple, si vous vouliez que l'axe du dégradé commence dans le coin inférieur gauche et va dans le coin supérieur droit, vous pouvez dire to top right:

.gradient {
  background-image:
    linear-gradient(
      to top right,
      #ff8a00, #e52e71
    );
}

Si cette boîte était un carré parfait, l'angle du dégradé aurait été 45deg, mais comme ce n’est pas le cas, ce n’est pas le cas. Si vous vouliez vous assurer que c'était 45deg, vous pouvez déclarer l'angle exact, en ne faisant que tomber to à partir de la syntaxe:

.gradient {
  background-image:
    linear-gradient(
      45deg, 
      #ff8a00, #e52e71
    );
}

Couleurs multiples

Nous ne sommes pas limités à deux couleurs! En fait, nous pouvons avoir autant de couleurs séparées par des virgules que nous le voulons. En voici quatre:

.gradient {
  background-image:
    linear-gradient(
      to right, 
      red, 
      #f06d06, 
      rgb(255, 255, 0), 
      green
    );
}

Prise en charge du navigateur

Bureau

Chrome Firefox C'EST À DIRE Bord Safari
dix* 36 dix 12 TP

Mobile / tablette

Chrome Android Android Firefox Android Safari sur iOS
86 82 4 * 14

Dégradés radiaux

Un dégradé radial diffère d'un dégradé linéaire en ce qu'il commence à un seul point et émane vers l'extérieur. Les dégradés sont souvent utilisés pour simuler une source de lumière, dont nous savons qu’elle n’est pas toujours droite. Cela rend les transitions entre les couleurs dans un dégradé radial encore plus naturelles.

Syntaxe

le radial-gradient() la notation est utilisée soit sur le background ou background-image propriété en CSS. Cela a tout son sens lorsque nous nous souvenons que les dégradés sont essentiellement le CSS pour créer des images que nous ferions autrement dans un logiciel d'édition d'images et que nous placerions sur un background propriété de toute façon.

La syntaxe officielle est la suivante:

radial-gradient(
  (  ||  )? ( at  )? ,
  
);

Il pourrait être un peu utile de traduire cela en anglais de base:

Hé, élément! Peindre un gradient radial dans une certaine forme à une certaine taille qui est situé dans ces positions. Oh, et assurez-vous que ça commence par cette couleur et s'arrête à cette couleur.

Valeurs

le radial-gradient la notation accepte les valeurs suivantes:

  • shape: Détermine la forme du dégradé qui suit lors de la transition vers l'extérieur, d'une couleur à l'autre. Puisque nous parlons de dégradés radiaux, les formes sont limitées à être de nature circulaire. Nous pouvons omettre cette valeur et la notation mesurera les longueurs des côtés de l'élément pour déterminer si une valeur correspond mieux à la situation. Par exemple, un élément qui est un carré parfait correspondrait parfaitement à circle alors que tout ce qui est rectangulaire est mûr pour ellipse.
  • size: Influence la forme finale du dégradé en prenant le shape valeur et indiquant où le dégradé doit se terminer en fonction du centre de la forme. Cela peut être exprimé par un nom ou une mesure exacte de la longueur.
    • closest-side: Le dégradé se terminera sur le côté le plus proche du centre de la forme. Si deux parties correspondent à ces critères, elles seront réparties uniformément.
    • farthest-side (par défaut): l'opposé de closest-side, où le dégradé se terminera sur le côté le plus éloigné du centre de la forme.
    • closest-corner: Le dégradé se terminera au coin qui correspond le plus proche du centre de la forme.
    • farthest-corner: L'opposé de closest-corner, où le dégradé se termine au coin le plus éloigné du centre de la forme.
    • radius: Nous pouvons spécifier une valeur numérique qui sert de rayon du cercle. Cela doit être indiqué en pixels positifs ou en unités relatives. Désolé, aucune unité ou pourcentage négatif n'est autorisé car un cercle négatif serait vide et les pourcentages peuvent être relatifs à n'importe quel nombre de valeurs environnantes.
      • or percentage: Une deuxième valeur numérique peut être fournie pour déclarer la taille explicite d'une ellipse, mais pas d'un cercle. Encore une fois, les valeurs négatives sont un non-non, mais les pourcentages sont équitables car la taille est relative à la boîte de dégradé plutôt qu'à l'élément.
  • position: Cela fonctionne à peu près de la même manière que sur background-position. Cela signifie top, right, left, et center tous fonctionnent ici, ainsi que les combinaisons où deux valeurs nommées (par exemple top center) sont prévus. Nous pouvons également spécifier une position exacte à l’aide d’une valeur numérique, y compris le pourcentage, qui sont tous relatifs au cadre de sélection de l’élément. La valeur par défaut est center center.
  • color-stop: Ce sont des valeurs de couleur qui définissent le dégradé. Toute valeur de couleur est acceptée ici, y compris hexadécimal, nommé, RVB et TSL.

Usage

Voici à quoi cela ressemble peut-être le plus élémentaire. Notez que nous ne déclarons pas le shape, size, position ou color-stop valeurs, qui sont toutes par défaut des valeurs plaçant le dégradé au centre même de l'élément et effectuant une transition uniforme entre les valeurs de couleur déclarées.

.gradient {
  background-image:
    radial-gradient(
      #ff8a00,
      #e52e71
    );
}

Changer de forme

Voyez comment ce dégradé assume la shape est ellipse dans les exemples ci-dessus? C’est parce que l’élément lui-même n’est pas un carré parfait. Dans ce cas, il aurait supposé un circle au lieu. Assez intelligent! Voici ce qui se passerait si nous avions déclaré explicitement circle comme le shape valeur:

.gradient {
  background-image:
    radial-gradient(
      circle,
      #ff8a00,
      #e52e71
    );
}

Changement de position

Notez que le dégradé dans les démos a été circulaire et s'estompe jusqu'à la couleur de fin le long du bord le plus éloigné. Nous pouvons déclarer explicitement le position valeur pour garantir que le fondu se termine par le "côté le plus proche" du shape à la place, comme ceci:

.gradient {
  background-image:
    radial-gradient(
      circle closest-side,
      #ff8a00,
      #e52e71
    );
}

Les valeurs possibles sont: closest-corner, closest-side, farthest-corner, et farthest-side. Vous pouvez y penser comme: «Je veux que ce dégradé radial s’estompe du point central au point (whichever side), »Et partout ailleurs remplit pour tenir compte de cela.

Un dégradé radial n'a pas non plus besoin de commencer au centre par défaut. Il peut spécifier un certain point en utilisant at dans le cadre du premier paramètre, comme:

.gradient {
  background-image:
    radial-gradient(
      circle at top right,
      #ff8a00,
      #e52e71
    );
}

Prise en charge du navigateur

Bureau

Chrome Firefox C'EST À DIRE Bord Safari
dix* 36 dix 12 TP

Mobile / tablette

Chrome Android Android Firefox Android Safari sur iOS
86 82 4 * 14

Gradients coniques

Un gradient conique est similaire à un gradient radial. Les deux sont circulaires et utilisent le centre de l'élément comme point source pour les arrêts de couleur. Cependant, là où les arrêts de couleur d'un dégradé radial émergent du centre du cercle, un dégradé conique les place autour du cercle.

Ils sont appelés «coniques» car ils ont tendance à ressembler à la forme d'un cône vu d'en haut. Eh bien, au moins quand il y a un angle distinct fourni et que le contraste entre les valeurs de couleur est assez grand pour faire la différence.

Syntaxe

La syntaxe du gradient conique est plus facile à comprendre en anglais simple:

Faire un gradient conique qui est situé à (quelque point) qui commence par (une couleur) à un certain angle et se termine par (une autre couleur) à (un certain angle)

Voici la syntaxe officielle:

conic-gradient(
  ( from  )? ( at  )?,
  
)

Usage

À son niveau le plus élémentaire, cela ressemble à ceci:

.gradient {
  background-image:
    conic-gradient(
      #ff8a00, #e52e71
    );
}

… Où l'on suppose que l'emplacement du dégradé commence au centre même de l'élément (50% 50%) et est uniformément répartie entre les deux valeurs de couleur.

Nous aurions pu écrire cela de plusieurs autres manières, qui sont toutes valides:

.gradient {
  /* Original example */
  background-image: conic-gradient(#ff8a00, #e52e71);
  /* Explicitly state the location center point */
  background-image: conic-gradient(at 50% 50%, #ff8a00, #e52e71);
  /* Explicitly state the angle of the start color */
  background-image: conic-gradient(from 0deg, #ff8a00, #e52e71);
  /* Explicitly state the angle of the start color and center point location */
  background-image: conic-gradient(from 0deg at center, #ff8a00, #e52e71);
  /* Explicitly state the angles of both colors as percentages instead of degrees */
  background-image: conic-gradient(#ff8a00 0%, #ff8a00, #e52e71);
  /* Explicitly state the angle of the starting color in degrees and the ending color by a full turn of the circle */
  background-image: conic-gradient(#ff8a00 0deg, #e52e71 1turn);
}

Si nous ne spécifions pas d'angle pour les couleurs, alors on suppose que le dégradé est uniformément divisé entre les couleurs, en commençant à 0deg et se terminant à 360deg. Cela crée un «arrêt dur» où les couleurs se heurtent les unes aux autres à 0deg et 360deg. Si nous introduisons une troisième valeur, cela crée un dégradé plus lisse et nous commençons à obtenir cette perspective de cône cool.

.gradient {
  background-image:
    conic-gradient(
      #ff8a00,
      #e52e71,
      #ff8a00
    );
}

On peut s'amuser avec des dégradés coniques. Par exemple, nous pouvons l'utiliser pour créer le même type de motif que vous pourriez voir dans un sélecteur de couleur ou dans le tristement célèbre indicateur de ballon de plage tournant Mac:

.conic-gradient {
  background-image:
    conic-gradient(
      red,
      yellow,
      lime,
      aqua,
      blue,
      magenta,
      red
    );
}

Ou, essayons un graphique à secteurs simple en ajoutant des arrêts fixes entre trois valeurs de couleur:

.gradient {
  background-image:
    conic-gradient(
      lime 40%,
      yellow 0 70%,
      red 0
    );
}

Prise en charge du navigateur

Bureau

Chrome Firefox C'EST À DIRE Bord Safari
69 83 Non 79 12,1

Mobile / tablette

Chrome Android Android Firefox Android Safari sur iOS
86 Non 81 12,2-12,4

Répéter les dégradés

La répétition des dégradés prend une astuce que nous pouvons déjà faire avec l'utilisation créative de color-stopssur le linear-gradient() et radial-gradient() notations, et cuit pour nous. L'idée est que nous pouvons créer des motifs à partir des dégradés que nous créons et leur permettre de se répéter à l'infini.

Syntaxe

Il existe trois types de dégradés répétitifs, dont deux sont actuellement pris en charge dans la spécification officielle et un dans le projet de travail actuel. La syntaxe de chaque notation est la même que celle de son type de dégradé associé. Par exemple, repeating-linear-gradient() suit la même syntaxe que linear-gradient().

Dégradé répétitif Notation associée Prise en charge?
repeating-linear-gradient linear-graadient Oui
repeating-radial-gradient radial-gradient Oui
repeating-conic-gradient conic-gradient Non

Usage

Voici un dégradé linéaire répétitif qui alterne entre deux couleurs tous les 10 pixels à un angle de 45 degrés:

.gradient {
  background-image:
    repeating-linear-gradient(
      45deg,
      #ff8a00,
      #ff8a00 10px,
      #e52e71 10px,
      #e52e71 20px
    );
}

On peut faire le même genre de chose, mais avec un dégradé radial. La différence? Outre la notation elle-même, nous définissons la forme et le point de départ:

.gradient {
  background-image:
    repeating-radial-gradient(
      circle at 0 0,
      #ff8a00,
      #ff8a00 10px,
      #e52e71 10px,
      #e52e71 20px
    );
}

Prise en charge du navigateur

Ceci est spécifiquement pour les dégradés répétitifs linéaires et radiaux.

Bureau

Chrome Firefox C'EST À DIRE Bord Safari
dix* 3,6 * dix 12 5,1 *

Mobile / tablette

Chrome Android Android Firefox Android Safari sur iOS
86 82 4 * 5,0-5,1 *

Des trucs!

Motifs

Nous avons vu comment les dégradés peuvent créer des motifs intéressants lorsque nous avons examiné les dégradés répétés. Mais il existe de nombreux autres modèles que nous pouvons créer! Comme des damiers:

Nous pouvons également créer un motif de chevron répétitif:

Chris a un extrait qui crée un motif de papier millimétré:

Ces modèles sont bien documentés sur le Web, mais consultez la galerie de modèles de dégradés CSS de Lea Verou pour des exemples vraiment hallucinants.

Dégradés de bordure

Nous pouvons créer des frontières à partir de dégradés!

Nous pouvons même utiliser l'astuce du motif pour un effet de bordure amusant:

Ou, hé, nous pouvons mettre des arrêts difficiles à utiliser pour un effet de contenu qui se chevauchent:

Dégradés animés

On peut utiliser background-position tp donne l'impression que la transition entre les couleurs d'un dégradé est en mouvement.

Mais, comme c'est le cas pour toute animation, soyez attentif à l'accessibilité, en particulier ceux qui sont sensibles au mouvement. Consultez la section Accessibilité pour en savoir plus.

Découvrez cette démo de Marty! Il s'agit d'une utilisation très intelligente des dégradés radiaux pour simuler la lumière du soleil en fonction de la position du curseur de la souris.

Accessibilité

Les dégradés doivent prendre en compte le contraste entre les couleurs d'arrière-plan et de premier plan, comme vous le feriez avec background-color. L’astuce consiste à s’assurer que toutes les couleurs utilisées dans le dégradé et les transitions entre elles n’affectent pas la lisibilité du contenu qui se trouve au-dessus. C’est là que l’utilisation d’un vérificateur de contraste est utile.

Quelque chose d'autre à surveiller? Animations. La transition entre deux couleurs d'arrière-plan unies, par exemple en survol, n'est généralement pas un problème. Mais si background-position est utilisé pour donner l'impression qu'un dégradé bouge, alors il vaut la peine de considérer le prefers-reduced-motion requête multimédia pour que l'animation soit diffusée aux bons utilisateurs.

spécification

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *