L'essentiel des CSS

Expérimenter les diverses valeurs

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Passez à la mise en pratique en travaillant directement dans le code. Vous allez appréhender leur syntaxe et leur exploitation.
07:39

Transcription

Passons à la mise en pratique. On a un fichier HTML qui est composé de deux feuilles de style css, un reset pour initialiser et surtout un fichier 04_01.css ici celui-ci, qui va contenir la mise en forme de toutes les petites palettes colorées que l'on va utiliser. C'est pas bien violent, c'est simplement de la mise en forme des titres et des petits blocs qui vont contenir les couleurs, du texte qui va définir la couleur et des colonnes qui vont définir quatre colonnes pour quatre approches. Première approche : les valeurs. On a un article qui contient une section classe valeur, un titre valeur, et cinq Div qui vont utiliser la couleur transparente, la current color, le mot clé, le RVB, le TSL. Ici, si je définis première valeur : le transparent, je vais dire : background-color : transparent donc on va avoir un petit rectangle qui aura une couleur transparente. Ensuite, on va utiliser la currentColor Ici, aucune couleur n'est définie. Puisqu'aucune couleur n'est définie, on va remonter au niveau du parent, dans le Div. Est-ce qu'il a une couleur définie ? Non. Qui est le parent ? C'est le body. Dans le body, c'est le light grey donc théoriquement, le currentColor ce sera du light grey Si on continue maintenant les mots clés, on a des background-color olive. Alors ici, j'ai utilisé olive, comment peut-on connaître toutes les couleurs que l'on a ? Eh bien, encore une fois, le W3C qui va toute nous les lister, et va nous donner en plus leur traduction en hexadécimal, RVB et functional RVB, voilà directement toutes les couleurs. On n'a pas de TSL à ce niveau-là. Mais déjà, voilà, on a leurs correspondances... Voyez, il y en a une palanquée. Et ensuite, on retrouve dans toute la partie basse toutes les System Colors que l'on n'explorera pas mais qui sont regardées, c'est-à-dire si au lieu de marquer currentcolor je marquais ActiveBorder, je prendrais la couleur de ma bordure active de la fenêtre active actuellement du système. Voilà, c'est assez intéressant là-dessus. Pour ces deux types de couleur, c'est à dire les couleurs mots clé et les couleurs system, je vous invite à vous rapprocher de cet excellent article sur Mozilla : Color Value, qui nous permet déjà d'avoir toutes les couleurs comme l'a fait le W3C ici et quand on défile et qu'on arrive dans la partie basse, on a également la description de hsl, de rgb, de hsla, de rgba, plus, voyez ici le petit pouce versé disant : attention pour l'usage de toutes ces couleurs système, et Mozilla, elle a rajouté aussi toute cette palanquée de couleurs système qui peuvent être intéressantes et être réutilisées. Si vous faites un intranet purement Mozilla, n'hésitez pas à venir vous servir de ces couleurs. Alors, retournons maintenant sur notre page ici, on a dit motclé on va utiliser olive, qui est une des couleurs de la palette, on va dire que le background-color on va utiliser un rgba qui est 128, 128 avec un1 plein pot pour l'opacité et un hsla donc une teinte saturation luminosité avec un alpha sur une couleur déterminée ici. Si j'enregistre et qu'on bascule dans un navigateur pour aller tester... Voilà, il suffit d'actualiser la page et on se retrouve bien avec notre transparent et cette couleur qui est la fameuse couleur currentcolor. Au niveau des mots clés, on a le olive, ici, en RVB on a l'identique olive mais en rvb et ici, en TSL, l'identique mais en tsl. Si je reviens maintenant, juste un petit détail, ici à ce niveau-là et que je retourne dans le code ici et que je dis : je donne une color à mes Div ici, CRTL+S donc ce sera du blue-violet, si je reviens dans la page de test ici, on voit bien que le currentcolor va s'adapter et donc ici, on a bien écrit avec la couleur current qui est utilisée ici et le background prends la couleur. Et ici, si vous regardez, vous avez bien la couleur current qui est utilisée, d'accord ? Donc je vais revenir sur la couleur ici, et on va continuer notre exploration ici à ce niveau. Donc, tout simplement, on a rajouté ici des valeurs jaune, longue, courte avec les valeurs indiquées à l'intérieur. Ici, on a rajouté les classes donc un background-colorfff0 si je mets le rouge à fond, le vert à fond et le b inactif, on va avoir du rouge et du vert, ça va donner du jaune. Donc on va avoir ce jaune, on peut l'écrire aussi de manière longue une couleur qui serait 99000 par exemple et on peut l'écrire d'une manière courte, qui serait 900. Ça, ça peut être compris. Donc si j'enregistre ici sur le hexadécimal et que je bascule à cette partie-là eh bien on regarde, on a bien nos couleurs qui sont données. Les deux couleurs qu'elles soient écrite en longues ou en courtes sont identiques, il n'y a pas de soucis. On va regarder du côté maintenant du RVB. Donc, pour le RVB, on avait vu qu'on pouvait représenter une couleur soit dans le functional soit avec des valeurs de 0 à 255 ou des valeurs en pour cent. et puis on va voir qu'on peut faire du blanc aussi en RVB. Pour faire cela, c'est simple, on va dire que pour faire un cyan ici, alors là c'est du blanc donc ça va être (255, 255, 255), tout est à fond, pour faire maintenant le cyan classique, on va utiliser un (0, 255, 255) c'est-à-dire que si je mets le vert et le bleu à fond, j'obtiens du cyan et si maintenant je veux représenter la même chose mais en pourcentage, et bien je vais simplement dire : je fais 0% de rouge, 100%, 100%, ce qui revient exactement au même. J'enregistre, on bascule dans l'interface de test, on actualise la page, et voilà, on a bien nos deux cyans qui sont ici identiques exprimés soit en octal de 0 à 255 soit en pourcentage et ici notre blanc qui met toutes les valeurs à fond. On va maintenant terminer par le TSL. Donc, même approche, on va rajouter toute une partie HTML avec un mauve lumineux, un mauve saturé, un mauve tout court, un orange ou un bleu. Alors si je viens dans les classes ici pour regarder cette partie-là, si j'utilise donc un mauve sursaturé et regardez, je vais avoir le mauve qui est le 330, je mets à fond sa couleur de saturation, à fond sa luminosité, en fait j'aurais un blanc pur et dur. Si je mets un mauve plus... je vais garder les mêmes valeurs ici, mais par contre je vais descendre sa luminosité à 50, et si je veux vraiment avoir un mauve, je vais mettre ici, pareil, le même mauve, 330, par contre j'aurais une saturation a 50%, une luminosité a 50% et j'arriverais à mon vrai mauve. Pour le orange, on va utiliser un orange, je vais le saturer au maximum avec une luminosité à 50 et si par contre je veux un bleu, je vais garder toujours la même nuance, c'est simplement la couleur qui va changer. Si j'enregistre cette partie-là, que je bascule dans le test ici, je vérifie, on a bien notre mauve lumineux qui est devenu blanc, un mauve saturé qui est un mauve extrêmement riche en couleur. Ici, le véritable mauve reste a 50/50, le orange et le bleu. Voilà, donc, on reviendra sur le TSL parce que c'est un mode de couleur qui est exceptionnellement génial, et je vous montrerai ce que je trouve fabuleux dans ce mode de couleur dans un film complètement dédié. Alors, ce qui est important d'avoir ici quand on travaille la couleur, c'est d'avoir un convertisseur en ligne rgb.to qui va vous permettre de convertir toutes les couleurs que vous allez saisir directement en rgb, en hsl, en hsb, en css pur et dur et rgb ou hsl et en hexadécimale. Bien sûr, vous n'avez pas la couche alpha, mais il vous suffit simplement de rajouter un a devant chacune des fonctions et puis de rajouter un quatrième paramètre qui part de 0 à 1. Ensuite, je vous conseille d'utiliser l'outil paletton qui est assez sympa parce qu'il va nous permettre de travailler sur des monochromes ici et donc ça va pouvoir nous donner toutes les couleurs que l'on va pouvoir exporter, bien sur en css, donc je vous laisse venir le prendre en main, et puis le fameux Adobe Color qui maintenant s'appelle Adobe Color CC qui est un outil fabuleux qui va nous permettre ici de venir travailler justement dans tous les modes de couleur et si vous regardez, vous avez la roue chromatique, on y reviendra plus tard après avoir vu le TSL justement.

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 !