CSS3 : dégradés et fonds

Après avoir vu les arrondis et ombres dans le précédent article je vous propose à présent de voir les dégradés et les fonds. Le CSS3 permet la création d’esthétiques dégradés linéaires ou radiaux. D’autre part il est possible d’avoir de multiples fonds, ce qui autorise une grande créativité.

Les dégradés linéaires

Un dégradé linéaire est un changement progressif de couleur qui suit une ligne droite, par exemple de gauche à droite, ou l’inverse, ou de haut en bas, ou de n’importe quel point à n’importe quel autre point. On trouve cela dans tous les logiciels de création graphique, comme Gimp par exemple.

Il suffit de déterminer la couleur de départ, la couleur d’arrivée, et les éventuelles couleurs intermédiaires et le navigateur crée le dégradé pour nous en ajoutant les couleurs entre ces repères avec une progression douce.

Avec deux couleurs

La propriété à utiliser est background avec un linear-gradiant, voici un premier exemple (JSFiddle) :

On définit la couleur de départ (vert) et la couleur d’arrivée (cyan). Par défaut le dégradé est vertical de haut en bas.

Pour changer la direction on a le choix de la syntaxe, elle peut être explicite :

  • to top
  • to right
  • to bottom
  • to left

Et on peut les associer : to top right, to bottom left…

Mais on peut aussi spécifier un angle en degrés (avec 0deg on pointe vers le haut) et on tourne dans le sens des aiguilles d’une montre (même si  les montres n’ont plus d’aiguilles aujourd’hui) :

Vous pouvez utiliser des angles négatifs, ça tourne alors dans l’autre sens !

Avec plus de deux couleurs

Il est possible d’insérer une (ou plusieurs) couleur(s) intermédiaire(s) :

On peut par exemple reproduire les couleurs du prisme :

Par défaut une couleur intermédiaire se positionne entre ses encadrantes, avec une valeur en pourcentage on peut la localiser où on veut :

La transparence

Si on utilise la transparence pour les couleurs alors le dégradé en tient compte :

La répétition

On peut aussi répéter un dégradé :

Les dégradés radiaux

Ce qu’on a vu pour les dégradés linéaires est valable pour les dégradés radiaux (JSFiddle) :

Par défaut le dégradé est circulaire et centré. Si on veut une ellipse il faut le préciser :

On peut changer la position du centre du dégradé (on peut aussi utiliser des valeurs numériques) :

On peut aussi définir sa dimension :

On dispose de ces mot-clés pour la dimension :

  • closest-side : le bord du dégradé arrive aux bords les plus proches de la boîte :

 

  • farthest-side : le bord du dégradé arrive aux bords les plus éloignés de la boîte :

  • closest-corner : le bord du dégradé arrive au coin le plus proche de la boîte :

  • farthest-corner : le bord du dégradé arrive au coin le plus éloigné de la boîte :

Avec plus de deux couleurs

Il est possible d’insérer une (ou plusieurs) couleur(s) intermédiaire(s) :

La transparence

Si on utilise la transparence pour les couleurs alors le dégradé en tient compte :

La répétition

On peut aussi répéter un dégradé radial :

Les préfixes

Pour simplifier les choses les navigateurs ne digèrent pas tous la syntaxe de base. Il faut donc utiliser les préfixes(moz, webkit, ms et o). Le plus simple est d’automatiser ça par exemple avec gulp-autoprefixer. Il y a également des préfixeurs en ligne :

Ressources pour les dégradés

La principale ressource est la spécification du W3C.

J’aime bien également les pages MDN.

Mais le plus intéressant est sans conteste les générateurs, il en existe de nombreux, en voici deux intéressants :

Le fond

Avec le CSS3 on dispose de nouveaux réglages pour le fond (background). On peut même définir plusieurs fonds avec la propriété background-image.

Avec le CSS2 on avait déjà ces propriétés pour le fond :

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

En pouvant d’ailleurs regrouper toutes les valeurs avec background en une seule ligne.

Le CSS3 introduit de nouvelles propriétés :

  • background-size
  • background-origin
  • background-clip

La taille

On peut donc maintenant régler la taille avec background-size.

Prenons l’exemple d’une image de fleur un peu encombrante (JSFiddle) :

J’aimerais la réduire pour l’adapter au contenant (JSFiddle):

Ici j’ai mis une seule valeur, on peut en mettre deux pour définir largeur et hauteur.

On dispose aussi de contain et cover au lieu des valeurs numériques.

Avec contain la fleur s’étend tant qu’elle peut en restant entière :

Avec cover elle s’étend tant qu’elle peut dans la plus grande dimension mais elle n’est plus entière :

C’est pratique si on veut par exemple une image qui couvre entièrement le fond d’une page.

Pour mémoire l’image en background se répète par défaut, dans les exemples j’utilise la propriété no-repeat.

La position

Avec le CSS2 on peut positionner une image de fond avec background-position. On peut dire par exemple qu’on la veut en haut à droite.

Avec le CSS3 s’ajoute la propriété background-origin qui permet aussi de positionner l’image avec ces 3 possibilités :

  • border-box : l’image part du coin (j’ai représenté le padding en noir) , (JSFiddle) :

  • padding-box : l’image part du coin du padding (valeur par défaut)

  • content-box : l’image part coin du contenu :

Evidemment ces propriétés se combinent avec background-position :

La surface de peinture

On sait qu’avec la propriété background on peut donner une couleur au fond et cette couleur occupe tout l’espace.

Le CSS3 nous donne la possibilité de limiter avec background-clip la peinture du fond au padding ou au contenu. On retrouve les trois valeurs qu’on a vues ci-dessus pour la position :

  • border-box : la peinture occupe tout l’espace, c’est la valeur par défaut et en fait elle ne sert à rien.
  • padding-box : la peinture se limite aux bords du padding (JSFiddle) :

  • content-box : la peinture se limite au contenu :

Des fonds multiples

Avec CSS3 on peut aussi définir plusieurs images de fond. On utilise tout ce qu’on a vu ci-dessus en séparant les valeurs avec des virgules. Voici un exemple avec 3 images (JSFiddle) :

Avec ce code :

  background-size: 100px;
  background-image: url(img1), url(img2), url(img3);
  background-position: right bottom, left top;
  background-repeat: no-repeat, no-repeat, repeat;

Les ressources

On a évidemment la spécification W3C.

On a aussi la page MDN et la page du W3 school.

Il existe de multiples ressources disséminées un peu partout et évidemment pas de générateur pour tout ça.

Publié dans: CSS3

Laisser un commentaire