Accueil
Mes tutoriels sur la programmation

Tutoriel CSS - sommaire


Vous pouvez me contacter via Facebook (questions, suggestions) : page facebook relative à mon site

Mon site est gratuit pour les visiteurs (et sans publicité) mais sachez qu'il a un coût ...
Signé : l'auteur.

CSS : les dégradés linéaires et radiaux avec CSS3

Un exemple de dégradé complexe

Non ce superbe ciel azur n'est pas une image réalisée avec un logiciel de dessin tel paint mais un dégradé radial produit uniquement avec du CSS !
Avec CSS3, on peut désormais appliquer au "background" d'une boite un dégradé linéaire ou radial.

Des dégradés radiaux simples

Commençons par les dégradés radiaux.
Le dégradé rayonne à partir d'un point.

Le code CSS et HTML correspondant

... <style> .boite{display : inline-block ; width : 300px ; height : 300px ; margin:1% ; border : 1px solid black ;} #degrade_radial_1{border-radius : 150px ; background : radial-gradient(black, white) ; } #degrade_radial_2{border-radius : 150px ; background : radial-gradient(green, lime, white ) ; } #degrade_radial_3{border-radius : 150px ; background: radial-gradient(darkgreen,green, lime, white ) ; } #degrade_radial_4{border-radius : 150px ; background: radial-gradient(black,darkgreen,green, lime, white ) ; } ... <div class ="boite" id = 'degrade_radial_1' > </div> <div class ="boite" id = 'degrade_radial_2' > </div> <div class ="boite" id = 'degrade_radial_3' > </div> <div class ="boite" id = 'degrade_radial_4' > </div> ...

Commentaire du code

Les boîtes DIV deviennent de type inline-block de façon à ce qu'elles se positionnent les unes à côté des autres (tant qu'il y a de la place) et non plus les unes en dessous des autres.
Les boîtes DIV font 400 pixels par 400 mais grâce à border-radius : 200px ces boîtes apparaissent telles des cercles !

La fonction radial-gradient est facile à mettre en oeuvre. Il suffit d'indiquer en paramètres les couleurs successives du dégradé.
Par défaut le dégradé part du centre de la boîte.

Dégradés linéaires simples

Le dégradé respecte un axe.

Le code CSS correspondant

.boite{display : inline-block ; width : 300px ; height : 300px ; margin:1% ; border : 1px solid black ;} #degrade_2_180 {background : linear-gradient(to bottom, black ,white) ; } #degrade_3_45{background : linear-gradient( 45deg, green,lime, white ) ; } #degrade_3_90{background: linear-gradient(to right, red, orange, white ) ; } #degrade_4_135{background : linear-gradient(135deg, black, purple,pink, white ) ; }

Commentaire

Le premier argument de la fonction linear-gradient est l'axe du dégradé exprimé sous forme d'un angle ou d'un mot (top, right, bottom, etc.) et précédé de "to".
Les arguments suivants de la fonction linear-gradient sont les couleurs du dégradé (au moins deux couleurs).

Dégradés radiaux complexes

Abordons maintenant des dégradés radiaux plus sophistiqués.

Exemple 1

Dans les exemples simples de dégradés radiaux nous avons supposé que la forme du dégradé était circulaire et que le dégradé partait du centre de la boite.
Or un dégradé radial peut être de forme elliptique et le dégradé peut partir d'un autre point que le centre de la boite.
Ci-dessous un coucher de soleil !

Le code HTML et CSS correspondant :

<div class ="boite" style ="width : 100%; height : 400px ; background-image : radial-gradient( farthest-corner ellipse at bottom center, orange 0%, blue 50%, skyblue 100% );"> </div>

L'argument relatif à la portée du dégradé ne concerne que les dégradés radiaux (fonction : radial-gradient).

Exemple 2

Reprenons le thème présenté en début de page : le superbe ciel d'été.

Le code est très court :

<div class ="boite" style ="width : 100%; height : 400px ; background-image : radial-gradient( farthest-corner circle at center, yellow 0%, aqua 25%, skyblue 50%);"> </div>

Il s'agit d'un dégradé radial circulaire qui part du centre de la boite et qui comprend trois couleurs.

Mais revenons sur le premier argument : porté du dégradé.

Dégradés répétifs

Tant pour les dégradés radiaux que linéaires le motif du dégradé peut être répété.
En effet il existe les propriétés repeating-linear-gradiant & repeating-radial-gradiant.

Un dégradé linéaire répétitif

Le code :

<div class ="boite" style ="width : 100%; height : 400px ; background-image : repeating-linear-gradient(black, blue, red 100px );"> </div>

Par défaut un dégradé linéaire va du haut vers le bas ; c'est ce que nous voulons donc le premier paramètre (axe du dégradé) peut être omis.
La commande devient "repeating-linear-gradient".
Le dégradé se déroule sur 100px or la hauteur de la boite étant de 400 pixels, le motif est répété 4 fois !

Un dégradé radial répétitif

Le rendu est assez psychanalytique.

Le code correspondant :

<div class="boite" style ="width : 100%; height : 400px ; background-image : repeating-radial-gradient(farthest-side ellipse at center, lime, red 20% );"> </div>

Il s'agit d'un dégradé répétitif radial (et plus précisément elliptique) qui démarre du centre qui s'applique à 20% et est donc répété 5 fois.

Les dégradés CSS et les zones de dessin dans la page

Je vous rappelle que si vous voulez dessiner (dessins statique ou animé) dans une page il faut utiliser l'API Canvas ou le langage SVG.

Rien n'interdit d'appliquer un dégradé CSS à une balise CANVAS ou SVG de la page.
En d'autres termes vous pouvez utiliser toute la puissance des dégradés CSS pour créer le "background" de votre zone de dessin Canvas ou SVG.