CSS
Formes pour flotteurs
Recherche…
Syntaxe
forme extérieure: aucune | [<basic-shape> || <forme-boîte>] | <image>
marge de forme: <longueur> | <pourcentage>
shape-image-threshold: <nombre>
Paramètres
| Paramètre | Détails |
|---|---|
| aucun | Une valeur none signifie que la zone flottante (la zone utilisée pour envelopper le contenu autour d'un élément flottant) n'est pas affectée. C'est la valeur par défaut / initiale. |
| forme de base | Fait référence à un inset() parmi inset() , circle() , ellipse() ou polygon() . En utilisant l'une de ces fonctions et ses valeurs, la forme est définie. |
| boîte de forme | Fait référence à un margin-box parmi margin-box , border-box , padding-box et content-box . Lorsque seulement <shape-box> est fourni (sans <basic-shape>), cette case est la forme. Lorsqu'il est utilisé avec <basic-shape>, il sert de boîte de référence. |
| image | Lorsqu'une image est fournie en tant que valeur, la forme est calculée en fonction du canal alpha de l'image spécifiée. |
Remarques
Le support du navigateur pour le module CSS Shapes est très limité à ce stade.
Il est pris en charge dans Chrome v37 + et Opera 24+ sans préfixes de navigateur / fournisseur. Safari le prend en charge à partir de la version 7.1 + mais avec le préfixe -webkit- .
Il n'est pas encore pris en charge dans IE, Edge et Firefox.
Forme extérieure avec forme de base - cercle ()
Avec la propriété CSS shape-outside la shape-outside , vous pouvez définir des valeurs de forme pour la zone flottante afin que le contenu en ligne contourne la forme plutôt que la zone du flottant.
CSS
img:nth-of-type(1) {
shape-outside: circle(80px at 50% 50%);
float: left;
width: 200px;
}
img:nth-of-type(2) {
shape-outside: circle(80px at 50% 50%);
float: right;
width: 200px;
}
p {
text-align: center;
line-height: 30px; /* purely for demo */
}
HTML
<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<p>Some paragraph whose text content is required to be wrapped such that it follows the curve of the circle on either side. And then there is some filler text just to make the text long enough. Lorem Ipsum Dolor Sit Amet....</p>
Dans l'exemple ci-dessus, les images sont en fait des images carrées et, lorsque le texte est placé sans la propriété shape-outside , il ne circulera pas autour du cercle. Il circulera autour de la boîte contenant de l'image uniquement. Avec shape-outside la zone float est redéfinie comme un cercle et le contenu est fait pour circuler autour de ce cercle imaginaire créé en utilisant shape-outside .
Le cercle imaginaire utilisé pour redéfinir la zone flottante est un cercle de rayon de 80px tiré du centre de la zone de référence de l'image.
Vous trouverez ci-dessous quelques captures d'écran pour illustrer comment le contenu serait utilisé lorsque la shape-outside est utilisée et quand elle n'est pas utilisée.
Sortie avec shape-outside
Sortie sans shape-outside
Marge de forme
La shape-margin propriété CSS ajoute une marge de shape-outside à l' shape-outside .
CSS
img:nth-of-type(1) {
shape-outside: circle(80px at 50% 50%);
shape-margin: 10px;
float: left;
width: 200px;
}
img:nth-of-type(2) {
shape-outside: circle(80px at 50% 50%);
shape-margin: 10px;
float: right;
width: 200px;
}
p {
text-align: center;
line-height: 30px; /* purely for demo */
}
HTML
<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<img src="http://images.clipartpanda.com/circle-clip-art-circlergb.jpg">
<p>Some paragraph whose text content is required to be wrapped such that it follows the curve of the circle on either side. And then there is some filler text just to make the text long enough. Lorem Ipsum Dolor Sit Amet....</p>
Dans cet exemple, une marge de 10px est ajoutée autour de la forme en utilisant shape-margin . Cela crée un peu plus d'espace entre le cercle imaginaire qui définit la zone flottante et le contenu réel qui circule.
Sortie:
