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

Réviser les différentes propriétés

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
La propriété background étant un mode abrégé, faites un bref tour de l'ensemble des propriétés qui la compose.
09:03

Transcription

Voyons d'autres propriétés qui sont assez intéressantes à propos des arrière-plans. Les deux premières dont on va parler ici, sont les origines et le clip. Alors, par défaut, origine et clip sont en valeur auto. J'ai volontairement mis ici, une bordure double de dix pixels tout autour de ces deux éléments. Commençons par la partie origine. Ici, on va avoir la possibilité de travailler avec comme je vous le disais background origine, en valeur par défaut qui est Auto. Donc, ici, sur ce premier élément, voyez, rien ne se passe, c'est la valeur par défaut. Si par contre, maintenant, on utilise border-box par exemple, l'une des trois propriétés possibles. Regardez, si j'actualise, on voit bien que l'arrière-plan part sur la bordure. Vous voyez, il est passé derrière notre bordure double. Maintenant, on pourrait très bien demander de travailler avec le content-box. On va travailler alors avec le padding-box pour rester dans l'ordre chronologique, on va dire. Lorsque je mets un padding-box Control+S, si j'actualise, vous voyez, je me retrouve directement au padding, c'est-à-dire là ou le padding débute. D'accord, c'est-à-dire à l'angle. C'est un peu la valeur automatique. Par contre, maintenant, si je passe ici, sur du content-box, à ce moment-là si du padding a été défini à l'intérieur de l'image, et ici c'est le cas, (j'ai un deal avec un padding de quarante pixels), alors bien sûr, je vais en mettre un peu moins, histoire d'être plus sobre, dix pixels, voyez, je peux arriver à utiliser le background, uniquement sur la partie contenue et non pas sur la partie du padding. Donc, c'est assez intéressant de travailler cette propriété-là. Je repasse à quarante pixels pour des questions d'homogénéité sur le reste. Donc, les propriétés qui peuvent être utilisées sont border-box, padding-box, et content-box. Alors attention, tout à l'heure, je vous ai dit que le padding-box pouvait correspondre au mode auto. Oui, dans le cas ou on n'a pas décalé la bordure. Vous savez, on va pouvoir décaler la bordure avec une sorte de outset, qu'on va pouvoir définir. Dans ce cas là, faites attention, le padding resterait au niveau de la bordure de bloc sans tenir compte du fait que la bordure a été décalée. Maintenant, au niveau du clip, on a à peu près les mêmes propriétés qui sont en fait content-box, padding-box et border-box, sauf que maintenant, c'est en fait un peu différent. Alors, on peut les confondre, souvent toutes les deux ; donc ici, on va utiliser le border-box. Voilà, je l'actualise ici, il ne se passe strictement rien au niveau du border-box. Regardez, si je passe en padding-box, maintenant, Control+S, si j'actualise, il ne se passe rien. Et si je passe en content-box, rien non plus. En fait, on a l'impression que rien ne s'est passé au niveau de notre propriété. Ce qu'on va faire, maintenant, c'est demander de faire un repeat et je vais peupler l'intégralité. Regardez, ici, je suis en content-box, (oh là , j'ai une petite erreur Control+S) si je l'actualise, voyez, ici, mon image va venir se découper au niveau du contenu. C'est-à-dire que peu importe ou l'image va être placée, (là j'ai en repeat, si je n'avais pas de repeat, je n'en aurais qu'une), l'intérêt, est de voir que je ne vais pas excéder la boîte du contenu ici. Et si je mets maintenant, un padding-box, je vais donner l'impression d'être à l'intérieur, de la boîte. Et si maintenant, je mets un border-box : ici, je vais passer derrière les bordures. Alors, vous allez me dire que c'est la même chose que ce qu'on a vu ? Non, parce que regardez ici, on décale dans la partie au lieu de demander un font size de dix-huit : je vois bien que, ici, au niveau de mon content (je suis en content-box), je continue, mon image va peupler tout le fond, elle ne s'arrêtera pas. Alors que, lorsque je suis ici, en content-box, si j'actualise, regardez, l'image part exactement au même endroit que l'origine qu'on avait tout à l'heure ; sauf que maintenant, on ne déborde pas dans la partie du contenu, puisqu'après en dessous, je suis dans les marges. Ce qui est intéressant à comprendre, c'est qu'on a les mêmes valeurs. La première, va dire par où je base mon point d'origine, quelque part ; et la deuxième : c'est dans quel cadre, je vais pouvoir être aperçue. Un peu comme si on faisait un bonding-box ou un masque Pound, dans illustrator, un masque d'écrêtage, voilà. On va donc pouvoir faire ce genre de chose avec le clip, en propriété d'arrière-plan. Une troisième propriété intéressante à regarder, c'est le scrolling. Ici, par exemple, j'ai du contenu attachment, du texte que j'avais masqué. Alors ici, maintenant, je vais le verrouiller pour ne plus le masquer. Et donc, ici, si j'enregistre, on va voir apparaître, tout ce contenu en-dessous. Sauf que ce contenu, apparaît bizarre, parce que l'arrière-plan, il est bloqué. Ce qu'on va faire, vous allez voir, c'est rajouter une classe à attachment en donnant une hauteur de deux cent pixels, ici, avec une bordure, un over-flow automatique. Donc, si j'actualise ma page, maintenant (puisque c'est un over-flow automatique), je lui dis que je souhaite avoir un ascenseur, puisque cet ascenseur, si je ne mets pas en automatique, mais en hidden ici, par exemple, j'obtiens deux cent pixels de hauteur. Dès lors, je ne peux pas faire défiler mon élément, et mon contenu de texte ne défilera pas. Si je le mets en automatique, il va détecter s'il a besoin d'avoir ou pas un ascenseur. Là, il y a du contenu, donc il a besoin d'avoir un ascenseur. Bien sûr, la mollette est interprétée et peut jouer le jeu. Alors moi, ce qui m'intéresse maintenant, c'est de dire vous voyez, dans l'élément, j'ai un background, attachment-scroll. Et regardez ce qui se passe : dans le background j'ai une image sur le mur fond transparent, au fond en arrière-boutique. Et regardez, ici, j'ai un scroll, qui se passe sur le fond. Voyez, le fond monte en même temps que l'ascenseur principal, ici. Et, si je mets local ici, si je monte mon fond ici, le fond monte avec le contenu. Donc, dès l'instant ou on va mettre local, il ne va pas monter avec l'élément, Il va rester, si cet élément arrivait en haut, il va se bloquer au bloc. Si par contre, je le mets en scroll, il ne va pas monter dans le local, mais il va monter avec la partie de la page. Donc, ici ( il faut que j'actualise ), il ne monte pas avec l'élément, mais il va monter avec la page et il va suivre la page. Donc, vous avez la possibilité de le bloquer également. Vous pourrez demander à ce qu'il soit fixe et qu'il ne bouge pas. Donc, vous avez les trois possibilités de Scrolling, ici, qui vont être de dire : j'ai un scroll fixe local ou scroll. Pour mieux le mettre en application, ce qu'on va faire, on va utiliser ici, un X. Je vais mettre au body, un arrière-plan, je vais mettre cet élément-là. Ici, j'ai mon arrière, mur fond transparent, ici, sur le body. Ici, je suis en fixe, regardez, si je place une hauteur de mille pixels, qui permet d'avoir donc plus de souplesse. Et ici, voyez, je monte, j'en ai deux : ce fond, ici, si je le mets en local, la partie va monter avec l'élément, mais la partie du haut va monter et tout va suivre cette partie-là. Maintenant, si je rentre dans mon body, que je dis ''tu le mets en fixe.'' Ici, quand j'actualise ma page, on voit bien que le body monte sur l'élément, l'arrière-plan est fixe. Ici, je suis en local, on va donc pouvoir jongler sur différents arrière-plans qui pourraient être identiques. Donc, on peut faire des systèmes de par à l'axe avec des arrières-plans en CSS, alors qu'on ne toucherait pas au premier plan. Une dernière propriété maintenant, pour la route. C'est ici, qu'un arrière-plan peut être multiple. Alors cela veut dire quoi ? Çà signifie que si j'utilise deux frises : une frise bas droit BD, comme cela, et une frise haut-gauche dans ce sens-là, ce sont des PNG à fond transparent. Cela peut-être du SVG, cela peut être du base soixante quatre, cela peut être tous types de format d'images. Si ici, je dis dans mon multiple, je vais rajouter un background, et ce background, je lui mets, comme on a l'habitude, une URL, image, freeze, haut gauche, no repeat, top left. Je le place en haut à gauche de mon carré. Et qu'en fait au lieu de terminer, je place une virgule et je replace un deuxième élément après cette virgule : URL, Image, Freeze, Bas Droit, East facing, No Repeat, Bottom Ride. Et mettre encore une virgule et rajouter un linéaire gradial par exemple derrière tout ça ? Si maintenant, j'enregistre ma page et que je l'actualise je m'aperçois que j'ai un rectangle avec une frise en haut à gauche, une frise en bas à droite, et un arrière-plan de couleur qui passe à l'arrière. On a la possbilité de placer autant d'arrière-plan qu'on le souhaite. Il suffit simplement de les séparer par des virgules et faites attention, ici, on est en écriture abrégée, donc toutes les valeurs comptent. Si je veux rajouter une couleur à cet élément-là, il me suffit de rajouter la propriété couleur, mais aussi les propriétés origines, clips... Bref, toutes les propriétés qu'on a vu d'arrière-plan peuvent venir s'appliquer à chacun des arrière-plans que l'on appliquerait à un élément.

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 !