Comment utiliser CSS3 Gradients - dummies

Un dégradé CSS3 (qui est un mélange entre deux couleurs ou plus) peut être un joli fond. Auparavant, les développeurs créaient un dégradé en créant une bande de dégradé mince dans un éditeur d'image, puis en utilisant les règles repeat-x ou repeat-y pour reproduire cette image plus petite sur la page. C'était une bonne technique, mais elle n'était pas très flexible, et seuls des gradients linéaires relativement simples étaient possibles.

CSS3 a ajouté une règle de dégradé remarquable qui rend les dégradés natifs via CSS. Lorsque cette technique est pleinement adoptée, il est beaucoup plus facile de travailler avec les dégradés.

CSS3 supporte deux types principaux de dégradés: linéaire et radial. Un dégradé linéaire change les couleurs le long d'une ligne droite et un dégradé radial rayonne vers l'extérieur à partir d'un point central.

Le mécanisme de dégradé a été l'une des parties les plus lentes de CSS à être normalisée et adoptée, donc elle change encore, mais il semble que les navigateurs définissent finalement une norme. Malheureusement, les préfixes spécifiques au fournisseur sont nécessaires pour le moment.

Comment construire un dégradé simple

Le dégradé le plus simple est démontré dans la boîte 1. Il varie de gauche à droite, en commençant par le rouge et en finissant par le blanc.

# box1 {background-image: gradient linéaire (gauche, rouge, blanc); background-image: -moz-linear-gradient (gauche, rouge, blanc); background-image: -webkit-linear-gradient (gauche, rouge, blanc);}

Voici comment construire un dégradé linéaire simple:

Définir le sélecteur.

Un dégradé est défini dans CSS, et vous devrez utiliser l'un de vos sélecteurs CSS standard pour déterminer à quel élément vous allez ajouter le dégradé.
Utilisez la règle de l'image d'arrière-plan.

Un dégradé est une forme particulière d'image. Vous pouvez utiliser la règle de l'image d'arrière-plan pour appliquer un dégradé à l'arrière-plan de tout élément, y compris le corps entier de la page.
Appelez la fonction linear-gradient.

Quelques éléments CSS nécessitent des parenthèses car techniquement ce sont des fonctions. La distinction n'a pas d'importance en ce moment, mais vous devez incorporer les parenthèses lorsque vous utilisez ce type de valeur. La technique linéaire-gradient est une fonction.
Détermine la direction dans laquelle le gradient va circuler.

Vous pouvez faire circuler un gradient dans n'importe quelle direction à l'intérieur de l'élément. L'indication à gauche fait que l'élément s'écoule de gauche à droite. Vous pouvez utiliser pour passer de haut en bas, ou en haut à gauche pour aller de haut en bas à gauche. Utilisez n'importe quelle combinaison de haut, gauche, bas et droite. Vous pouvez également spécifier un angle en degrés, comme illustré dans l'exemple suivant.
Indique une couleur de départ.

Utilisez l'un des outils de couleur standard (noms de couleurs, couleurs hexadécimales, rgb () / rgba () ou hsl ()) pour déterminer la couleur de départ.
Indique une couleur de fin.

La dernière couleur indiquée sera la couleur finale du dégradé. Le dégradé s'écoule uniformément du début à la fin de la couleur.
Répétez avec les extensions du navigateur.

Vous devrez ajouter des variantes pour les navigateurs spécifiques. Vous devrez créer une nouvelle version de la règle d'image d'arrière-plan pour chaque fournisseur principal.

Comment faire un dégradé plus intéressant

En regardant la boîte 2, vous verrez un dégradé plus complexe montrant plusieurs couleurs et un angle intéressant.

# box2 {background-image: gradient linéaire (75deg, rouge, blanc 33%, blanc 66%, bleu); background-image: -moz-linéaire-gradient (75deg, rouge, blanc 33%, blanc 66%, bleu); background-image: -webkit-linéaire-gradient (75deg, rouge, blanc 33%, blanc 66%, bleu);}

Voici comment ajouter plus de pizazz à vos dégradés.

Utilisez un angle pour la direction.

Plutôt que de spécifier la direction de votre dégradé avec les mots-clés standard haut / gauche, vous pouvez spécifier un angle de départ. Les angles sont mesurés mathématiquement en degrés, avec 0 venant de la droite et 90 venant de haut en bas. Vous devez spécifier la mesure du degré avec deg, donc 75 degrés est écrit comme 75deg.
Ajoutez autant de couleurs que vous le souhaitez.

Un dégradé peut contenir n'importe quel nombre de couleurs. Chaque changement de couleur s'appelle un arrêt de couleur . L'exemple montre trois couleurs différentes.
Déterminez où la couleur s'arrête.

Par défaut, les couleurs sont réparties uniformément le long du dégradé. Si vous le souhaitez, vous pouvez déplacer n'importe quelle couleur pour qu'elle apparaisse n'importe où sur le dégradé que vous souhaitez. Les emplacements des arrêts de couleur sont indiqués en pourcentages. Il n'est pas nécessaire d'ajouter un emplacement pour le premier et le dernier arrêt de couleur, car ils sont présumés être 0% et 100%.
Créez une bande de couleur en fournissant deux jeux de la même couleur.

La boîte 2 comporte une bande de blanc. Pour obtenir cet effet, deux arrêts de couleur ont été produits avec du blanc, l'un apparaissant à 33% et l'autre à 66%. Cela brise le gradient à peu près en tiers.
Mettez deux couleurs au même endroit pour un changement de couleur brusque.

Si vous voulez un changement de couleur brusque, mettez simplement deux couleurs différentes au même pourcentage.
Répétez l'opération pour tous les navigateurs.

Encore une fois, vous devrez considérer les différents navigateurs jusqu'à ce que cette technique devienne plus standardisée.

Comment créer un dégradé radial

CSS3 prend en charge un deuxième type de dégradé appelé dégradé radial . L'idée de base est la même, sauf qu'au lieu de suivre une ligne droite comme un gradient linéaire, un gradient radial semble s'écouler d'un point central de l'élément et rayonner vers l'extérieur.

Le dégradé radial de base indiqué dans l'encadré 3 est créé avec ce code CSS:

# box3 {background-image: radial-gradient (blanc, bleu); background-image: -moz-radial-gradient (blanc, bleu); background-image: -webkit-radial-gradient (blanc, bleu);}

Comme vous pouvez le voir, le dégradé radial de base est créé comme un dégradé linéaire, sauf qu'il utilise la fonction radial-gradient au lieu du linéaire- fonction de gradient.

Les dégradés radiaux ont beaucoup d'options, ce qui les rend très prometteurs, mais le support du navigateur pour ces différentes normes est assez inégal. La case 4 a un dégradé radial avec trois couleurs:

# box4 {background-image: gradient radial (rouge, blanc, bleu); background-image: -moz-radial-gradient (rouge, blanc, bleu); background-image: -webkit-radial-gradient (rouge, blanc, bleu);}

Il est également possible de changer la forme du dégradé du cercle à l'ellipse, pour changer le centre du dégradé en un point différent à l'intérieur du élément, et pour spécifier des arrêts de couleur. Vous aurez besoin de vérifier les spécifications actuelles pour voir comment ces choses sont faites, car elles sont encore assez expérimentales.