Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

L'essentiel des CSS

Utiliser TSL en CSS

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
CSS intègre le mode de couleur TSL (Teinte Saturation Luminosité). Vous allez comprendre en quoi ce mode peut vous simplifier la vie et vous aider à composer rapidement vos palettes et les contrastes de mises en page.
10:23

Transcription

CSS intègre le mode de couleur TSL. On va voir que depuis que CSS intégre le mode TSL, ça ouvre bien des portes quant à l'utilisation des couleurs. Tout le monde n'a pas forcément un profil de designer pour pouvoir bien interpréter les couleurs, surtout lorsqu'elles sont exprimées en RVB. C'est un peu compliqué d'arriver à comprendre le mélange des couleurs additives, soustractives... ça devient un peu compliqué. Ici, on va voir qu'avec TSL, c'est beaucoup plus souple. Comment ça fonctionne ? Ça fonctionne tout simplement avec une roue chromatique qui s'exprime en degrés puisqu'on part de 0 à 360° sur un cercle. Ne vous inquiétez pas, on ne va pas faire de trigonométrie mais un cercle ça fait 360° SI je pars de 0 qui est dans les rouges à peu près, jusqu'à 360, je reviens dans les rouges. Si je prends un angle de 30°, j'exprime un orange à peu près. Jaune orange. Pour exprimer une couleur, on va partir de 0 à 360° pour cibler la couleur. Une fois qu'on a ciblé la couleur, on va la saturer ou la dé-saturer. Si on enlève totalement la saturation de couleurs, on arrive dans du gris. Si on monte au maximum cette couleur, on arrivera dans du... Excusez moi ce n'est pas du gris. Ce sera plutôt une absence de couleur. Et si je pars au contraire à l'opposé, je vais saturer en couleur. Je vais mettre le maximum de ce orange à 100%. Donc là, c'est là où va intervenir ensuite le troisième paramètre qui est la luminosité. La luminosité va partir dans l'absence de lumière. Quand il n'y a pas du tout de lumière, c'est le noir. Ou alors, il y a sursaturation de lumière et là on vient dans le blanc. Pourquoi je disais le gris tout à l'heure ? Tout simplement parce que pour avoir une couleur médiane, une couleur orange, on va devoir se positionner à 50% pour avoir la couleur. Le plus simple c'est de passer dans un exemple. Si je prends un code HTML qui ne contient rien si ce n'est deux liens déjà vers des feuilles de style CSS, la première est pour réinitialiser, qui ne sert à rien pour les couleurs, mais qui sert pour la mise en page, des pastilles de couleur qui vont s'afficher et puis ici pour le CSS n°2 qui lui va juste gérer l'affichage de ces pastilles. Je vous invite à venir le consulter si ça vous intéresse pour creuser et apprendre, voir comment on peut mettre des pastilles en place. Mais vraiment nous allons rester focalisés à l'intérieur des styles en ligne dans la page pour définir ces couleurs. Commençons déjà par mettre en place toute une série de sections avec des div qui vont représenter chacune les couleurs que nous allons travailler pour nos pastilles. Si je travaille la couleur orange, on va la mettre à 30° On va la mettre à 100%, donc je vais placer la saturation de ma couleur au maximum et je vais mettre une luminosité à 50%. Pour travailler sur un orange clair, je vais simplement augmenter ma luminosité. Je vais l'éclairer un peu plus. Je vais passer à 60%. Par contre, pour le foncé, je vais un peu le noircir donc je vais enlever de la luminosité et vais passer à 40%. Si je passe ma luminosité à 100% je vais brûler mon orange. Ici je vais faire ma luminosité à 0%, Je suis dans le noir, je vais boucher mon orange. Maintenant on va voir que si je travaille à 50%, comme on l'a vu sur le orange. Ma luminosité est normale. On va dire que je vais pouvoir jouer sur la saturation de ma couleur. SI je le sature, je pars de 50% je vais aller bientôt vers 75% et si je le dé-sature on partira vers 25%. C'est vrai que je suis parti sur la condition que je considérerais à 50%. Alors qu'on sait bien que le orange va être à 100%. En gros, si je reproduis toutes ces valeurs-là dans une feuille de style CSS, il me suffit simplement d'ajouter les classes qui correspondent à orange, orange clair, orange foncé etc. dans ma feuille de style pour pouvoir obtenir le résultat. Là, je mets toutes les mêmes valeurs. La seule classe que j'utilise txt c'est simplement comme c'est bouché, ça va être du noir. Si j'écris en noir sur noir, on ne le verra pas, donc j'ai mis une couleur txt qui va correspondre à un light-blue pour écrire en plus clair sur le fond de couleur. J'enregistre. Je passe dans la feuille de tests et j'actualise. Là, on voit bien que pour nos couleurs, on va avoir le orange à 100% de saturation, 50% de luminosité. Si la luminosité augmente, il s'éclaire. Si elle diminue, il se fonce. Si je la surbooste à 100%, il se brûle. Si je la mets à 0%, il se bouche complètement. Et puis en travaillant avec une luminosité on a des couleurs un peu ternes. On est à 50% de luminosité. Voyez que je peux jouer sur le dosage du orange en l'augmentant ou en le diminuant. Et là, bien sûr on revient vers le fameux gris dont je parlais tout à l'heure sur le 100. Revenons maintenant sur notre roue et justement parlons de ce gris. Ici, ce gris qui se trouve au centre est une saturation de couleur qui est à 0. Donc on va pouvoir jouer sur des niveaux de gris. Il suffit de rajouter du HTML, oups là j'ai pris du CSS, on va le rajouter ici. tout le CSS qui correspond. Le gris va être... je reste sur une couleur de 30... mais je peux passer sur une couleur en 130, peu importe la couleur que l'on va utiliser. Dans la mesure où cette couleur sera totalement dé-saturée à 0% on aura forcément aucune présence de couleur. Donc on aura que du gris. Ce gris va venir d'où ? De la lumière que l'on va injecter. Si on injecte de la lumière à 50% ici, on aura un gris à 50% peu importe la couleur qu'il va y avoir. Si je l'augmente, forcément on va avoir un gris clair. Si je le diminue, on va avoir un gris foncé. Si je l'enlève complètement, on aura du noir. SI je le sursature, on aura du blanc. Donc on pourra faire comme ça, une couche de niveau de gris, là il ne me reste plus qu'à rajouter mon fichier HTML qui correspond tout simplement à la même chose que l'on a vue dans les CSS. et maintenant de venir actualiser. Vous voyez qu'on peut avoir nos palettes de gris très facilement, c'est très simple à travailler. Lorsqu'on travaille en couleur, on peut avoir besoin de ce qu'on appelle les couleurs analogues. Qu'est-ce que les couleurs analogues ? Ce sont toutes les couleurs qui vont se situer de part et d'autre de notre couleur d'origine. On a vu notre couleur qui ici était en 30, je l'ai enlevée pour plus de visibilité. Si je rajoute 30° en partant vers la gauche ou 30° en partant vers la droite, si je les retranche, je les ajoute. Je vais passer à 360 ou à 60, je vais avoir des couleurs analogues. Comme ça, je pourrais venir écarter cet angle, le rendre plus aigu ou plus obtu pour avoir des couleurs qui seront semblables à celles-ci, qui seront analogues. On peut également arriver dans ce qu'on appelle la couleur complémentaire. La couleur complémentaire, c'est quoi ? C'est la couleur qui est complètement diamétralement opposée à la roue chromatique qui est à 180° de plus. Si je prends mon 30°, je lui ajoute 180°, je vais arriver à 210°. On peut avoir ce qu'on appelle les complémentaires analogues. Je pourrais très bien avoir la couleur orange qui est utilisée et utiliser des couleurs complémentaires analogues, c'est à dire qui seraient analogues à la complémentaire. donc qui seraient situées à 30° de part et d'autre de ma couleur complémentaire et là qui seraient à 180 et 140. Je vous propose d'aller tester cela directement. Il suffit d'ajouter dans le fichier HTML la partie ad hoc. On a notre orange qui était en 30, 100, 50. On est d'accord. Je vais faire exactement la même chose mais je vais ajouter 30 ou retrancher 30. On aurait pu écrire 360 ici, ça aurait été pareil, ou le 0. Ensuite, on va prendre la complémentaire : 30 +180 = 210. Complémentaire 1 et complémentaire 2 qui vont être ce fameux 210 + 30 ou ce fameux 210-30 qui va nous donner le 240 et 180. Il suffit de porter maintenant le CSS ad hoc qui va aller sur la copie conforme de cette description HTML. Et de venir tester dans notre navigateur, vous voyez qu'ici on retrouve l'intégralité de ses couleurs. Les couleurs analogiques ou oranges, on sait que sur la roue chromatique, on va partir d'un côté vers le jaune, de l'autre vers le rouge. La complémentaire du orange, c'est le bleu. Et les analogues complémentaires, à 30° de ce bleu, on aura un bleu plus foncé ou un cyan. Il nous reste encore une autre possibilité, c'est ce qu'on appelle en couleur les triades. Ce sont des couleurs qui sont à équidistance les unes des autres, c'est à dire à 120° car si on divise 360 par 3 ça fait 120° à 120° de nos couleurs. Dans un sens comme dans l'autre, vous pouvez partir en soustraction ou en addition, c'est pareil. Rappelez-vous qu'au-delà de 360, si une addition devait être faite, le moteur fera le rendu tout seul. On n'a plus qu'à venir travailler ces couleurs secondaires maintenant. Pour travailler ces couleurs secondaires, on va rajouter dans notre fichier HTML, la partie ad hoc c'est à dire... C'est vraiment le CSS on peut travailler sur le CSS c'est pareil puisque l'un n'est que la copie de l'autre. Ici, le orange c'est 30, la secondaire 1 c'est 270, la secondaire 2, c'est 150. Ici, on va rajouter cette fois-ci le HTML et il ne reste plus qu'à aller tester dans notre navigateur pour pouvoir avoir le rendu visuel. Ctrl+S, pensez à enregistrer. On passe dans le navigateur, on actualise et on a bien notre couleur primaire, la secondaire 1 et 2 qui vont être les fameuses triades. Ici, on a fait le tour et vous comprenez donc que c'est beaucoup plus facile de travailler en TSL, parce que quelque part on a plus qu'à calculer ou additionner nos couleurs pour arriver à des teintes, demi-teintes, des palettes de couleurs monochromes, des palettes de gris alors que en RVB, ça devient beaucoup plus compliqué. Ça demande beaucoup plus de pratique sur la couleur. Revenons à Adobe color CC feu Adobe couleur. Vous voyez que dans la palette, dans la roue chromatique on a la possibilité de venir travailler justement sur des monochromes, en dosant l'intensité, en dosant chacune de ces couleurs directement. On va pouvoir travailler sur les couleurs complémentaires, sur les fameuses triades, sur les composites. On aura toutes ces possibilités, je vais rester sur les complémentaires. On va pouvoir travailler avec une couleur si votre couleur dominante va être ce carmin, vous allez pouvoir avoir la couleur complémentaire. Vous allez pouvoir travailler sur la luminosité de ces couleurs et sur la saturation de ces couleurs. Bien entendu, vous avez ici en RVB, en hexadécimal les couleurs mais si vous cliquez sur le RVB vous avez aussi la couleur TSL qui apparaît ici. Vous pouvez directement travailler, vous voyez, vous êtes à 1°, 93 de saturation, 70 de luminosité. C'est un outil presque incontournable pour venir nous aider à travailler sur ces fameux angles. Il n'y a pas besoin de faire de trigonométrie ni de connaître la roue chromatique. Il suffit d'avoir des outils ad hoc qui vont nous permettre de calculer tous ces angles pour nous.

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 !