L'essentiel des CSS

Appliquer des dégradés linéaires

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les dégradés de couleurs possèdent autant de versions d'utilisation qu'il y a de versions de navigateurs. Leur utilisation, au sens large, demande une formation dédiée. Vous allez couvrir la version standard retenue pour ce cours.
05:18

Transcription

Travailler les dégradés de couleurs en CSS, c'est toute une histoire. Avec l'évolution qu'on a eue au travers des navigateurs entre le positionnement exact de ce que chaque développeur voulait interpréter dans la création de dégradés, je vous invite, si vous travaillez sur un parc large de navigateurs, couvrir un ensemble assez large de navigateurs, je vous invite à vous rapprocher de notre catalogue et à prendre une formation spécifiquement dédiée aux dégradés de couleurs en CSS pour aller plus loin. Ici on va aborder uniquement les dégradés qui pourront être faits dans les navigateurs contemporains, les navigateurs modernes standards et depuis les recommandations qui ont été faites. Alors pour faire un dégradé, c'est juste un arrière-plan, un background Dans lequel on va placer linear-gradient, mot-clé ici, qui va permettre de faire un dégradé linéaire. Il suffit de mettre une couleur de départ et d'arrivée et hop, le tour est joué. On passe dans un navigateur, on vérifie... Et voilà, on a un dégradé, c'est très simple. Le fait est qu'on peut ajouter autant de couleurs qu'on veut. On est pas limité à deux couleurs. On peut en avoir une de départ, une intermédiaire, une autre intermédiaire, une d'arrivée, etc. Là, c'est obtenir un dégradé sans aucun réglage. On va pouvoir cependant définir à partir de quand on souhaite que les couleurs interviennent. Alors on reste toujours sur deux couleurs, mais ça marche pareil peu importe la couleur. Et vous pouvez dépasser 100%, c'est-à-dire que ce pourcentage-là, on va dire que je pars de 0% à 100%, va définir à quel moment la couleur va-t-elle commencer ou s'arrêter. Donc si maintenant je passe à 20%, si j'actualise mon navigateur, vous voyez que la lumière a bougé, elle est plus dans la partie haute que dans la partie basse. Alors que se passe-t-il si on indique directement deux couleurs identiques ? C'est fabuleux parce qu'en fait, on va dire qu'on ne veut pas de dégradé. On verra justement que dans la répétition, ça va être vraiment intéressant pour nous pour pouvoir faire une rupture franche. Si je dis que j'arrête cette première couleur à 50%, je commence la seconde à 50%, automatiquement, mon dégradé n'existera plus, il y aura une rupture directe entre les deux couleurs et on a bien un trait, première couleur, deuxième couleur. On verra que dans la répétition, ça peut servir à faire du hachurage, par exemple, ce qui est assez sympa. Pour l'instant on n'a pas contrôlé le sens du dégradé, car depuis le début, on le fait de haut en bas, mais on pourrait le vouloir horizontalement, en angle, etc. Donc on a cette possibilité de régler les angles. Alors ça a été toute une bataille, pour trouver la meilleure façon de définir le mot-clé de l'angle. Aujourd'hui ce qui est retenu, c'est une ouverture la plus totale. Ici on va travailler sur les derniers mots-clés en date. Avant on écrivait directement left, right ou des degrés. Ici on peut écrire to-bottom-left, c'est la nouvelle syntaxe, to-top-right, to-top directement, peu importe l'amalgame qu'on va faire. Juste, avant d'aller plus loin, voilà ce que nous dit l'éditeur, attention c'est rouge, l'éditeur fait une proposition en groupe, une proposition de réécriture. Donc ici on peut utiliser soit un angle, soit un mot-clé. Et ce mot-clé, on va pouvoir l'indiquer de manière side-or-corner, c'est-à-dire qu'on va pouvoir utiliser left, right, top, bottom, le mixage des deux avec le préfixe to devant. Et pour l'angle, toujours dans l'éditeur draft, on peut utiliser du degré, du gradient, du radian ou du turn. Les degrés, tout le monde connaît, les gradients et les radians également, ça vous rappelle des choses comme 2π par exemple, et vous pouvez utiliser des tours, vous pouvez dire par exemple un tour ou un quart de tour. Attention, un quart de tour ne s'écrit pas 1/4, ça s'écrit 0.25. Donc on peut utiliser toutes ces unités de mesures pour définir les angles. Donc si je reviens sur ma page, j'ai utilisé to-bottom-left, donc je lui ai dit de partir du point diamétralement opposé, donc de top-right, et de descendre vers bottom-left. Et si je passe dans le navigateur pour tester et qu'on actualise la page on a bien notre dégradé qui part dans ce sens. Maintenant la dernière approche qu'on peut utiliser, c'est la répétition. Et ici la répétition, qu'est-ce c'est ? Ça va être un autre mot-clé dans le background, donc on va pas utiliser un linear-gradient, mais on va utiliser un repeating-linear-gradient. Ici j'utilise les degrés pour montrer qu'on est pas obligés d'utiliser des mots-clés, on va partir à 22°, on va mettre une première couleur, cette première couleur, on va l'arrêter à 10 pixels et on va enchaîner à 10 pixels la deuxième couleur qu'on va faire aller jusqu'à 20 pixels, et tout ça va se répéter. Ce qui fait qu'on va pouvoir faire un hachurage très rapidement avec repeating-linear-gradient. Voilà donc pour les dégradés linéaires, vous avez couvert toutes les possibilités que l'on peut aborder. Bien entendu, vous pouvez avoir autant de couleurs que vous souhaitez dans les dégradés et vous pouvez les composer d'autant de couleurs que vous le souhaitez, en pouvant, à chaque fois, définir le pourcentage à partir duquel vous souhaitez que la couleur démarre ou s'arrête. Attention, vous pouvez quand même excéder les 100% et placer les couleurs au-delà pour avoir des effets très ponctuels sur les bordures de dégradés.

L'essentiel des CSS

​Explorez et assimilez les outils de base des CSS pour en comprendre les interactions visuelles. Structurez et gérez ainsi l’apparence et le visuel de vos sites web.

5h09 (54 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :28 avr. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !