Vnější tvar - Triky CSS

Anonim

Tyto shape-outsidekontroly vlastnictví, jak bude obsah zabalit kolem vznášel prvku ohraničující-box. Obvykle je to tak, aby se text mohl přetvořit přes tvar, jako je kruh, elipsa nebo mnohoúhelník:

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

Je důležité si uvědomit, že tato vlastnost bude prozatím fungovat pouze na plovoucích prvcích, i když se to v budoucnu pravděpodobně změní. shape-outsideVlastnost lze také manipulovat s přechody nebo animace.

Hodnoty

  • circle(): pro vytváření kruhových tvarů.
  • ellipse(): pro vytváření eliptických tvarů.
  • inset(): pro vytváření obdélníkových tvarů.
  • polygon(): pro vytvoření libovolného tvaru se 3 nebo více vrcholy.
  • url(): určuje, který obrázek by měl být použit k zabalení textu.
  • initial: plovoucí oblast není ovlivněna.
  • inherit: zdědí shape-outsidehodnotu od rodiče.

Následující hodnoty určují, který odkaz modelu pole by měl být použit pro umístění tvaru uvnitř:

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

Tyto hodnoty by měly být připojeny na konec, například: shape-outside: circle(50% at 0 0) padding-box. Ve výchozím nastavení se použije margin-boxodkaz.

elipsa()

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

ellipse()Funkce vyžaduje poloměry hodnoty pro x, y osa elipsy následované souřadnicemi do polohy na střed tvaru v jeho ohraničení. Například výše uvedený příklad umístí střed elipsy do svislého a vodorovného středu .elementdiv:

Ačkoli výše uvedená ukázka může naznačovat, že měníme tvar divsamotné, přidáme-li hranice a obrázek na pozadí, zjistíme, že ohraničující rámeček je ve skutečnosti stále obdélníkový:

Možná by bylo lepší si to představit takto: s shape-outsidevlastností měníme vztah jiných prvků kolem prvku, nikoli geometrii samotného prvku. Abychom to napravili, budeme muset použít shape-outsidevedle clip-path()vlastnosti, jako v tomto příkladu:

kruh()

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

Tato funkce vytvoří kruh a v příkladu kódu výše vytvoří kruh s poloměrem, který je poloviční výškou a šířkou .element. circle()Funkce může také použít stejnou syntaxi pro polohování tvaru v.

url ()

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

V tomto případě máme dva plovoucí obrázky, jeden na obou stranách bloku textu. Vzhledem k tomu, že oba obrázky mají nastavenou shape-outsidevlastnost, text pod nimi se těmto dvěma floatům vyhne.

Je také možné nastavit shape-image-thresholdvlastnost, která bude prohlížeč informovat, které pixely by v závislosti na jejich průhlednosti měly vytvořit tvar. Například:

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

V tomto příkladu pouze pixely, které vytvoří tvar, musí mít 50% průhlednost a vyšší. Hodnoty od 0.0(transparentní) do 1.0(neprůhledné) jsou platné.

polygon()

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

Tato funkce vytvoří libovolný tvar, který má tři nebo více vrcholů, například:

Je důležité si uvědomit, že pokud se tato vlastnost bude animovat, vyžaduje stejný počet vrcholů, když deklarujete animovaný stav:

.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 funkce pro vytváření obdélníkových tvarů, vyžaduje pět parametrů, ale pátý, pro border-radiusje volitelný. Ostatní argumenty jsou posuny směrem dovnitř od okraje .element:

Nahoře máme prvek, který je 200px široký a 200px vysoký a posunujeme tvar do 50px v každém směru kromě levé strany. Tímto způsobem se text zalomí nad tvarem, přestože se div rozšiřuje nahoru.

Podpora prohlížeče

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.

plocha počítače

Chrome Firefox TJ Okraj Safari
37 62 Ne 79 7,1 *

Mobilní / Tablet

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