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 des bordures d'images

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les bordures peuvent être constituées d'images. Les propriétés qui les définissent vous permettent un large choix de possibilités et de réglages.
03:20

Transcription

Les bordures peuvent également être constituées d'images. Alors on va déjà préparer une image un peu particulièrement, on va la découper en trois. On pourrait la découper différemment puisqu'on va voir qu'on peut tout paramétrer. Là, on va faire un carré, une matrice de neuf, donc trois sur trois. À chaque angle, je souhaiterais avoir un rond, et dans chaque hauteur et chaque largeur, je souhaiterais étendre cette ligne. Ce que je vais donc faire c'est découper et mesurer combien fait chaque slice, chaque découpe dans cette image. On est partis sur une image de 90 pixels, ce qui fait 30 pixels chacun. Maintenant, au niveau de ma bordure image sur ce rectangle-là, je vais m'appuyer sur ce que le W3C nous propose, c'est-à-dire que pour les border-image, on doit définir l'image source, donc où se trouve le fichier, le slice, cette fameuse dimension de découpe que je veux, comment je vais gérer la largeur qui va s'étendre, donc qui va faire partie entre les deux slices du bord, le outset, est-ce que je veux décaler mon élément sur le tour et comment je veux répéter cette image à l'intérieur. Alors regardez, si je viens sur mon fichier de test, je vais dire que je vais avoir une bordure qui va être le fichier image en question, donc ce fichier image, le slice qui fait 30 pixels ici, donc je reviens ici et je dis que j'ai un slice de 30, puis je vais dire que je veux remplir la partie intermédiaire entre chaque slice. C'est-à-dire que si je regarde bien, je vais avoir un premier slice en haut qui fait 30 pixels, un slice en bas de 30 pixels, un slice à gauche de 30 pixels, un slice à droite de 30 pixels. Eh bien, ce que je veux faire entre eux, c'est remplir. Et de quelle manière je vais le remplir ? Eh bien, je pourrais dire en étirant, donc stretch. Comme c'est un rectangle, il va subir la déformation sans souci. Ensuite, est-ce que je veux un offset ? Oui, je peux en vouloir un ici... mais je ne vais pas le mettre pour l'instant, je vais le commenter, et je vais dire que je veux une largeur de 30 pixels. Ce qu'il ne faut pas oublier de faire, c'est de définir un style solid pour être sûr que si l'image ne se charge pas, ça ne laisse pas une bordure blanche. Alors pour l'instant, je vais supprimer cette partie-là... j'actualise et on voit bien qu'on a notre rectangle, la bordure s'est étendue à l'extérieur, notre image s'est placée à l'intérieur, donc tout est nickel. Si j'avais une largeur plus faible, si j'avais par exemple 10 pixels au lieu de 30 pixels, regardez, ça va réduire ma bordure. Donc il a les références de ce qu'il doit aller piocher au niveau fichier image, donc ça le dérange pas de faire une bordure plus étroite. Donc si vous avez un fichier de type SVG, vous pouvez vous lâcher, vous avez des frises qui vont pouvoir bien travailler. Si maintenant je reviens à mon 30 ici et que je replace mon offet, regardez ce qu'il va se passer, l'arrière-plan est gris... regardez, la bordure va se placer à l'extérieur du outset. Là j'ai mis 30 pixels puisque ma bordure fait 30 pixels, mais si je mets 15 pixels, à cheval, eh bien la bordure va venir manger autour de mon rectangle. Donc on peut arriver à jongler avec des choses, surtout que vous allez pouvoir apporter également à vos arrière-plans, énormément de richesse. Donc en complétant les arrière-plans en les terminant par des bordures qui pourraient être des bordures image, vous pouvez vraiment orner les boîtes de dialogue avec un degré de précision et de complexité qui peut être assez intéressant.

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 !