Tænk uden for boksen med CSS-form udenfor

CSS er baseret på en boksmodel. Hvis du har et billede, der er en cirkel, som du vil pakke tekst rundt, vikles det omkring billedernes afgrænsningsfelt.

Form udenfor

En ny CSS-egenskab kaldet form udenfor giver dig mulighed for at indpakke tekst, der svarer til formen på dit billede.

Hvad er form udenfor

Shape-outside er en ny CSS-egenskab, der ændrer formen på emner, der er pakket. I stedet for at være begrænset til en rektangulær afgrænsningsboks omkring billedet, giver form uden for os mulighed for at forme indhold, så det passer til billedet.

Her er hvordan MDN beskriver form udenfor:

Den form udenpå CSS ejendom bruger shape værdier til at definere svømmeren område for en svømmer og vil forårsage inline indhold at vikle omkring formen i stedet for svømmeren afgrænsningsramme.

Den vigtigste fjernelse fra beskrivelsen er, at denne nye egenskab gælder for billeder, der bruger en float. CSS-form-udvendige egenskab styrer, hvordan tekst ombrydes omkring ethvert flydende billede. Teksten, der er pakket, kan tage form af en cirkel, ellipse, rektangel eller polygon.

Brug af form udenfor

Formen uden for egenskaben har en "grundlæggende form" og anvender en formfunktion på den. Formfunktionen bruges til at ændre formen på formens flydeområde. CSS-form udefra egenskab giver funktionalitet til at oprette disse formfunktioner:

  • cirkel
  • ellips
  • polygon
  • rektangel
  • url

Billedet kan placeres med disse værdier. Værdierne tilføjes til slutningen:

  • margin-box
  • polstringskasse
  • border-box

Billedet skal have iboende dimensioner. Du skal indstille elementets højde og bredde. Dette vil blive brugt af formfunktionen til at oprette et koordinatsystem, der bruges, når tekst vikles rundt om billedet.

Cirkel

Cirkel () er en af ​​de funktionelle værdier forsynet med form udenfor. Den fulde notation for cirkel () er cirkel (r ved cx cy) hvor r er cirkelens radius og cx og cy er koordinaterne for centrum af cirklen. Hvis du udelader dem, bruges billedets centrum som standardværdier.

Her er et eksempel på brug af form uden på en cirkel:

.circle { height: 200px; width: 200px; border-radius: 50%; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-shape-outside: circle(); shape-outside: circle();}

Ellipse

Ellipse er en variation af cirklen, hvor genstanden er aflang på enten den vandrette eller lodrette akse. Den fulde notation for ellipse () er ellipse (rx ry ved cx cy) hvor rx og ry er radierne for ellipsen og cx og cy er koordinaterne for centrum af ellipsen.

Her er et eksempel på brug af form uden på ellipsen:

.ellipse { width: 100px; height: 200px; border-radius: 50%; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-shape-outside: ellipse(50px 100px at 50% 50%); shape-outside: ellipse(50px 100px at 50% 50%);}

Polygon

Polygonfunktionen giver et ubegrænset udvalg af former. Den fulde notation for polygon () er polygon (x1 y1, x2 y2,…)hvor hvert par angiver xy-koordinaterne for polygonets toppunkt. For at bruge polygon () -funktionen skal du angive mindst 3 par af toppunkt.

Polygon bruges med en klipsti. Klipstien CSS-egenskab opretter et klipningsområde, der definerer, hvilken del af et element der skal vises. Alt inden i regionen vises, mens de udenfor er skjult.

Her er et eksempel på brug af form uden for at oprette to trekantformer, og teksten flyder mellem dem:

.leftTriangle { width: 150px; height: 300px; background-color: #7db9e8; margin: 0 25px 5px 0; float: left; -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); -webkit-shape-outside: polygon(0% 0%, 100% 0%, 50% 100%); shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);}.rightTriangle { width: 150px; height: 300px; background-color: #7db9e8; margin: 0 0 5px 25px; float: right; -webkit-clip-path: polygon(0% 0%, 100% 0%, 50% 100%); clip-path: polygon(0% 0%, 100% 0%, 50% 100%); -webkit-shape-outside: polygon(0% 0%, 100% 0%, 50% 100%); shape-outside: polygon(0% 0%, 100% 0%, 50% 100%);}

Browsersupport

CSS-udformningen understøttes primært af Chrome, Opera og Safari.

Hent koden

Koden til alle eksemplerne kan findes i min github repo her.

Flere artikler

Tak for at læse min artikel. Hvis du kan lide det, skal du klikke på klappikonet nedenfor, så andre finder artiklen. Her er nogle flere af mine artikler, som du måske er interesseret i:

Her er 5 layout, som du kan lave med FlexBox

Bredde første søgning i JavaScript

Instantieringsmønstre i JavaScript