Oblik-izvan - CSS-trikovi

Anonim

Na shape-outsidekontrole imovine kako sadržaj će zaokrenuti granični-box lebdio elementa. To je obično tako da se tekst može preoblikovati preko oblika poput kruga, elipse ili poligona:

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

Važno je napomenuti da će ovo svojstvo za sada raditi samo na plutajućim elementima, iako će se to vjerojatno promijeniti u budućnosti. shape-outsideImovine također se može manipulirati s prijelazima ili animacije.

Vrijednosti

  • circle(): za izradu kružnih oblika.
  • ellipse(): za izradu eliptičnih oblika.
  • inset(): za izradu pravokutnih oblika.
  • polygon(): za stvaranje bilo kojeg oblika s 3 ili više vrhova.
  • url(): identificira koju sliku treba upotrijebiti za omatanje teksta.
  • initial: područje plovka nije pogođeno.
  • inherit: nasljeđuje shape-outsidevrijednost od roditelja.

Sljedeće vrijednosti identificiraju koju referencu modela kutije treba koristiti za pozicioniranje oblika unutar:

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

Te vrijednosti treba priključiti do kraja, na primjer: shape-outside: circle(50% at 0 0) padding-box. Po defaultu margin-boxće se koristiti referenca.

elipsa()

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

ellipse()Funkcija zahtijeva polumjera vrijednosti za x, y os elipse slijedi koordinate pozicionirati u središte oblika u okviru svoje granični okvir. Na primjer, gornji primjer smjestit će središte elipse u okomito i vodoravno središte .elementdiv-a:

Iako prethodna demonstracija može sugerirati da mijenjamo oblik samog divsebe, ako dodamo obrube i pozadinsku sliku, ustanovit ćemo da je okvir za ograničavanje zapravo još uvijek pravokutan:

Možda bi bilo bolje razmišljati o tome na ovaj način: shape-outsidesvojstvom mijenjamo odnos ostalih elemenata oko elementa, a ne geometriju samog elementa. Da bismo popravili da ćemo morati koristiti shape-outsideuz clip-path()svojstvo, kao u ovom primjeru:

krug()

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

Ova funkcija stvara krug, au gornjem primjeru koda stvorit će krug s radijusom koji je pola visine i širine .element. circle()Funkcija također može koristiti istu sintaksu za pozicioniranje oblik roku.

url ()

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

U ovom slučaju imamo dvije plutajuće slike, jednu s obje strane bloka teksta. Budući da obje slike imaju postavljeno shape-outsidesvojstvo, tada će tekst ispod izbjegavati ta dva plutanja.

Također je moguće postaviti shape-image-thresholdsvojstvo koje će obavijestiti preglednik koji bi pikseli, ovisno o njihovoj prozirnosti, trebali stvoriti oblik. Na primjer:

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

U ovom primjeru jedini pikseli koji će stvoriti oblik moraju imati 50% prozirnosti i više. Vrijednosti od 0.0(transparentno) do 1.0(neprozirno) su valjane.

poligon()

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

Ova funkcija stvara bilo koji oblik koji ima tri ili više vrhova, na primjer:

Važno je napomenuti da, ako će ovo svojstvo biti animirano, potreban mu je isti broj vrhova kada deklarirate 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%); )

uložak ()

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

inset()je funkcija za izradu pravokutnih oblika, potrebno je pet parametara, ali peti, jer border-radiusnije obavezan. Ostali argumenti su pomaci prema rubu .element:

Iznad imamo element koji je širok 200 piksela i 200 piksela visok i mi pomičemo oblik unutar 50 piksela u svim smjerovima, osim s lijeve strane. Na taj će se način tekst premotati iznad oblika, iako se div proteže do vrha.

Podrška preglednika

Podaci o podršci preglednika potječu iz tvrtke Caniuse, koja sadrži više detalja. Broj označava da preglednik podržava značajku u toj verziji i novijoj.

Radna površina

Krom Firefox IE Rub Safari
37 62 Ne 79 7,1 *

Mobitel / tablet

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