CSS
Vormen voor praalwagens
Zoeken…
Syntaxis
vorm-buitenkant: geen | [<basic-shape> || <shape-box>] | <Image>
vorm-marge: <lengte> | <Percentage>
vorm-afbeelding-drempel: <nummer>
parameters
| Parameter | Details |
|---|---|
| geen | De waarde none betekent dat het floatgebied (het gebied dat wordt gebruikt voor het omwikkelen van inhoud rond een floatelement) niet wordt beïnvloed. Dit is de standaard / beginwaarde. |
| basisvorm | Verwijst naar één tussen inset() , circle() , ellipse() of polygon() . Met behulp van een van deze functies en de bijbehorende waarden wordt de vorm gedefinieerd. |
| shape-box | Verwijst naar een onder margin-box , border-box , padding-box , content-box . Wanneer alleen <shape-box> wordt gegeven (zonder <basic-shape>) heeft dit vak de vorm. Wanneer het samen met <basic-shape> wordt gebruikt, fungeert dit als referentiekader. |
| beeld | Wanneer een afbeelding als waarde wordt opgegeven, wordt de vorm berekend op basis van het alfakanaal van de opgegeven afbeelding. |
Opmerkingen
Browserondersteuning voor de CSS-vormenmodule is op dit moment zeer beperkt.
Het wordt ondersteund in Chrome v37 + en Opera 24+ zonder voorvoegsels van browser / leverancier. Safari ondersteunt het vanaf v7.1 + maar met het voorvoegsel -webkit- .
Het wordt nog niet ondersteund in IE, Edge en Firefox.
Vorm buiten met basisvorm - cirkel ()
Met de CSS-eigenschap shape-outside kan men vormwaarden definiëren voor het floatgebied, zodat de inline-inhoud rond de vorm loopt in plaats van het vak van de float.
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>
In het bovenstaande voorbeeld zijn beide afbeeldingen feitelijk vierkante afbeeldingen en wanneer de tekst zonder de eigenschap shape-outside wordt geplaatst, stroomt deze niet aan weerszijden rond de cirkel. Het stroomt alleen rond het doosje van de afbeelding. Met shape-outside het float-gebied opnieuw gedefinieerd als een cirkel en wordt de inhoud rond deze denkbeeldige cirkel laten vloeien die met behulp van shape-outside is gemaakt.
De denkbeeldige cirkel die wordt gebruikt om het zwevende gebied opnieuw te definiëren, is een cirkel met een straal van 80 px vanuit het middelste middelpunt van het referentiekader van de afbeelding.
Hieronder staan een paar schermafbeeldingen om te illustreren hoe de inhoud zou worden omwikkeld wanneer shape-outside wordt gebruikt en wanneer deze niet wordt gebruikt.
Uitgang met shape-outside
Uitgang zonder shape-outside
Vormmarge
De shape-margin CSS-eigenschap voegt een marge 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>
In dit voorbeeld wordt een marge van 10 px rond de vorm toegevoegd met behulp van shape-margin . Dit creëert een beetje meer ruimte tussen de denkbeeldige cirkel die het zwevende gebied definieert en de werkelijke inhoud die rond stroomt.
Output:
