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.

CSS : Positionnement et mise en page

Explorer les ouvertures avec des fichiers

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Afin que le texte puisse habiller une image, les shapes peuvent directement se fonder sur des fichiers images. Ces fichiers peuvent comporter une transparence comme le png32 ou encore le SVG.
07:16

Transcription

Les shapes vont nous permettre de donner un habillage de texte en fonction d’une courbe, d’une forme géométrique. Généralement, ce que l’on souhaite, c’est que le texte habille une image, donc la meilleure façon d’habiller une image c’est d’utiliser cette image comme référence sur la forme, la shape. Donc on va voir, au travers de cette démonstration, ici, que les shapes fonctionnent très bien, soit en natif dans certains navigateurs, soit avec l’aide du polyfill sur d’autres types de navigateur. Encore une fois, testez en fonction des versions, parce que ça bouge, ça évolue. N’oubliez pas qu’ici on n’est pas sur quelque chose d’établi, on est sur une frise qui est en cours de définition, en cours d’écriture. Alors ici j’ai un fichier html qui contient une div, cette div est suivie d’un paragraphe, un long paragraphe de texte, et il va falloir que cette div, donc la forme un ici en l’occurrence flotte pour que la shape puisse être prise en compte. Alors vous voyez qu’ici pour l’instant il y a une flottaison, cette flottaison fait que le texte habille le pourtour de la dimension de la forme ici, qui est de 460 pixels par 300 pixels. Et on va donc utiliser une première forme avec un fond transparent. Si je demande je suis à 460 par 300 pixels, ce qui correspond allégrement à cette utilisation de forme, alors en réalité je ne suis pas à 460 je suis à 459 pixels. Ce petit pixel peut avoir son importance notamment au niveau de la prise en compte de l’image, et donc on va utiliser un format PNG 32 pour garder cette courbe alpha, et ici on voit qu’on a pas de matière, donc le texte va pouvoir venir se placer sur la partie transparente de l’image. Alors pour mettre ça en application, il suffit de faire ici un shape-outside, et de pointer vers l’image PNG que l’on a utilisé ici, vous voyez instantanément, à un moteur de rendu ici d’un webkit, ça se met en place. Si on souhaitait réellement habiller une image, il faudrait qu’il y ait en plus cette image. Alors la meilleure façon c’est de faire un background-image, directement, et de rajouter l’url vers le même fichier, puisque c’est lui à la fois qui a sa couche alpha, plus cette forme qu’il faut habiller donc autant utiliser les deux. On a une troisième propriété qui va pouvoir être utilisée, c’est un shape-margin ici. Histoire de pouvoir dire, je voudrais un em par exemple, d’habillage autour de cette forme pour le décoller ou 0,5.em. Alors attention, il faut que cela soit positif, ça ne marche pas avec du négatif, et vous voyez que là on va pouvoir le mettre en place. Qu’est-ce qu’il en est, si je vais du côté de firefox ? Du côté de firefox on se retrouve avec l’image en background image, c‘est bien interprété, on peut avoir presque persuadé le padding ou le margin qui va fonctionner, mais on n’a pas le découpage qui va se mettre en place. Alors pour cela il suffit de revenir dans notre fichier html, et de placer le fameux polyfill, ce fameux fichier javascript qu’on a pu télécharger sur Github. Vérifier pareillement si un CDN serait mis en place, alors vous voyez que le fait de placer un shape polyfill n’interagit pas directement avec le fichier webkit, je vais pouvoir par contre l’enregistrer, retourner dans firefox, actualiser, et là constater que l’habillage va bien se faire sur la forme. Revenons quelques instants sur la forme fabriquée dans Firework ici, et complétons-là par un petit rectangle ici. Mais apportons à ce rectangle une possibilité d’avoir comme ça un masque vectoriel ici, voilà, je vais l’appliquer. On va pouvoir lui donner une valeur particulière ici. Donc on voit qu’on a un petit angle ici de pénétration dans cette transparence, comme ça placé plutôt vers le haut. Si j’enregistre l’image tout simplement, et que je rebascule dans Dreamweaver, alors là ça marche pour l’éditeur de code là j’ai utilisé Dreamweaver uniquement pour cette possibilité d’un aperçu en temps réel ici. En fait en temps réel il ne se passe rien, il suffit de venir actualiser vous voyez que cela a été pris en compte par rapport au carré, et vous avez vu qu’il y a une sorte de courbure qui est liée à cet espace. Alors tout à l’heure on a vu que l’on pouvait jouer sur le margin ici qui permettait d’écarter un peu ce texte, on peut également avoir accès à une autre propriété, c’est le shape-image-threshold, qui parle donc de cette possibilité de jongler avec la transparence qui peut avoir une valeur de 0 à 1. Alors si je lui dis 0, automatiquement on ne tient pas compte de la transparence, par contre si je lui dis un, à ce moment-là on va complètement jouer sur l’intégralité de l’image, il n’y aura pas de distinction de faite. Par contre si je prends une note intermédiaire comme 06 par exemple ou 0.65, vous allez pouvoir avoir une certaine douceur dans le mariage entre le dégradé et l’image un peu opaque, la partie opaque de l’image, qui fait que dans certains habillages on ne va pas forcement détourer dès qu’il y a de la matière mais on va pouvoir marier comme ça sur certains degrés d’opacité. Donc c’est assez intéressant de regarder cet aspect-là. Si je bascule donc dans firefox ici, et qu’on active la possibilité ici, on voit bien que c’est pris en compte par rapport au polyfill qui permet de gérer ce degré d’opacité. Il existe un autre format de fichier maintenant qui va être le svg qui va nous permettre également de pouvoir intervenir sur l’habillage du texte, sur les shapes ici, avec un shape-outside, et donc quelque part compléter les possibilités de détourage que cette fonctionnalité nous apporte. Alors le svg on va pouvoir fabriquer dans illustrator cette image pourrait très bien être utilisée de manière bitmap pour l’arrière-plan au format jpeg, png, etc., comme le pourrait être utilisé également dans une incrustation dans du svg. Donc c’est à vous de voir dans la situation qui sera la mieux adaptée à votre contexte. Par contre, ce qui est certain c’est que cette image illustrator va pouvoir être exportée en svg, donc je vais la garder en marron, en bleu et en svg pour ne pas la confondre des fois on travaillait en mode éditeur. Mais maintenantn en ajoutant le fameux shape-outside ici, on va voir qu’on peut le placer. Alors ici on pourrait très bien cloner cette image, ou simplement garder un background-image. Cette fois-ci le bleu en format svg, il faut penser maintenant à rajouter, alors je vais prendre un petit peu plus de place parce que j’avais besoin ici de plus de longueur. On ferait un background-repeat qui serait un no-repeat parce que cette fois-ci on n’en a pas besoin à ce niveau-là. Et puis on pourrait ici rajouter un shape-margin, de 1em également, pour pouvoir demander à en habiller la forme à partir d’une distance donnée. Voilà vous avez la possibilité d’utiliser dans les shapes directement des formes qui seraient issues d’un format avec transparence, du png 32 ou du svg pour pouvoir donner la forme d’habillage au texte que l’on désire.

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 !