CSS shape-outside

A CSS shape-outside tulajdonság lehetővé teszi, hogy a szöveg ne csak téglalap alakban folyjon körbe egy elem körül, hanem különféle formákat kövessen, például köröket, ellipsziseket vagy poligonokat. Ez különösen hasznos kreatív tördelés és látványos elrendezések kialakításakor.

Kör alakú alakzat használata

A circle() függvénnyel egyszerűen kör alakot adhatunk egy lebegő elemnek, amely köré a szöveg automatikusan igazodik. Ehhez általában a clip-path tulajdonságot is használjuk, hogy vizuálisan látható legyen az alakzat.

Ez a példa bemutatja, hogyan igazodik a szöveg egy kör alakú kép köré.

Poligon alakzat használata

A polygon() függvénnyel tetszőleges alakzatokat definiálhatunk koordináták megadásával. Ez lehetővé teszi, hogy a szöveg szokatlan, egyedi alakzatok köré folyjék.

Ebben a példában a szöveg egy sokszög alakzat köré rendeződik, amelyet a polygon() függvény definiál.

Tippek a shape-outside használatához

Néhány tanács a shape-outside tulajdonság hatékony használatához:

• Mindig használj clip-path-ot a shape-outside mellett, hogy a vizuális forma és a szövegfolyás összhangban legyen.
• A float kötelező a shape-outside működéséhez, ezért mindig lebegővé kell tenni az elemet.
• Kísérletezz különböző alakzatokkal (kör, ellipszis, poligon), hogy változatos és látványos elrendezéseket érj el.