Form udenfor - CSS-tricks

Anonim

De shape-outsideejendom styrer hvordan indhold vil wrap omkring et flød elements omgivende boks. Dette er typisk, så teksten kan flyde over en form som en cirkel, ellipse eller en polygon:

.element ( float: left; shape-outside: circle(50%); width: 200px; height: 200px; )

Det er vigtigt at bemærke, at denne egenskab kun fungerer på flydende elementer indtil videre, selvom dette sandsynligvis vil ændre sig i fremtiden. Den shape-outsideegenskab kan også manipuleres med overgange eller animationer.

Værdier

  • circle(): til fremstilling af cirkulære former.
  • ellipse(): til fremstilling af elliptiske former.
  • inset(): til fremstilling af rektangulære former.
  • polygon(): til oprettelse af enhver form med 3 eller flere hjørner.
  • url(): identificerer hvilket billede der skal bruges til at pakke tekst rundt.
  • initial: flydeområdet er upåvirket.
  • inherit: arver shape-outsideværdi fra forælder.

Følgende værdier identificerer hvilken reference i kassemodellen der skal bruges til at placere formen inden i:

  • margin-box
  • padding-box
  • border-box

Disse værdier skal tilføjes til enden, for eksempel: shape-outside: circle(50% at 0 0) padding-box. Som standard margin-boxbruges referencen.

ellipse ()

.element ( shape-outside: ellipse(150px 300px at 50% 50%); )

Den ellipse()funktion kræver de radii værdier for x, til y-aksen i ellipsen efterfulgt af koordinaterne placere midten af formen inden for dens afgrænsningsramme. For eksempel vil eksemplet ovenfor placere midten af ​​ellipsen i det lodrette og vandrette centrum af .elementdiv:

Selvom demonstrationen ovenfor kan antyde, at vi ændrer formen på sig divselv, hvis vi tilføjer grænser og et baggrundsbillede, finder vi ud af, at afgrænsningsboksen faktisk stadig er rektangulær:

Det kan være bedre at tænke på det på denne måde: Med shape-outsideegenskaben ændrer vi forholdet mellem andre elementer omkring et element, ikke geometrien af ​​selve elementet. For at rette op på det skal vi bruge shape-outsidesammen med clip-path()ejendommen, som i dette eksempel:

cirkel()

.element ( shape-outside: circle(50%); )

Denne funktion opretter en cirkel, og i kodeeksemplet ovenfor opretter den en cirkel med en radius, der er halvdelen af ​​højden og bredden af .element. Den circle()funktion kan også bruge den samme syntaks til positionering af form inden.

url ()

.element ( shape-outside: url('circle.png.webp'); )

I dette tilfælde har vi to flydende billeder, et på hver side af en tekstblok. Da begge billeder har shape-outsideegenskaben indstillet, undgår teksten under disse to flyder.

Det er også muligt at indstille shape-image-thresholdejendommen, der informerer browseren om, hvilke pixels der afhænger af deres gennemsigtighed skal skabe formen. For eksempel:

.element ( shape-outside: url('image.png.webp'); shape-image-threshold: 0.5; )

I dette eksempel skal de eneste pixels, der opretter formen, have 50% gennemsigtighed og derover. Værdier fra 0.0(gennemsigtig) til 1.0(uigennemsigtig) er gyldige.

polygon ()

.element ( shape-outside: polygon(0 0, 0 200px, 300px 600px); )

Denne funktion skaber enhver form, der har tre eller flere hjørner, for eksempel:

Det er vigtigt at bemærke, at hvis denne egenskab skal animeres, kræver det samme antal hjørner, når du erklærer den animerede tilstand:

.element ( shape-outside: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: shape-outside 1s; ) .element:hover ( shape-outside: polygon(0 0, 100% 50%, 100% 50%, 0 100%); )

indsats ()

.element ( shape-outside: inset(100px 100px 100px 100px 10px); /* shape-outside: inset(top right bottom left border-radius); */ )

inset()er en funktion til at lave rektangulære figurer, det tager fem parametre, men den femte, for border-radiuser valgfri. De andre argumenter er forskudt indad fra kanten af .element:

Ovenfor har vi et element, der er 200 pixel bredt og 200 pixel højt, og vi udligner formen inden for 50 pixel i alle retninger undtagen venstre side. På denne måde vikles teksten over formen, selvom div strækker sig til toppen.

Browsersupport

Denne browsersupportdata er fra Caniuse, som har flere detaljer. Et tal angiver, at browseren understøtter funktionen i den version og opefter.

Desktop

Chrome Firefox IE Edge Safari
37 62 Ingen 79 7,1 *

Mobil / tablet

Android Chrome Android Firefox Android iOS Safari
88 85 81 8 *