Dégradés circulaires et elliptiques CSS3 [Astuces CSS3]
Aujourd’hui, nous allons poursuivre notre discussion sur Gradients CSS3. Dans le post précédent, nous vous avons montré comment créer Gradients Linéaires. Cette fois, nous allons couvrir leur parent, Gradients Circulaires et Elliptiques.
La syntaxe du dégradé
Le dégradé en CSS3 est déclaré en utilisant le image de fond propriété. C’est pour une meilleure compatibilité lorsque nous devons aussi ajouter Couleur de fond dans un seul ensemble de règles, de sorte qu'ils ne se heurtent pas. Ensuite, pour créer le dégradé radial, nous l’appelons simplement avec ceci gradient radial () une fonction. Il y a quatre valeurs à inclure dans la fonction pour définir le dégradé correctement.
La première valeur définit le position de gradient. Nous pouvons utiliser un mot clé descriptif tel que haut, bas, centre et gauche, ou nous pouvons aussi être plus spécifique, comme, 50% 50% pour définir le dégradé au centre ou 0% 0% pour définir le gradient à partir de en haut à gauche.
La deuxième valeur définit le la forme et la taille du dégradé, il y a deux arguments pour façonner les gradients, d'abord le ellipse qui est la valeur par défaut, et la seconde est cercle.
Et pour le taille du dégradé, nous pouvons sélectionner l'un des six arguments suivants.
| Valeurs | La description |
|---|---|
côté le plus proche | La forme du dégradé rencontre le côté de la boîte le plus proche de son centre (pour les cercles) ou les deux côtés vertical et horizontal les plus proches du centre (pour les ellipses). |
coin le plus proche | La forme du dégradé est dimensionnée afin de correspondre exactement au coin le plus proche de la boîte depuis son centre. |
côté le plus éloigné | Semblable au côté le plus proche, sauf que la forme est dimensionnée pour rencontrer le côté de la boîte le plus éloigné de son centre (ou des côtés verticaux et horizontaux). |
coin le plus éloigné | La forme du dégradé est dimensionnée de manière à ce qu'il rencontre exactement le coin le plus éloigné de la boîte depuis son centre. |
contenir | Un synonyme de |
couverture | Un synonyme de |
Source de table: Réseau de développeurs Mozilla.
Enfin, les troisième et quatrième définissent la combinaison de couleurs. Alors, voici comment nous écrivons la syntaxe pour créer le Elliptique gradients, et cette fois nous allons utiliser couverture pour la taille du gradient, donc il va se propager largement, couvrant le conteneur;
body background-image: radial-gradient (centre centre, couverture d'ellipse, # ffeda3, # ffc800);
Pour créer le Circulaire gradient nous pouvons simplement le faire de cette façon:
body background-image: radial-gradient (centre centre, couverture de cercle, # ffeda3, # ffc800);
Comme son nom l'indique, la forme du dégradé sera un cercle.
Prise en charge du navigateur
Notez cependant que tous les navigateurs sont toujours en train de fournir un support complet pour cette fonctionnalité, ils ont donc toujours besoin du préfixe du vendeur. Ainsi, toute la syntaxe complète qui fonctionnera dans tous les navigateurs modernes - IE10 +, Firefox 3.6+, Chrome 4.0+, Safari 4.0+ et Opera 11+ - ressemblera à quelque chose comme ça;
corps image d’arrière-plan: gradient-radial (centre en bas, cache de l’ellipse, # ffeda3, # ffc800); background-image: -o-radial-gradient (centre en bas, cache de l'ellipse, # ffeda3, # ffc800); background-image: -ms-radial-gradient (centre en bas, jaquette d'ellipse, # ffeda3, # ffc800); background-image: -moz-radial-gradient (centre, fond, ellipse, # ffeda3, # ffc800); background-image: -webkit-radial-gradient (centre, fond, ellipse, # ffeda3, # ffc800);
Regardez la démo ou téléchargez le code source pour jouer avec les dégradés..
- Démo
- Source de téléchargement
Mots finaux
La création d'un dégradé radial CSS3 n'est pas aussi difficile que vous le pensez, et particulièrement lorsque vous obtenez l'aide de ces outils pour générer du code:
- Dégradés Colorzilla
- Gradientoo
Le gradient radial n'est qu'un type de gadgets CSS3, nous poursuivrons notre discussion sur le sujet dans les prochains articles, alors restez à l'écoute sur Hongkiat.com
