Oblika zunaj - CSS-triki

Anonim

Za shape-outsidenadzor lastnine, kako bo vsebina ovijte okoli plavajočo elementa je vezno-box. Običajno je to tako, da se besedilo lahko preoblikuje po obliki, kot je krog, elipsa ali mnogokotnik:

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

Pomembno je omeniti, da bo ta lastnost za zdaj delovala samo na plavajočih elementih, čeprav se bo to v prihodnosti verjetno spremenilo. Z shape-outsidelastnostjo je mogoče manipulirati tudi s prehodi ali animacijami.

Vrednote

  • circle(): za izdelavo krožnih oblik.
  • ellipse(): za izdelavo eliptičnih oblik.
  • inset(): za izdelavo pravokotnih oblik.
  • polygon(): za ustvarjanje katere koli oblike s 3 ali več oglišči.
  • url(): določa, s katero sliko naj se zavije besedilo.
  • initial: območje plovca je nespremenjeno.
  • inherit: podeduje shape-outsidevrednost od starša.

Naslednje vrednosti določajo, katero referenco modela škatle je treba uporabiti za pozicioniranje oblike znotraj:

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

Te vrednosti morajo biti priložene na koncu, na primer: shape-outside: circle(50% at 0 0) padding-box. Privzeto margin-boxbo uporabljen sklic.

elipsa ()

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

ellipse()Funkcija zahteva polmerov vrednosti za x, y os elipse sledi koordinatami v položaj središče oblike v njeni vezno polje. Na primer, zgornji primer bo postavil središče elipse v navpično in vodoravno središče .elementdivja:

Čeprav lahko zgornja predstavitev kaže, da spreminjamo obliko divsamega sebe, če dodamo obrobe in sliko ozadja, bomo ugotovili, da je omejevalno polje v resnici še vedno pravokotno:

Morda bi bilo bolje razmišljati tako: z shape-outsidelastnostjo spreminjamo razmerje med drugimi elementi okoli elementa in ne geometrijo samega elementa. Če želite popraviti, da bomo morali uporabiti shape-outsidepoleg clip-path()lastnosti, na primer v tem primeru:

krog()

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

Ta funkcija ustvari krog in v zgornjem primeru kode ustvari krog s polmerom, ki je polovica višine in širine .element. circle()Funkcijo lahko uporabljajo tudi isto sintakse za pozicioniranje obliko znotraj.

url ()

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

V tem primeru imamo dve plavajoči sliki, eno na obeh straneh bloka besedila. Ker imata obe sliki shape-outsidenastavljeno lastnost, se besedilo spodaj ne bo izognilo tem dvema plovecoma.

Možno je tudi nastaviti shape-image-thresholdlastnost, ki bo brskalniku sporočala, katere piksle naj glede na njihovo preglednost ustvarijo obliko. Na primer:

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

V tem primeru morajo imeti edino piksli, ki bodo ustvarili obliko, 50-odstotno prosojnost in več. Vrednosti od 0.0(prosojno) do 1.0(nepregledno) so veljavne.

mnogokotnik ()

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

Ta funkcija ustvari katero koli obliko, ki ima tri ali več točk, na primer:

Pomembno je vedeti, da če bo ta lastnost animirana, zahteva enako število točk, ko razglasite animirano stanje:

.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%); )

vložek ()

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

inset()je funkcija za izdelavo pravokotnih oblik, ima pet parametrov, peti pa border-radiusje neobvezen. Drugi argumenti so odmiki navznoter od roba .element:

Zgoraj imamo element, ki je širok 200 slikovnih pik in visok 200 slikovnih pik, obliko pa odmikamo do 50 slikovnih pik v vse smeri, razen na levi strani. Tako se bo besedilo zavilo nad obliko, čeprav se div sega do vrha.

Podpora brskalnika

Ti podatki o podpori brskalnika so od Caniuse, ki vsebuje več podrobnosti. Številka pomeni, da brskalnik podpira to funkcijo v tej različici ali novejši.

Namizje

Chrome Firefox IE Rob Safari
37 62 Ne 79 7,1 *

Mobilni / tablični računalnik

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