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

Gérer les bordures

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Les éléments peuvent être ornés de bordures. Les CSS vous apportent un grand nombre de possibilités. Explorez-en un grand nombre vous permettant ainsi de décorer et d'agrémenter vos compositions.
08:15

Transcription

Aux éléments de type bloc, il est possible de leur apporter une bordure. Ici, j'ai simplement manifesté chacun de ces blocs, on les a dans une simple série de div. qui vont être classés et remplis par le même mot qui sera la propriété de bordure. Ici, on a simplement des div qui vont être avec une couleur d'arrière-plan, une hauteur, une largeur et un padding pour l'écriture. Si on veut apporter une bordure à cet élément simple, un solid, on va simplement indiquer une largeur de bordure, propriété border-width de 6 px par exemple. On va indiquer un style de bordure. Ici, ça va être solide, un trait plein, et puis une couleur d'écriture. Dès l'instant où on enregistre cet élément-là, si j'actualise, on voit qu'instantanément à l'extérieur de ce bloc, va se dessiner une bordure de 6 px dans la couleur ocre et de manière solide. On verra justement le positionnement de cette bordure qui est pris en compte dans le modèle de boîte on le verra quand on explorera le modèle de boîte plus tard. De cette manière-là, on l'a écrit de manière étendue en faisant une description propriété par propriété mais on aurait très bien pu écrire simplement border la propriété abrégée, 6px, solide et la couleur. Ça aurait fonctionné exactement de la même manière. Maintenant on va pouvoir définir en manière abrégée en changeant la propriété. Si on utilise du dotted, j'enregistre, on actualise. On a du pointillé qui fait tout le tour. On a comme autre propriété dashed double groove, ridge on va s'arrêter là. Dashed c'est du trait continu, un pointillé un peu plus large. Le double nous permet d'avoir deux éléments de bordure. Le groove donne un effet de relief. Le ridge c'est la même chose mais en inversant les couleurs. Après, on a la inset et le outset ici qui vont pouvoir donner à peu près la même équation qu'on avait pour le groove et le ridge mais au lieu d'éclater la couleur en deux par bordure, on a la bordure foncée en haut et à gauche, et la bordure claire en bas et droite ou inversement. La dernière propriété qui va pouvoir être exploitée est hidden ou none pour dire: "attention, il y a une bordure qui fait x px mais elle n'est pas là, elle est cachée". Si elle est cachée, elle disparaît dans la hauteur, elle disparaît au niveau de l'espace qu'elle aurait occupé. None : il n'y en a pas du tout, ça permet de supprimer la bordure pour pouvoir surcharger une classe quand il y avait une border. Maintenant du côté de la gestion de ces bordures, on peut aller plus loin. Parce que là pour l'instant on a simplement dessiné une sorte de frise tout autour de notre bloc. On va voir qu'on pouvait très bien dire tout simplement... Alors là, on va rester dans de la description étendue. Je voudrais une bordure left. C'est à la fois une bordure étendue et abrégée. Elle est étendue dans le sens où on va définir toutes les propriétés, border-left-width, border-left-style et border-left-color en une seule mais on n'est pas sur l'intégralité de la bordure, elle ne va s'affecter que sur la bordure gauche. Si j'enregistre, ici maintenant je vais avoir une bordure à gauche ici positionnée. Donc, cela peut-être très utile dans certaines listes, dans certaines parties de paragraphes, d'annotation, etc. Mais on n'est pas limité à l'utilisation d'une seule bordure. On pourrait également ajouter une seconde bordure qui serait différente, qui ferait 6 px en solide toujours. on aurait pu changer les propriétés bien entendu mais on peut les compléter. On va mettre une à gauche, une à droite, une en-dessous, etc. On peut complètement mélanger ces éléments-là ! Alors il est intéressant de voir que les propriétés qui peuvent changer si je reviens dans la multiple double ici, je pourrais très bien avoir un border-left comme je l'ai fait jusque précédemment, je vais faire un border-bottom qui va faire exactement la même dimension sauf qu'il sera dans une couleur différente. Non seulement on voit deux couleurs différentes mais en plus une couleur différente. Si j'actualise, on a ces deux bandes-là. Moi, ce qui m'intéresse c'est justement cette prise en charge automatique par le moteur du rendu de tous les navigateurs de faire cette petite diagonale. On y reviendra un tantinet plus tard. Maintenant, on va pouvoir aussi jouer sur les angles ici. Pour l'instant on avait une bordure qui s'affichait en coin carrés. On va très bien pouvoir jouer sur des coins arrondis. Pour cela, il suffit de faire simplement un border. Alors là je fais un border tout le tour et je lui rajoute un border-radius de 20 px. A ce moment-là je vais avoir un border radius de 20px. Bien sûr si j'avais donné un border-radius plus faible, comme par exemple 4 px, ctrl+S et j'actualise, on a un coin arrondi un peu différemment. Ce coin arrondi va pouvoir être différent à chaque fois. On va se donner un petit peu plus d'espace. Je vais prendre 100 px de hauteur, si j'enregistre on voit bien que notre élément vient à 100 px de hauteur ici. On va pouvoir continuer comme ça en disant : cette fois-ci je vais mettre un border tout le tour. Mais je ferai un border-radius de 20px, alors bien entendu on a un coin de 20 px tout le long. Mais le second angle en adéquation sera de 10 px, ici lui est de 20 px, 10 px, 20px, 10 px. On peut comme ça, jouer sur les 4 angles de manière différente pour pouvoir vraiment positionner une boîte de dialogue comme on le souhaiterait. On voit très bien qu'on va commencer à partir dans des boites d'alertes, d'informations etc. Ensuite, on peut très bien avoir un cercle. C'est quoi un cercle ? Si je regarde, je vais donner maintenant une bordure à mon élément. A cette bordure, on sait que je fais 100 px... Là, j'avais une largeur un peu longue. Je fais une largeur de 100 pc et je fais une hauteur de 100px En fait je suis sur un carré. Ce carré ici, si je lui mets un border-radius de 50 %, à ce moment-là j'ai 50 % de la hauteur et de la largeur qui sont mangés par un coin arrondi et qui donc me font un cercle. si vous avec une image par exemple pour présenter votre équipe dans un site. Vous mettez une photo et autour un border-radius à 50 % et automatiquement, ça va vous faire un macaron de photo. Revenons sur ce petit angle ici. On s'est aperçu qu'on avait une petite particularité. Dès qu'on a deux couleurs différentes, le navigateur faisait une diagonale tranquille Ici j'ai préparé deux div. Deux div du fond qui sont donc formatées comme les autres div mais j'ai deux classes. Une classe flèche et une classe gauche. Une classe flèche et une classe droite. Ici j'ai une classe flèche qui va être commune aux deux. Si je souhaite dessiner des flèches, des petites flèches ici. Vous voyez, on voit se dessiner cette flèche. C'est quoi au juste ? Je vais dire qu'en haut je n'ai pas de couleur. En bas, je n'ai pas de couleur, à gauche j'ai simplement une couleur. Si au lieu de mettre, une couleur orange je mettais en transparent ça [me jouerait le jeu] Regardez. Si ici, dans la flèche je lui dit : « j'ai un border-top qui fait 20 px qui est solide et qui est transparent. » Si je fais un border-bottom qui fait 20 px, qui est solide et qui est transparent. Si je fais un background-color transparent, rappelez-vous ici on avait ce gris. Si je le fais transparent ça devrait jouer le jeu. La seule chose qu'il faut c'est qu'à gauche je lui mette un border-left de 20 px avec cette fois-ci de la couleur et à droite un border-right avec de la couleur. Regardez, si j'enregistre et que j'actualise. C'est nickel ! Mes flèches sont là. Sauf qu'elles sont un peu grandes. Il me faudrait calculer la hauteur qu'il me faudrait adapter ou pas. On a une particularité, c'est que si je dis à ma flèche qu'elle ne fait que 1 px de haut regardez ici, j'ai bien mes petites flèches qui se sont dessinées. Que se passe-t-il ? Le moteur de rendu dès qu'on dit 1 px dit : « Attendez, moi j'ai quand même une bordure à dessiner, je vous la dessine. » Cette bordure va au-delà de la hauteur. Elle va pouvoir me dessiner cette flèche. Bien entendu elle est positionnée pour la flèche de droite, vraiment sur la droite mais vous avez compris après si vous avez une largeur qui est adaptée à votre flèche, vous allez pouvoir positionner cette flèche très rapidement. Pas besoin d'avoir un picto ISVG ni PNG ou font-awesome par exemple qui viendrait dessiner vos flèches. Vous pouvez les dessiner avec des bordures en jonglant un peu avec certaines propriétés.

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 !