CSS : Positionnement et mise en page

Prendre en main les outils des shapes

Testez gratuitement nos 1298 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Afin de travailler dans les meilleures conditions, il existe des outils permettant de visualiser les formes. Découvrez aussi qu'ils peuvent interagir avec ces formes et obtenir des mesures précises.
07:09

Transcription

Travailler avec les shapes sans pour autant donner une image d’arrière-plan peut devenir rapidement compliqué parce qu’on travaille avec des formes géométriques, qui vont se baser soit sur du svg, soit sur des formes prédéfinies, comme circle par exemple, mais c’est un peu compliqué à manipuler. Alors par exemple on a plein d’outils qui peuvent être sympas. Notamment ici, c’est sur CSS shape-tools ici, la possibilité d’avoir un book marklet. Alors pour cela, il suffit de glisser le bookmarklet ici, dans notre barre de navigation pour pouvoir l’utiliser. On a aussi un clip pass générator qui va permettre ici de venir définir un polygon, voilà, alors il suffit ici de venir positionner des nouveaux points ne cliquant dessus, puis d’ouvrir, alors vous pouvez importer vos images et venir travailler dessus, afin de pouvoir générer le polygone et en temps réel le polygon se définit soit sous forme de clip passe ici, soit sous forme de format svg à récupérer dans la partie droite. Vous avez aussi la possibilité de venir travailler sur le blog Web Platform Team Blog sur lequel vous allez avoir des tonnes d’articles et des formations qui vont vous permettre de pouvoir être un peu à l’affut de tout ce qu’il serait bon de pouvoir employer et travailler, si vous continuez à expérimenter dans ce secteur-là. Vous avez aussi un outil qui s’appelle CSS Shapes Editor , qui s’ajoute sur chrome par exemple ici. Vous avez la possibilité d’utiliser le CSS Shapes Editor qui peut être lui directement implémenté au sein de notre code. Donc c’est très facile à utiliser, et donc pour cela on va regarder un peu ce qu’il se passe. Si je prends ici un simple élément qui va utiliser un shape outside avec un circle à 20% ici pas positionné, et si je le visualise dans un navigateur, en fait ce cercle on ne le voit pas. Si j’utilise le bookmarklet qu’on avait tout à l’heure ici, elle va me positionner la forme et me permettre de voir où se situe cette forme, et donc des fois dans des articles c’est intéressant d’avoir cette forme de layer supplémentaire, de calque supplémentaire qui va me permettre de le visualiser. Mais je ne vais pas pouvoir interagir avec. Alors certains éditeurs de code comme braket vont utiliser, on avait vu dans un éditeur d’article comme tout à l’heure en CSS shape editor. Pour ma part je vous préconise à 100% de l’utiliser directement dans le code. Vous allez voir, c’est très simple à utiliser. Ici j’ai défini un cercle de 20%. C’est la même génération de shape-outside que le même exercice précédent. Sauf que ici dans la partie basse du code, j’ai rajouté un code copié-collé, alors vous pouvez directement le copier-coller depuis le Github, ne vous embêtez pas la dessus, vous allez dans la partie ici du Github. Vous avez le code qui est placé ici, bien entendu il va falloir vous adaptiez vos noms d’identifiants au noms d’éléments, et c’est un peu la seule chose qu’il va falloir faire. Une fois que vous avez votre code, il ne faut pas oublier de mettre la librairie qui va bien avec, CSSShape-Editor-min ici, que vous récupérez rapidement sur le Github ici, dès que vous êtes dans le Github, vous allez pouvoir récupérer le script ici, le télécharger pour pouvoir l’installer sur votre machine. Et une fois qu’il a été activé, il va représenter le shape que vous avez directement dans sa forme. Regardez ici si j’utilise, je ne l’ai pas collé ici, donc je vais le faire. Voilà ici un élément de type ellipse, il va apparaitre, et surtout, cerise sur le gâteau, il va être intégralement éditable. Vous voyez ici, vous allez pouvoir l’éditer, le modifier, etc. Alors on va le faire dans un navigateur, ce sera beaucoup plus probant que dans un moteur de rendu de Dreamweaver, et vous voyez pour le polygon ça va être complètement modifiable, surtout on va pouvoir rajouter des nouveaux points. Ce que je vous invite à voir c’est, d’entrée de jeu le polygon dans chromium ici, vous voyez vous avez l’élément ici, je vais pouvoir cliquer et rajouter un point, ce point je vais pouvoir l’éditer, le modifier, je vais pouvoir également en prenant l’outil de déplacement le déplacer au sein de mon bloc ici pour pouvoir le visualiser, je vais pouvoir le faire pivoter là. Donc vous voyez c’est très simple d’utilisation. Si je viens dans la partie 2 ici, donc vous voyez l’ellipse, on a notre ellipse, on va pouvoir également la modifier, on va pouvoir corriger l’intégralité de ces propriétés, et si je viens dans la partie une ici, je vais pouvoir également avoir un cercle. Alors il n’a pas bien chargé, avec le cercle ici je vais pouvoir modifier les propriétés, les éditer, les changer etc., ce qui devient complètement simple d’utilisation lorsqu’on doit modifier plus des formes à la demande, et de manière interactive. Pour le récupérer c’est simple, il suffit de se rendre sur le Github, vous avez l’editor par exemple getcssvalue, vous pouvez le récupérer, vous pouvez lui demander en quelle unité vous souhaitez le récupérer, donc en passant ce paramètre ici. Donc ici par exemple si on vient dans la partie du cercle, il suffit d’appeler inspecteur ici. On va venir dans la console, on va taper cette partie-là, et là vous voyez il me dit que c’est un cercle de 12% à 38.85% et à 156%. Et j’aurai très bien pu lui dire ici, ctrl V, et je veux les valeurs en em, qu’est-ce que cela donnerait en em, et là il me répondrait toutes les valeurs en em. Bien entendu, ici, si je retourne dans une partie polygon, le plus intéressant ici, à ce niveau-là, donc on va rééditer le polygon. Je vais passer ici dans l’élément, voilà ,ici on va un poil l’agrandir. Je vais rajouter un point tout simplement en superposant un point sur la ligne, je vais rentrer dans ce polygon ici, alors ça n’a pas très bien marché. Là ici la flèche s’est faite. Il suffit de rappeler l’inspecteur encore une fois. On va passer dans la console, je vais le demander cette-fois-ci en px pour mieux le visualiser, ici je tape, il me dit px , pardon , excusez-moi, j’ai oublié les quotations ici, et si je valide, on me dit directement, mon polygon, voilà la valeur que je veux pouvoir ré exploiter dans mon code. Il ne me reste plus qu’à venir la copier ici, et la réinjecter dans mon code directement, à cet endroit-là. Donc vous voyez que c’est très simple lorsqu’on a des bons outils, de pouvoir travailler avec ces shapes et à continuer à les explorer. Donc cette exploration sur les shapes, les exclusions et les régions sont terminées. Je vous invite vraiment à les cumuler et à les compléter et à essayer de rester branché avec le W3C parce que c’est maintenant que c’est en train de se passer et c’est là qu’il faut qu’on puisse utiliser ces possibilités pour envoyer des retours au W3C. Tous les groupes de discussion que vous pouvez avoir, vous allez sur CSS, current value, et vous pouvez vous abonner, et surtout gardez une portabilité pluri-navigateur, utilisez les polyfill et continuez à creuser les CSS positionnement et mise en page dans ce sens-là.

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 !