Forma-ārpuse - CSS-triki

Anonim

Par shape-outsideīpašuma kontrolē, kā saturs tiks aptīšanas peldēja elementa izgriezums kasti. Parasti tas notiek tāpēc, lai teksts varētu pārplūst virs formas, piemēram, apļa, elipses vai daudzstūra:

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

Ir svarīgi atzīmēt, ka šis īpašums pagaidām darbosies tikai ar peldošiem elementiem, lai gan tas, iespējams, mainīsies nākotnē. shape-outsideĪpašumu var arī manipulēt ar pārejām un animācijas.

Vērtības

  • circle(): apļveida formu izgatavošanai.
  • ellipse(): elipsveida formu izgatavošanai.
  • inset(): taisnstūra formu izgatavošanai.
  • polygon(): jebkuras formas izveidošanai ar 3 vai vairāk virsotnēm.
  • url(): identificē, kurš attēls jāizmanto, lai apvilktu tekstu.
  • initial: pludiņa zona netiek ietekmēta.
  • inherit: manto shape-outsidevērtību no vecākiem.

Šīs vērtības norāda, kura lodziņa modeļa atsauce jāizmanto formas pozicionēšanai:

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

Šīs vērtības ir jāpievieno beigās, piemēram: shape-outside: circle(50% at 0 0) padding-box. Pēc noklusējuma margin-boxtiks izmantota atsauce.

elipse ()

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

ellipse()Funkcija prasa izliekuma vērtības x, y ass no elipses seko koordinātām uz tās izgriezums novietotu centru formas. Piemēram, iepriekš minētajā piemērā elipses centrs tiks novietots .elementdiv vertikālajā un horizontālajā centrā :

Lai gan iepriekšminētais demonstrējums var liecināt, ka mēs mainām pašas formas, divpievienojot apmales un fona attēlu, mēs atklāsim, ka ierobežojošais lodziņš joprojām ir taisnstūrveida:

Varētu būt labāk domāt par to šādā veidā: ar shape-outsideīpašumu mēs mainām citu elementu attiecības ap elementu, nevis paša elementa ģeometriju. Lai to labotu, mums tas jāizmanto shape-outsideblakus clip-path()īpašumam, piemēram, šajā piemērā:

aplis ()

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

Šī funkcija izveido apli, un augšējā koda piemērā tas izveidos apli ar rādiusu, kas ir puse no augstuma un platuma .element. circle()Funkciju var izmantot arī pašu sintaksi pozicionēšanas formu ietvaros.

URL ()

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

Šajā gadījumā mums ir divi peldoši attēli, viens teksta bloka abās pusēs. Tā kā abiem attēliem ir shape-outsideiestatīts rekvizīts, zemāk esošais teksts izvairīsies no šiem diviem pludiņiem.

Ir arī iespējams iestatīt shape-image-thresholdrekvizītu, kas informēs pārlūku, kuriem pikseļiem, atkarībā no to caurspīdīguma, ir jāizveido forma. Piemēram:

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

Šajā piemērā vienīgajiem pikseļiem, kas veidos formu, jābūt ar 50% pārredzamību un augstāku. Vērtības no 0.0(caurspīdīgas) līdz 1.0(necaurspīdīgas) ir derīgas.

daudzstūris ()

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

Šī funkcija izveido jebkuru formu, kurai ir trīs vai vairāk virsotnes, piemēram:

Ir svarīgi atzīmēt, ka, ja šis rekvizīts tiks animēts, deklarējot animēto stāvokli, tam ir nepieciešams tāds pats punktu skaits:

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

ieliktnis ()

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

inset()ir taisnstūra formu veidošanas funkcija, kurai nepieciešami pieci parametri, bet piektais - border-radiusnav obligāts. Pārējie argumenti ir nobīde uz iekšu no malas .element:

Virs mums ir elements, kas ir 200 pikseļu plats un 200 pikseļu garš, un mēs kompensējam formu līdz 50 pikseļiem katrā virzienā, izņemot kreiso pusi. Tādā veidā teksts ietīsies virs formas, pat ja divs stiepjas uz augšu.

Pārlūkprogrammas atbalsts

Šie pārlūka atbalsta dati ir no Caniuse, kurai ir sīkāka informācija. Cipars norāda, ka pārlūks atbalsta šo un jaunākās versijas funkciju.

Darbvirsma

Chrome Firefox IE Mala Safari
37 62 Nē 79 7,1 *

Mobilais / planšetdators

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