Tvarovo zvonka - Triky CSS

Anonim

Tieto shape-outsidekontroly vlastníctva, ako bude obsah zabaliť okolo vznášal prvku ohraničujúce-box. Spravidla je to tak, aby sa text mohol preformátovať cez tvar, ako je kruh, elipsa alebo mnohouholník:

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

Je dôležité si uvedomiť, že táto vlastnosť bude zatiaľ fungovať iba na plávajúcich prvkoch, aj keď sa to v budúcnosti pravdepodobne zmení. S shape-outsidevlastnosťou je možné manipulovať aj pomocou prechodov alebo animácií.

Hodnoty

  • circle(): na výrobu kruhových tvarov.
  • ellipse(): na výrobu eliptických tvarov.
  • inset(): na výrobu obdĺžnikových tvarov.
  • polygon(): na vytvorenie ľubovoľného tvaru s 3 alebo viac vrcholmi.
  • url(): určuje, ktorý obrázok by sa mal použiť na zabalenie textu.
  • initial: plaváková plocha nie je ovplyvnená.
  • inherit: dedí shape-outsidehodnotu od rodiča.

Nasledujúce hodnoty určujú, ktorý odkaz na škatuľový model by sa mal použiť na umiestnenie tvaru v rámci:

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

Tieto hodnoty by mali byť pripojené na koniec, napríklad: shape-outside: circle(50% at 0 0) padding-box. Štandardne sa použije margin-boxreferencia.

elipsa ()

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

Táto ellipse()funkcia vyžaduje hodnoty polomerov pre os x, y elipsy, za ktorými nasledujú súradnice, aby sa stred útvaru umiestnil do jeho ohraničovacieho poľa. Napríklad vyššie uvedený príklad umiestni stred elipsy do vertikálneho a horizontálneho stredu .elementdiv:

Aj keď vyššie uvedená ukážka môže naznačovať, že meníme tvar divsamotnej, pridaním okrajov a obrázka na pozadí zistíme, že ohraničujúci rámček je v skutočnosti stále obdĺžnikový:

Možno by bolo lepšie myslieť na to takto: s touto shape-outsidevlastnosťou meníme vzťah iných prvkov okolo prvku, nie geometriu samotného prvku. Aby sme to napravili, budeme musieť použiť shape-outsidetúto clip-path()vlastnosť, napríklad v tomto príklade:

kruh ()

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

Táto funkcia vytvorí kruh a v príklade kódu vyššie vytvorí kruh s polomerom, ktorý je polovicou výšky a šírky .element. circle()Funkcia môže tiež použiť rovnakú syntax pre polohovanie tvaru v.

url ()

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

V tomto prípade máme dva plávajúce obrázky, jeden na oboch stranách bloku textu. Pretože obidva obrázky majú nastavenú shape-outsidevlastnosť, text pod nimi sa týmto dvom plavákom vyhne.

Je tiež možné nastaviť shape-image-thresholdvlastnosť, ktorá bude informovať prehliadač, ktoré pixely by mali v závislosti na svojej priehľadnosti vytvárať tvar. Napríklad:

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

V tomto príklade musia mať pixely, ktoré vytvoria tvar, priehľadnosť najmenej 50%. Hodnoty od 0.0(priehľadné) do 1.0(nepriehľadné) sú platné.

mnohouholník ()

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

Táto funkcia vytvorí akýkoľvek tvar, ktorý má tri alebo viac vrcholov, napríklad:

Je dôležité si uvedomiť, že ak sa má táto vlastnosť animovať, vyžaduje pri deklarovaní animovaného stavu rovnaký počet vrcholov:

.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žka ()

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

inset()je funkcia na vytváranie obdĺžnikových tvarov, má päť parametrov, ale piaty, pre border-radiusje voliteľný. Ostatné argumenty sú posuny smerom dovnútra od okraja .element:

Hore máme prvok, ktorý je široký 200 pixelov a vysoký 200 pixelov, a tvar kompenzujeme v rozsahu do 50 pixelov v každom smere okrem ľavej strany. Týmto spôsobom sa text zalomí nad tvarom, aj keď sa div rozširuje na hornú časť.

Podpora prehliadača

Údaje o podpore tohto prehľadávača sú od spoločnosti Caniuse, ktorá obsahuje viac podrobností. Číslo označuje, že prehliadač podporuje túto funkciu v danej verzii alebo vyššej.

Desktop

Chrome Firefox IE Hrana Safari
37 62 Nie 79 7,1 *

Mobil / tablet

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