L'essentiel des CSS

Parcourir d'autres propriétés d'arrière-plans

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Il existe encore quelques propriétés intéressantes en ce qui concerne les arrière-plans. Vous allez également voir comment empiler autant d'arrière-plans que vous voulez sur un même élément.
02:13

Transcription

Comme on a passé 4 films à étudier les diverses propriétés d'arrière-plans, et qu'en plus background, c'est quand même une version abrégée, voyons les diverses propriétés que l'on peut avoir. Donc déjà, on peut régler les couleurs quelque soit le mode, y compris l'utilisation de dégradés en arrière-plan. On va avoir la propriété image, background-image, qui a va être définie par une URL et qui nous permettra de poser un pavé au fond de notre élément. On va pouvoir répéter ce pavé au travers de la propriété repeat dans le sens horizontal puis vertical, avec des repeat-x et repeat-y, et no-repeat éventuels ou repeat qui est par défaut. Ensuite, on va pouvoir aussi le répartir avec un petit espace en utilisant space ou au contraire étirer ou compresser pour pouvoir rentrer et faire un damier à peu près global sur la surface avec round. On a aussi la possibilité de positionner notre élément, toujours dans un sens horizontal, puis vertical, avec des pourcentages, des valeurs ou des mots-clés comme top, bottom, left, right ou center. On va ensuite pouvoir jouer sur la taille en disant qu'on souhaite que ça rentre complètement dans le cadre ou alors que ça couvre le cadre. On pourra également utiliser des valeurs en pourcentage ou numéraires et bien entendu, la valeur par défaut qui est auto. Deux propriétés sympathiques qui se confondent souvent, elles sont traitées d'un seul bloc, qui sont origin et clip. Toutes les deux possèdent trois possibilités : border-box, padding-box et content-box, qui vont nous permettre, pour la première, de décaler l'origine. Donc on va la décaler soit au bord de la bordure, soit au départ du padding, soit au départ du content-box. Alors que la deuxième, clip, va être le cadre, le masque qui va nous servir à écrêter l'image. Donc les propriétés qui peuvent être utilisées sont border-box, padding-box et content-box. Et enfin, la dernière propriété qui est attachment, qui va permettre d'avoir trois propriétés, scroll, fixed ou local, qui nous permettra de faire défiler ou pas de manière globale ou locale directement nos arrière-plans. Voilà, je pense qu'il était bon de pouvoir résumer à nouveau rapidement l'ensemble de ces propriétés d'arrière-plans, puisque quand on travaille en arrière-plan, on utilise principalement background tout court en mode abrégé.

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 !