L'essentiel des CSS

Explorer les couleurs et les modes

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Vous allez tout d'abord commencer par faire le tour des différentes valeurs utilisables et disponibles en CSS.
04:02

Transcription

Comme pour tous les modules dans CSS jusqu'à présent, exprimer des couleurs n'est pas limité à une simple définition. Vous allez voir qu'il y a beaucoup de possiblités de valeurs pour définir une couleur. Déjà, quand on doit définir "Aucune couleur", il existe un mot-clé qui s'appelle "transparent" et qu'il est préférable d'utiliser plutôt que d'écrire en blanc sur blanc ou en vert sur vert. Essayez plutôt de passer par ce mot-clé "transparent". Faites cependant attention à sa prise en charge pour Internet Explorer : jusqu'à 8, il n'était pas géré. De la même manière, si vous avez parfois un contenu qui a une couleur définie, si vous devez utiliser une bordure à l'intérieur de ce contenu, si vous faites"currentColor", vous allez utiliser la couleur actuellement utilisée. Donc, si vous changez la couleur du contenu, vous changerez aussi la bordure, par exemple, définie en "currentColor", ou d'autres propriétés. Faites là encore attention à la prise en charge par des navigateurs de type Internet Explorer 8. Au niveau des mots-clés, vous pouvez utiliser un grand nombre de couleurs prédéfinies par le W3C, comme "olive", "grey", "dark", etc. Il y a énormément de couleurs. Vous allez pouvoir les utiliser directement. Assez intéressant, donc, surtout si on travaille sur des démonstrations, sur des cours, car on sait déjà de quelle couleur on parle, alors qu'avec des couleurs en hexadécimal ou en RVB, ça ne parle pas forcément à tout le monde. Cependant, une couleur en RVB va pouvoir être déclinée et exprimée de plusieurs manières. On verra qu'en hexadécimal, où on utilise une base 16 ; nous ne sommes plus dans le décimal, où on compte de 0 à 9, arrivé à 9, on repart à 0, mais on met 1 dans les dizaines. Là, on va compter de 0 à F. Une fois qu'on arrive à 9, il y a A, B, C, D, après, une fois arrivé à F, on remet le compteur des F à zéro et on repasse dans l'unité 1 à côté. L'hexadécimal est une couleur très ancienne utilisée sur le web, qui permet d'avoir trois couches, les deux premiers digits concernent le rouge, les deux seconds, le vert, et les derniers, le bleu. On va pouvoir avoir des modes courts ou longs. On le verra en détail tout à l'heure dans une illustration par le code et donc ça permet de représenter les 256 couleurs de la palette de couleurs. On a aussi la possibilité d'utiliser le "functionnal notation" qui va cette fois-ci nous permettre d'utiliser 255 valeurs par couche RVB. On va donc pouvoir définir, de la même façon, le rouge, le vert et le bleu, soit en notation classique, donc de 0 à 255, soit en notation de pourcents, de 0 à 100 %. Le RVB peut également être représenté avec une couche alpha dans sa "functionnal notation" : vous allez ajouter un quatrième paramètre à la propriété rgb, ici rgba, et avant le paramètre, ici au final, qui va partir de 0 à 1 en passant par toutes les valeurs décimales et intermédiaires pour définir le degré de transparence de la couleur. L'objet ne sera pas transparent, mais la couleur qui est utilisée sera transparente. On va donc pouvoir distinguer les superpositions de couleurs. Ensuite, vous avez une merveille qui est la prise en charge par les CSS des Teintes Saturation Luminosité, et je trouve ça quasiment incontournable. Je trouve que cette valeur est La valeur à utiliser pour travailler avec les couleurs. Donc, Teinte Saturation Luminosité en français, TSL, mais dans les CSS en anglais, on utilise Hue Saturation Luminosity, qui est "hsl". Et là aussi, on va définir une première valeur, la valeur de la roue chromatique, en degrés. En pourcentages, la saturation de cette couleur, Et en pourcentages, sa luminosité. Enfin, il existe également la Teinte Saturation Luminosité + alpha. On va également ajouter un paramètre supplémentaire qui sera l'alpha, partant de 0 à 1. Et enfin, les derniers systèmes, peu recommandés, à utiliser avec parcimonie, ce sont les couleurs et les systèmes d'extension, surtout dans des applications qui doivent s'intégrer dans un environnement. Il sera plus simple d'utiliser des paramètres propres au système d'exploitation, plutôt que d'aller les redéfinir car vous êtes sur iOS, Android, Mac, PC, etc.

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 !