CSS se bazează pe un model de cutie. Dacă aveți o imagine care este un cerc pe care doriți să înfășurați textul, acesta se va înfășura în jurul casetei de delimitare a imaginilor.

Ganditi va in afara cutiei cu CSS forma afara

Formă-afară

O nouă proprietate CSS numită shape-outside vă permite să înfășurați text care să corespundă formei imaginii.

1612137607 930 Ganditi va in afara cutiei cu CSS forma afara

Ce este forma-afară

Shape-outside este o nouă proprietate CSS care schimbă forma articolelor care sunt împachetate. În loc să fie limitat la o casetă de delimitare dreptunghiulară în jurul imaginii, forma-exterior ne permite să modelăm conținutul pentru a se potrivi imaginii.

Iată cum MDN descrie forma exterioară:

forma-exterior CSS proprietatea folosește valori de formă pentru a defini zona de plutire pentru un plutitor și va face ca conținutul în linie să se înfășoare în jurul formei în loc de caseta de delimitare a plutitorului.

Cea mai importantă opțiune din această descriere este că această nouă proprietate se aplică imaginilor care utilizează un float. Proprietatea CSS de formă externă controlează modul în care textul se înfășoară în jurul oricărei imagini plutite. Textul care este înfășurat poate lua forma unui cerc, elipsă, dreptunghi sau poligon.

Folosind forma-exterior

Proprietatea formă-exterior ia o „formă de bază” și îi aplică o funcție de formă. Funcția de formă este utilizată pentru a schimba forma zonei de plutire a formei. Proprietatea CSS de formă externă oferă funcționalitate pentru a crea aceste funcții de formă:

  • cerc
  • elipsă
  • poligon
  • dreptunghi
  • url

Imaginea poate fi poziționată cu aceste valori. Valorile sunt atașate la final:

  • caseta de margine
  • cutie de umplutură
  • frontieră-cutie

Imaginea trebuie să aibă dimensiuni intrinseci. Trebuie să setați înălțimea și lățimea elementului. Aceasta va fi utilizată de funcția de formă pentru a crea un sistem de coordonate care este utilizat la înfășurarea textului în jurul imaginii.

Cerc

Cercul () este una dintre valorile funcționale prevăzute cu forma-exterior. Notația completă pentru cerc () este cerc (r la cx cy) unde r este raza cercului și cx și cy sunt coordonatele centrului cercului. Dacă le omiteți, centrul imaginii va fi folosit ca valori implicite.

Iată un exemplu de utilizare a formei exterioare pe un cerc:

1612137607 356 Ganditi va in afara cutiei cu CSS forma afara
.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();}

Elipsă

Elipsa este o variație a cercului în care elementul este alungit pe axa orizontală sau verticală. Notația completă pentru elipse () este elipsă (rx ry la cx cy) unde rx și ry sunt razele pentru elipsă și cx și cy sunt coordonatele pentru centrul elipsei.

Iată un exemplu de utilizare a formei-exterioare pe elipsă:

1612137607 386 Ganditi va in afara cutiei cu CSS forma afara
.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%);}

Poligon

Funcția poligon oferă o gamă nelimitată de forme. Notația completă pentru poligon () este poligon (x1 y1, x2 y2, …) unde fiecare pereche specifică coordonatele xy pentru un vârf al poligonului. Pentru a utiliza funcția polygon () trebuie să specificați cel puțin 3 perechi de vârf.

Poligonul este utilizat cu o cale de clip. Proprietatea CSS de clip-path creează o regiune de tăiere care definește ce parte a unui element trebuie afișată. Este afișat orice în interiorul regiunii, în timp ce cele din afara sunt ascunse.

Iată un exemplu de utilizare a formei-exterior pentru a crea două forme de triunghi și textul curge între ele:

1612137608 128 Ganditi va in afara cutiei cu CSS forma afara
.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%);}

Suport pentru browser

Forma CSS exterioară este acceptată în principal de Chrome, Opera și Safari.

1612137608 435 Ganditi va in afara cutiei cu CSS forma afara

Obțineți codul

Codul pentru toate exemplele poate fi găsit în repozitia mea github aici.

Mulțumesc că mi-ai citit articolul. Dacă vă place, faceți clic pe pictograma clap de mai jos pentru ca alții să găsească articolul. Iată câteva dintre articolele mele care v-ar putea interesa:

Iată 5 machete pe care le puteți realiza cu FlexBox
Lățimea întâi căutare în JavaScript
Modele de instanțiere în JavaScript