CSS : Positionnement et mise en page

Aller plus loin avec les shapes

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Explorez plusieurs possibilités de la propriété shape employée avec des formes géométriques de base. En cours de développement, le tout peut changer du jour au lendemain.
09:05

Transcription

En se rapprochant du W3C on s’aperçoit qu’on a la possibilité d’utiliser du shape-outside avec une image, ce que l’on vient de voir. Ou le shape-box, qui correspond ni plus ni moins à un bloc html, n’oublions pas non plus que les shapes sont la continuité des exclusions donc c’est-à-dire que vraiment on se retrouve dans ce cas de figure, c’est encore en cours d’écriture, mais on est dans cette bascule- là. Et puis les basic-shapes qui correspondent, eux, à des formes géométriques prédéfinies, qui sont des polygones, des ellipses, des circles ou de l’insert, ce n’est ni plus ni moins qu’un rectangle avec la possibilité d’utiliser des coins arrondis. Encore une fois on pourrait très bien utiliser un shape-box, un élément de type div par exemple qui aurait lui-aussi un border-radius qui serait défini. Donc voilà, c’est à vous de voir après comment vous allez combiner, utiliser toutes ces possibilités et n’oublions pas que ces possibilités deviennent complémentaires les unes avec les autres. Elles ont beaucoup de terrain commun, mais elles peuvent avoir des différences qu’il va falloir exploiter, utiliser. Alors si je viens ici dans un élément de type cercle par exemple, il me suffira de venir dans cet élément, et puis de lui définir dans ces éléments un shape ici, un outside qui serait de type circle, et tout simplement, si on reste sur un circle par défaut, on va avoir un circle qui va se positionner en gros à une dimension donnée et au centre de l’élément. Mais rien ne m’empêche de venir le définir à 40% et vous voyez que vous allez agir à 40% sur l’élément. On va pouvoir également le positionner en 0 0. N’oublions pas qu’en informatique le repère orthonormé commence un mot à gauche, donc le 0 0 correspond à ce point ici. Je pourrais le descendre ou partir sur la droite, en définissant des valeurs en pixel par exemple, un peu comme ça, ou en définissant tout autre type de valeur. On pourrait également utiliser un center, puisqu’en fait ici on est dans l’élément de position, et cet élément de position va être récurrent par exemple si vous utilisez des dégradés ou des éléments de ce type là vous voyez, on va pouvoir revenir sur la description des positions comme le fait le W3C. Maintenant on peut également jouer sur la flottaison. N’oubliez pas que pour que le shape outside fonctionne, on va jouer sur la flottaison. Bon là si je fais une flottaison à droite, bon automatiquement l’élément qui va flotter à droite dans le texte va se positionner à gauche de l’élément. Et là on va pouvoir venir jouer sur le text align justify par exemple ou right, histoire de pouvoir s’assurer d’épouser au max et au mieux la forme de l’élément. Alors ici depuis le début je mettais un shape-margin. Si on supprime cette marge, on va donner un peu plus d’espaces à l’élément pour la flottaison de droite. On va pouvoir aussi travailler avec des formes de type ellipse, alors là on va toujours pouvoir pareil faire un shape outside, et on va utiliser l’ellipse. Cette fois-ci l’ellipse va avoir plusieurs possibilité de définitions, c’est-à-dire que je vais pouvoir donner 50 pixels de radius dans ce sens, 300 pixels de radius dans cet élément-là, et on va pouvoir le positionner at left top par exemple ici et vous voyez que le fameux 50 pixels se trouve ici, si je passe à 150 pixels ici, vous voyez qu’automatiquement 50 pixels c’est l’axe des abscisses. Le 300 pixels c’est l’axe des ordonnées, left top a été positionné dans cette partie-là. On va pouvoir également travailler sur du polygone. Alors là le polygone, c’est quelque chose d’un peu particulier, parce que ça va demander de positionner des points qui seront dans l’ordre un peu chronologique. Regardez. Le plus simple c‘est de le mettre en place. Polygon, et ce qu’on va faire c’est faire un carré. Alors utiliser le polygon pour faire du carré c’est pas malin mais ça va permettre de mieux le comprendre. Ici je positionne le point de départ qui est en 0 0. Ensuite je positionne l’axe des x , des ordonnées, de 100 pixels, toujours en 0 au niveau des y. Ensuite on va le positionner en 100 pixels 100 pixels, c’est-à-dire qu’on est descendu, on est parti de 0 ici, on est allé à 100 0 ici, on descend à 100 100, et maintenant on va retourner en 0 100. 0 c’est les x, 100 les y, et vous voyez que chaque fois je sépare par des virgules, mais la paire abscisse ordonnée est séparée par un espace. Et là je me retrouve avec un petit carré dans cette partie-là. Bien entendu on aurait pu créer des points, un cinquième, un sixième point, qui créeraient des formes comme ça complètement coupées. Mais je ne le fais pas volontairement pour que dans l’étape prochaine on puisse le faire avec un outil spécialement dédié. Alors il éxistait une autre propriété ici, la valeur shape-outside qui était shape-inside, c’est-à-dire qu’au lieu de placer le texte à l’extérieur de l’élément on pouvait aussi le placer à l’intérieur de l’élément. Par contre en suivant les courriers de chromium, les échanges du forum de chromium, on s’et aperçu que shape-inside était retiré parce que dans les spécifications il commençait à être défini différemment, les utilisateurs ne faisaient pas spécifiquement beaucoup de retours, et donc il a été retiré à partir de la version 37 du navigateur. Donc si j’enregistre tout ça ici, et que l’on bascule dans le navigateur maintenant, ici je suis dans chromium et plus précisemment je suis dans la version 54 de chromium. On peut se rendre sur certains sites de chromium pour pouvoir télécharger une version plus ancienne de chromium, et donc récupérer, ici je suis dans windows mais on peut retourner dans toutes les versions de chromium que l’on souhaite récupérer, donc là je suis dans la build 249271, c’est cette build là qui correspond à cette version 34 de chromium. Ce que je vous propose c’est de récupérer cette version, de quitter chromium et de relancer une version 34. Donc au moment du lancement vous risquez d’avoir beaucoup de boîtes de dialogues qui vous disent attention, on a repéré que vous aviez un profil plus récent, donc tout ce que vous voulez télécharger notamment certaines extensions vont ne plus être prises en compte. Donc c’est un peu quelque part une forme de souci que de jongler entre deux versions comme ça mais voilà, là ça va nous permettre de pouvoir travailler sur le shape-inside. Alors cette-fois-ci il n’y a plus d’histoire de flottaison, il y a simplement à appliquer une classe à un bloc qui contient du texte. Donc si ici je viens dans la forme un et que je lui applique un webkit, shape-inside cicrle 55% at left top ici, si j’enregistre et que je le prévisualise dans la version 34 bon vous voyez que maintenant mon texte s’écrit dans un cercle. Bien entendu si on rentre dans un cercle plus fin, au lieu de taper dans 55% je tape dans 35% et au lieu de le mettre en left, je vais le mettre à 300 pixels, toujours dans le top, ctrl S. Si je bascule dans chromium, que j'actualise la page, vous voyez bien qu’on va écrire dans un cercle plus précis. Bien entendu, tout le texte qui déborde n’a pas de région qui sont mis en place, donc on ne peut pas l’injecter dans une autre partie du code, et on va le garder ici. Alors là encore une fois il faudrait avoir un text-justify, un align-justify pour pouvoir avoir un meilleur encadré. Donc il faudrait renter toujours dans le même endroit, un text-align : justify. Histoire de pouvoir mieux présenter ce texte. Donc là le navigateur va s’efforcer d’habiller les deux bordures, les deux courbes du texte. Alors au même stade que pour le shape-outside, on a du margin, pour le shape-inside, on a du padding, pour pouvoir le voir l’interet quand même c’est de pouvoir le placer une couleur à l’intérieur du bloc pour pouvoir voir justement que l’on bénéficie de ce padding. Si ici je place l’élément, que j’actualise ma page dans le navigateur, vous voyez que le padding n’est pas mis en place sur la forme d’habillage, mais sur le bloc complet. Voilà donc on ne va pas aller plus loin dans cette partie-là parce que n’oublions pas quand même que c’est expérimental et que surtout cela fonctionnait sur des vieilles versions du navigateur. Mais je vous invite comme ça à aller explorer toutes les formes géométriques comme le polygone, le rectangle ou encore le insert que je n’ai pas pris ici comme exemple. Donc une fois ces expérimentations terminées, n’oubliez surtout pas de quitter chrome et de relancer une version plus contemporaine de chrome, puis pensez toujours à vérifier que vous êtes toujours dans la version que vous souhaitez. Et puis n’oubliez pas encore une fois de vous rapprocher du W3C, du « Can I use », des groupes de discussion, et de suivre cette évolution inter-navigateur bien entendu, de ne pas se focaliser que sur une seule distribution chrome par exemple en l’occurrence, mais portée avec les polyfill sur firefox, sur opéra, sur chrome, sur safari etc.

CSS : Positionnement et mise en page

Exploitez le positionnement en CSS et tirez parti des techniques pour mettre en forme votre site. Utilisez la flottaison des éléments, les propriétés de positionnement, etc.

5h01 (55 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Thématiques :
Design web
Standards du web
Spécial abonnés
Date de parution :31 août 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 !