CSS3
Ajouter des dégradés
Pendant longtemps, le web s'est limité à un nombre de couleurs très restreint. Ensuite, il a été plus simple d'utiliser des couleurs plus variées ou des motifs de fond. Depuis CSS3, il est même possible de définir la couleur dans différents modes et d'en spécifier l'opacité.
Une nouvelle possibilité a vu le jour : les dégradés. Ils seront en général utilisés sur les arrière-plans car seront généralement peu visible sur le texte (trop fin). Voilà à quoi pourra ressembler la définition d'un dégradé.
Contrôler le dégradé CSS
Déterminer l'orientation du dégradé
On peut orienter les couleurs vers la droite, le haut, la gauche et le bas et combiner ces différentes options, ou utiliser un paramètrage libre basé sur un taux de rotation en degradé.
to left
45deg
Positionner le dégradé radial dans la forme
l'utilisation de l'instruction at permet de placer librement le dégradé. On obtient quelque chose de la forme suivante :
background:radial-gradient(at 10% 80%,
rgba(100,100,255,1),
rgba(200,200,255,0.5)
);
la première valeur après at correspond au décalage horizontal par rapport au côté gauche de la forme, et le second par rapport au bord supérieur. On peut aussi utiliser le mots réservés left, right, top et bottom au lieu de pourcentages.
Ajouter et placer des couleurs
Pour ajouter des couleurs au dégradé, il suffit de les lister dans l'ordre d'apparition en les séparant par des virgules comme cela est déjà fait pour les deux couleurs par défaut. S'il est nécessaire de renforcer une couleur par rapport à une autre ou changer sa position. Il suffira alors de la spécifier en pourcentage de la largeur globale du dégradé et d'associer cette valeur à la couleur comme dans :
background:radial-gradient(at 10% 80%,
rgba(100,100,255,1) 0%,
red 10%,
rgba(200,200,255,0.5) 30%
);On pourra par exemple obtenir les couleurs de l'arc-en-ciel par ce moyen :
p{
height:150px;
width:300px;
background:radial-gradient(at 50% 100%,
transparent 45%,
hsl(0, 100%, 50%) 50%,
hsl(51, 100%, 50%),
hsl(102, 100%, 50%),
hsl(153, 100%, 50%),
hsl(204, 100%, 50%),
hsl(255, 100%, 50%),
hsl(306, 100%, 50%),
transparent 70%)
}
Répéter le dégradé
en préfixant les valeurs linear-gradient et radial-gradient avec repeating, on obtient un dégradé qui va se répéter autant de fois que nécessaire sur la zone qu'il colore.
background:repeating-linear-gradient(
rgba(100,100,255,1),
red 10%,
rgba(200,200,255,0.5) 20%
);Créer un bouton personnalisé en dégradé
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);
Mis en place, il permet d'obtenir quelque chose comme ceci :
- ►
- ||
Cela offre l'avantage de fournir des dégradés avec des contenus sélectionnables et référençables à l'inverse des boutons sous forme d'image (essayez avec le suivant). Regardez aussi le gain de qualité si vous zoomez :
Dans le principe cela semble donc envisageable et pas trop compliqué. nous allons rentrer dans le détail des instructions. La complication vient de l'incompatibilité des navigateurs : par exemple, le code ci-dessus, actuellement recommandé par le W3C ne marche pas sur Safari. Il faudra donc utiliser les préfixes de navigateurs et utiliser la notation propre à chacun en plus de celle-ci.
Le simple exemple ci-dessus devient maintenant :
background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* IE10+ */ background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
Cela devient donc une autre paire de manche.