13 Mar 2021

Interesująca właściwość shape-outside

lemon polygon

Starsi "webowcy" zapewne pamiętają czasy używania . Właściwość ta była używana do praktycznie wszystkiego, od pozycjonowania grafik w tekście "oblewanie grafiki tekstem" czy przez ustawianie divów. W tamtym czasie nie było czegoś takiego jak flex czy grid. Wszędzie wstawiało się clearfix ale nie o tym mowa.

shape-outside ma kilka bardzo interesujących wartości funkcji:

shape-outside: circle(50%);
shape-outside: ellipse(140px 110px at 45% 47.68%);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
shape-outside: url(image.png);
...

Więcej funkcji zobacz na developer.mozilla.org

Wszystkie testy i pogląd najlepiej robić w firefoxie, tam można w devtools modyfikować wygląd ścieżki nie tak jak chrom zgadywać ;). Pierwsze zdjęcie z artykułu pokazuje właśnie ścieżkę z właściwości polygon w firefox. Modyfikacja polega na dodawaniu/usuwaniu oraz przeciąganiu punktów.

1. Float

Niestety stwarza pewien problem, poniżej jak to wygląda jeżeli jest zbyt mało tekstu: float issue
Kiedyś byśmy skorzystali z clearfix i innych "wynalazków", obecnie robimy to za pomocą "display: flow-root;" które to dodajmy do elementu nadrzędnego w tym przypadku do article. Tak naprawdę float wykorzystujemy bardzo sporadycznie, jedynie do pozycjonowania obrazków w tekście, a to zdarza mi się raz na rok 😉

2. Circle

Nic szczególnego, podajemy w procentach promień, możemy zmienić środek względem obrazka - shape-outside: circle(46.82% at center center);

3. Ellipse

Tak samo jak circle nic szczególnego mamy o jedne punkt więcej czyli 3 punkty, środek, promień oraz dodatkowy punkt który tworzy nam elipsę - shape-outside: ellipse(140px 110px at 45% 47.68%);

4. Polygon

Ta właściwość jest bardziej intersująca, bo punktów na ścieżce możemy ustawić wiele, a także je usuwać. Bardzo przydaje się do skomplikowanych kształtów - shape-outside: polygon(76.66% 28px, 112.59% 25.28%, 80.48% 33.6%, 97.36% 58.85%, 74.96% 87.69%, 6.98% 101.83%, 1px 50%, 2.76% 7.07%);

5. Url

Chyba najbardziej interesująca właściwość. Do url shape-outside: url(image.png); należy dodać ten sam obrazek co w html. Obrazek musi być transparentny, wtedy przeglądarka zachowuje się jak polygon ale sama na podstawie transparentności odczytuje ścieżkę i ustawia tekst.

Poniżej przykład zachowania się poszczególnych właściwości.

See the Pen
shape-outside
by Greg (@Tomik23)
on CodePen.


* Niestety ale w wersji URL występuje CORS i trzeba to obsłużyć, a że codepen nie posiadam wersji pro to nie dodam lokalnie pliku i przykład url nie działa.

Co do kompatybilności z przeglądarkami to oczywiście nie działa w IE11 ale kto by się przejmował 😉