En-tete Astuces divers html et css
Classic Moderne

Réaliser un fond en dégradé sans image:



Bouton


Pour afficher un dégradé en CSS3, les navigateurs créent dynamiquement une image de fond définie par des instructions normés. À l’heure actuelle, il est possible d’appliquer un dégradé en CSS sur tous les navigateurs récents. Cependant chaque navigateur possède encore ses propres normes de nommages et surtout ses propres limites.

De ce fait, pour appliquer cette propriété il est nécessaire de multiplier les instructions.


button
{
background-image: -webkit-linear-gradient([param1], [param2 param3], [param4 param5]); /* Chrome, Safari */
background-image: -moz-linear-gradient([param1], [param2 param3], [param4 param5]); /* Firefox */
background-image: -ms-linear-gradient([param1], [param2 param3], [param4 param5]); /* IE */
background-image: -o-linear-gradient([param1], [param2 param3], [param4 param5]); /* Opera */
background-image: linear-gradient([param1], [param2 param3], [param4 param5]); /* Norme W3C */
}


Le premier paramètre (param1) est la position de départ de votre dégradé.


Si vous voulez qu’il démarre en haut, vous n’aurez qu’à renseigner 0deg, en bas 180deg, à gauche 270deg ou à droite 90deg. Si vous voulez en diagonal de haut gauche vers bas droit, on aura 315deg, et ainsi de suite.
Toutes les combinaisons que vous imaginez sont alors possibles ! Selon la position de départ que vous choisissez, votre dégradé ira dans la direction opposée. Si, comme dans l’exemple ci-dessus, le point de départ choisi est 45 deg (haut droit), la couleur de départ évoluera vers la couleur d’arrivée en direction de l’opposé bas gauche soit 225deg.
Il est tout à fait correct d’écrire aussi right top au lieu de top right. Vous obtiendrez le même effet.

Le second paramètre (param2) est la couleur de départ de votre dégradé et le troisième paramètre (param3) est un pourcentage et correspond à l’étendue de la couleur passée en second paramètre.

Attention : il n’y a pas de virgule entre la couleur et son pourcentage d’étendu ! N’en mettez pas ou votre dégradé ne fonctionnera tout simplement pas. Nous souhaitons faire un dégradé du bleu foncé vers le bleu clair. Nous pouvons donc utiliser le code suivant :


background-image: -webkit-linear-gradient(45deg, #0f129b 0%, #88a9e6 100%);
background-image: -moz-linear-gradient(45deg, #0f129b 0%, #88a9e6 100%);
background-image: -ms-linear-gradient(45deg, #0f129b 0%, #88a9e6 100%);
background-image: -o-linear-gradient(45deg, #0f129b 0%, #88a9e6 100%);
background-image: linear-gradient(45deg, #0f129b 0%, #5886dc 100%);

vous pouvez très bien les mettre en RGB, ce qui donnera pour la première ligne :


background-image: -webkit-linear-gradient(45deg, rgb(12,15,124) 0%, rgb(136,169,230) 100%);


Utiliser RGBA (Couleur RVB et A pour Opacité) pour créer des dégradés transparents

Vous savez tous utiliser la valeur RGB qui prend trois paramètres pour changer la couleur d’un élément, et bien au lieu d’utiliser RGB, utilisez RGBA, et passez-lui un quatrième paramètre comme ceci : rgba(214,15,15,0.5).
Les trois premiers paramètres ne changent pas, ce sont les composantes rouges, vertes et bleues de la couleur choisie. Le quatrième paramètre est un nombre à virgule. Sachez qu’il doit être compris entre 0 et 1 et qu’il définit la transparence de votre élément.
Plus cette composante est proche de 0, plus l’élément sur lequel vous avez appliqué cette valeur sera transparent : Si vous choisissez de mettre 1, aucune transparence ne sera appliquée, si vous mettez 0, l’élément sera complètement transparent.

N’hésitez pas à utiliser RGBA pour les dégradés, puisque cela fonctionne parfaitement ! Mais attention à bien écrire RGBA et mettre 4 paramètres.

Un autre programme sur les couleurs, utiles pour construire son site,

    ==> Télécharger Color Cop 5.4.5 <==



Dans le cas présenté en haut de page, il n’y a que deux couleurs (début et fin du dégradé). Mais vous pouvez en mettre autant que vous voulez ! Sachez seulement que la première et la dernière couleur renseignée sont respectivement les couleurs de début et de fin de votre dégradé. Rien ne vous empêche de passer par toutes les couleurs de l’arc-en-ciel dans un même dégradé.

Linear-gradient … adapté à Internet Explorer 9 et antérieurs


Maintenant que vous maitrisez la première forme de gradient nous pouvons passer à la deuxième.

Voici l’équivalent des gradients pour Internet Explorer avec la propriété filter. Il ne s’agit pas vraiment de CSS3, mais je préfère vous en parler pour que vous sachiez comment faire un dégradé à peu près équivalent sous IE.

Evidemment, Internet Explorer, peu respectueux des standards du Web, ne fait jamais comme tout le monde. En effet, et comme je vous le disais ci-dessus, il n’utilise pas la propriété background-image, mais plutôt la propriété filter:


filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#D60F0F', endColorstr='#FFDD00', GradientType=0);


Vous n’avez ici à renseigner que deux couleurs, une pour le début (startColorstr), et une pour la fin (endColorstr). La valeur de GradientType peut prendre deux valeurs. Soit elle est à 0 et dans ce cas, le dégradé est vertical, soit elle est à 1 et le dégradé est horizontal.


Notre code CSS ressemble donc maintenant à ça :


#gradients
{
background-image: -webkit-linear-gradient(right top, #D60F0F 0%, #FFDD00 100%);
background-image: -moz-linear-gradient(right top, #D60F0F 0%, #FFDD00 100%);
background-image: -ms-linear-gradient(right top, #D60F0F 0%, #FFDD00 100%);
background-image: -o-linear-gradient(right top, #D60F0F 0%, #FFDD00 100%);
background-image: linear-gradient(right top, #D60F0F 0%, #FFDD00 100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#D60F0F',endColorstr='#FFDD00', GradientType=1);
}


Les dégradés circulaires avec -radial-gradient

Jusqu’à présent nous avons utilisé la valeur linear-gradient pour créer des dégradés. Je vais maintenant vous faire découvrir la valeur radial-gradient, toujours a utiliser avec la propriété background-image, mais qui ouvre de nouvelles portes à la mise en place de dégradés sur votre site. Il est ainsi possible de faire des dégradés en forme de cercles dans ce genre là :

Dégradé radial en CSS3

Il faut penser que pour faire un dégradé en forme de cercle, nous n’avons pas un, mais deux cercles.
Si l’on prend l’exemple ci-dessus, on peut aisément considérer qu’en réalité nous avons deux cercles : l’un bleu foncé et l’autre bleu clair, mais que le cercle bleu foncé, qui a un rayon plus grand est tronqué par le rectangle que nous voyons (à cause par exemple d’une div de taille fixe).

Ce que nous voyons est ce qui est à l’intérieur du carré. Mais en réalité ce que l’on ne voit pas, c’est le reste du cercle bleu foncé, et c’est là-dessus que nous allons jouer.

La valeur radial-gradient (sans aucun préfixe) est supportée par Safari depuis sa version 4, Firefox depuis sa version 3.6, Chrome depuis sa version 9, et Internet Explorer depuis sa version 10. Nous mettons donc toujours les valeurs préfixées pour la rétro-compatibilité. Voyons donc comme fonctionne radial-gradient :

Pour closest-side:

Bouton



background-image: -webkit-radial-gradient(50% 50%, circle closest-side, #88a9e6, #0f129b 50%);
background-image: -moz-radial-gradient(50% 50%, circle closest-side, #88a9e6, #0f129b 50%);
background-image: -ms-radial-gradient(50% 50%, circle closest-side, #88a9e6, #0f129b 50%);
background-image: -o-radial-gradient(50% 50%, circle closest-side, #88a9e6, #0f129b 50%);
background-image: radial-gradient(50% 50%, circle closest-side, #88a9e6, #0f129b 50%);

Pour closest-corner:

Bouton



background-image: -webkit-radial-gradient(50% 50%, ellipse closest-corner, #88a9e6, #0f129b 50%);
background-image: -moz-radial-gradient(50% 50%, ellipse closest-corner, #88a9e6, #0f129b 50%);
background-image: -ms-radial-gradient(50% 50%, ellipse closest-corner, #88a9e6, #0f129b 50%);
background-image: -o-radial-gradient(50% 50%, ellipse closest-corner, #88a9e6, #0f129b 50%);
background-image: radial-gradient(50% 50%, ellipse closest-corner, #88a9e6, #0f129b 50%);

Pour farthest-side:

Bouton



background-image: -webkit-radial-gradient(50% 50%, ellipse farthest-side, #88a9e6, #0f129b 50%);
background-image: -moz-radial-gradient(50% 50%, ellipse farthest-side, #88a9e6, #0f129b 50%);
background-image: -ms-radial-gradient(50% 50%, ellipse farthest-side, #88a9e6, #0f129b 50%);
background-image: -o-radial-gradient(50% 50%, ellipse farthest-side, #88a9e6, #0f129b 50%);
background-image: radial-gradient(50% 50%, ellipse farthest-side, #88a9e6, #0f129b 50%);

Pour farthest-corner:

Bouton



background-image: -webkit-radial-gradient(50% 50%, ellipse farthest-corner, #88a9e6, #0f129b 50%);
background-image: -moz-radial-gradient(50% 50%, ellipse farthest-corner, #88a9e6, #0f129b 50%);
background-image: -ms-radial-gradient(50% 50%, ellipse farthest-corner, #88a9e6, #0f129b 50%);
background-image: -o-radial-gradient(50% 50%, ellipse farthest-corner, #88a9e6, #0f129b 50%);
background-image: radial-gradient(50% 50%, ellipse farthest-corner, #88a9e6, #0f129b 50%);


Attention: Opera ne gère en réalité pas encore cette valeur, mais on préfère mettre la ligne lui correspondant dans le cas où le navigateur l’intégrerait à ses prochaines versions.

Les deux premiers paramètres (50% 50%), correspondent à la position en x et en y des cercles bleu foncé et bleu clair. Ici, le centre sera placé au centre de la div.
Le troisième et le quatrième paramètre correspond à la forme du dégradé (dans ce cas il prendra la valeur ellipse ou circle), et à la taille de celui-ci (dans ce cas il prendra la valeur closest-side, closest-corner, farthest-side, farthest-corner).

A vous de tester chacune de ces possibilités et de voir laquelle correspond le mieux à vos besoins.

Enfin, les trois derniers paramètres sont les couleurs du grand cercle bleu foncé (#88a9e6), puis du petit cercle bleu clair(#0f129b), suivi de l’étendu du dégradé en pourcentage.

Faire des dégradés en CSS c’est bien. Le faire correctement, c’est mieux. Voici donc un récapitulatif de ce qu’il ne faut oublier lorsque l’on les utilise.

Lorsque vous utilisez des dégradés, le premier item de votre checklist doit impérativement être la couleur de fond de fallback. Il s’agit de la couleur de fond qui sera affichée si le dégradé n’est pas chargé.

En effet, un navigateur ne comprenant pas les dégradés (ex : FF3.6 et IE6 à 9), n’appliquera pas de couleur par défaut si on ne lui spécifie pas. Dans ce cas, vous serez à coup sûr confrontés à des problèmes d’affichage et de contrastes.

N’oubliez donc jamais de placer un background-color.

Un internaute n’a ni le même navigateur ni les mêmes préférences que vous et ne naviguera jamais comme vous sur un site. On ne le dira jamais assez, un site Web est un média flexible. Styler en utilisant des unités de grandeurs en pixel, c’est le mal.

Pour survivre à cette torture, vos propriétés CSS se doivent d’être définies avec des unités de valeurs relatives : %, em, etc.

Cette bonne pratique s’applique également au dégradés. Si vous les définissez en pixels, vos dégradés n’auront plus l’effet escompté lors d’un agrandissement de texte par l’utilisateur.

Un axe pour se faciliter les dégradés est d’utiliser la transparence de ceux-ci en couplant avec une couleur de fond. Le principe, n’utiliser des dégradés que de blanc ou noir vers le transparent qui seront affichés sur couche d’une couleur unie.

Cette méthode se révèle particulièrement utile lorsque des changements de couleurs sont prévues sur les pseudo-classes visited, hover ou active.










Haut-de-Page