Comment utiliser les dégradés CSS3

Un gradient de CSS3 (qui est un mélange entre deux ou plusieurs couleurs) peut être un joli fond. Auparavant, les développeurs devraient créer un gradient par la construction d'une bande de gradient mince dans un éditeur d'image, puis en utilisant la répétition-x ou repeat-y des règles pour rendre l'image plus petite que répliquer à travers la page. Ce fut une belle technique, mais il était pas très flexible, et seuls les dégradés linéaires relativement simples était possible.

Sommaire

CSS3 a ajouté une règle de gradient remarquable qui fait gradients nativement par CSS. Lorsque cette technique est totalement adopté, il est beaucoup plus facile gradients de travailler avec.

CSS3 soutient deux grands types de dégradés: linéaire et radiale. Un gradient linéaire change de couleur le long d'une ligne droite, et un dégradé radial rayonne vers l'extérieur à partir d'un point central.

Le mécanisme de gradient a été l'une des parties les plus lentes de CSS pour être normalisés et adoptés, il est donc encore changer, mais il semble que les navigateurs sont finalement paramètre sur un standard. Malheureusement, les préfixes spécifiques au fournisseur sont nécessaires pour le moment.

Comment construire un simple dégradé

image0.jpg

Le gradient simple est démontré dans l'encadré 1. Il varie de gauche à droite, à partir de rouge et se terminant avec le blanc.

 # box1 {background-image: linear-gradient (à gauche, rouge, blanc) -background image: -moz-linear-gradient (à gauche, rouge, blanc) -background image: -webkit-linear-gradient (à gauche, rouge , blanc)-}

Voici comment vous construisez un dégradé linéaire simple:

  1. Définir le sélecteur.

    Un gradient est défini en CSS, et vous aurez besoin d'utiliser l'un de vos sélecteurs CSS standard pour déterminer quel élément vous ajouterez le dégradé.

  2. Utilisez la règle background-image.

    Un dégradé est une forme particulière de l'image. Vous pouvez utiliser la règle background-image pour appliquer un dégradé à l'arrière-plan de tout élément, y compris l'ensemble du corps de la page.

  3. Appelez le gradient linéaire- fonction.

    Quelques éléments de CSS exigent parenthèses parce que techniquement, ce sont des fonctions. La distinction n'a pas d'importance en ce moment, mais vous avez besoin d'incorporer les parenthèses lorsque vous utilisez ce type de valeur. La gradient linéaire- est une fonction technique.

  4. Déterminer la direction du gradient va couler.




    Vous pouvez faire un flux de gradient dans la direction que vous voulez à l'intérieur de l'élément. Indiquant gauche provoque l'élément à couler de gauche à droite. Vous pouvez utiliser pour circuler de haut en bas, ou en haut à gauche pour aller de haut en bas de gauche à droite. Utilisez une combinaison de haut, à gauche, en bas et droit. Vous pouvez également spécifier un angle en degrés, comme démontré dans l'exemple suivant.

  5. Indiquer une couleur de départ.

    Utilisez l'un des outils de couleurs standard (noms de couleurs, les couleurs hexagonales, rgb () / RGBA (), ou HSL ()) Pour déterminer la couleur de début.

  6. Indiquer une couleur de fin.

    La dernière couleur indiquée sera la couleur de fin du dégradé. Le gradient coule depuis le début à mettre fin à la couleur uniformément.

  7. Répéter l'opération avec les extensions du navigateur.

    Vous aurez besoin d'ajouter des variantes pour les navigateurs spécifiques. Vous aurez besoin de faire une nouvelle version de la image de fond règle pour chaque fournisseur majeur.

Comment faire un gradient plus intéressant

Comme vous regardez à la case 2, vous verrez un gradient plus complexe montrant de multiples couleurs et un angle intéressant.

 # box2 {background-image: linear-gradient (75deg, rouge, blanc 33%, 66% blanc, bleu) -background image: -moz-linear-gradient (75deg, rouge, blanc 33%, 66% blanc, bleu ) -background image: -webkit-linear-gradient (75deg, rouge, blanc 33%, 66% blanc, bleu) -}

Voici comment vous ajoutez plus pizazz à vos gradients.

  1. Utilisez un angle de direction.

    Plutôt que de préciser le sens de votre dégradé avec la norme haut/gauche mots-clés, vous pouvez spécifier un angle de départ. Les angles sont mesurés en degrés mathématiquement, avec 0 venant de la droite et 90 venant de haut en bas. Vous devez spécifier la mesure de degré avec deg, donc 75 degrés est écrit que 75deg.

  2. Ajouter autant de couleurs que vous souhaitez.

    Un gradient peut avoir un nombre de couleurs en elle. Chaque changement de couleurs est appelé arrêt de la couleur. L'exemple montre trois couleurs différentes.

  3. Déterminer où les arrêts de couleur se produisent.

    Par défaut, les couleurs sont réparties uniformément le long du gradient. Si vous voulez, vous pouvez déplacer toute couleur à apparaître n'importe où sur le gradient vous le souhaitez. Les points d'arrêt de couleur sont indiqués par des pourcentages. Il est pas nécessaire d'ajouter un emplacement pour le premier et le dernier arrêt de la couleur, car ils sont présumés être de 0% et 100%.

  4. Créer une bande de couleur en fournissant deux arrêts de la même couleur.

    Encadré 2 dispose d'une bande blanche. Pour obtenir cet effet, deux arrêts de couleurs ont été produites avec du blanc, celui qui apparaît à 33%, et l'autre à 66%. Cela rompt le gradient à peu près en trois tiers.

  5. Mettez deux couleurs au même endroit pour un changement brusque de couleur.

    Si vous voulez un changement brusque de couleur, les choses simplement deux couleurs différentes au même pourcentage.

  6. Répétez l'opération pour tous les navigateurs.

    Encore une fois, vous aurez besoin d'examiner les différents navigateurs jusqu'à ce que cette technique devient plus normalisé.

Comment construire un dégradé radial

CSS3 prend en charge un second type de gradient appelé le dégradé radial. L'idée de base est la même, à l'exception plutôt que de suivre une ligne droite comme un dégradé linéaire, un dégradé radial semble découler d'une tache centrale dans l'élément et rayonner vers l'extérieur.

Le dégradé radial de base figurant dans la case 3 est créé avec ce code CSS:

 # box3 {background-image: radial-gradient (blanc, bleu) -background image: -moz-radial-gradient (blanc, bleu) -background image: -webkit-radial-gradient (blanc, bleu) -}

Comme vous pouvez le voir, le dégradé radial base est créé un peu comme un dégradé linéaire, sauf qu'il utilise la gradient radial- fonction à la place de la gradient linéaire- fonction.

Les dégradés radiaux ont beaucoup d'options, ce qui les rend très prometteur, mais le support du navigateur pour ces différentes normes est assez inégal. Box 4 a un dégradé radial avec trois couleurs:

# box4 {background-image: radial-gradient (rouge, blanc, bleu) -background image: -moz-radial-gradient (rouge, blanc, bleu) -background image: -webkit-radial-gradient (rouge, blanc , bleu) -}

Il est également possible de changer la forme du gradient de cercle en ellipse, pour changer le centre du dégradé à un point différent à l'intérieur de l'élément, et de préciser les étapes de couleur. Vous aurez besoin de vérifier les spécifications actuelles de voir comment ces choses sont faites, car ils sont encore très expérimental.


» » » » Comment utiliser les dégradés CSS3