CSS Academy · Lekcja

shape-outside do zawijania tekstu

Nauczy się Pan/Pani zawijać tekst wokół niestandardowych kształtów za pomocą shape-outside na elementach pływających.

shape-outside do zawijania tekstu to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

Moduł CSS Shapes

Moduł CSS Shapes umożliwia zawijanie tekstu wokół nieprostokątnych kształtów. Podstawową właściwością jest shape-outside, która definiuje kształt, wokół którego przepływa tekst.

Wymagania shape-outside

Właściwość shape-outside działa wyłącznie na elementach opływanych. Element musi być opływany (z lewej lub z prawej strony), aby sąsiadujący tekst mógł opływać zdefiniowany kształt.

<div class="circle-float"></div>
<p>Text wraps around the circular float, following the shape-outside boundary instead of the element's rectangular box, creating a natural flow around curved shapes for magazine-style layouts.</p>

shape-outside: circle()

Tekst opływa kołową ścieżkę zdefiniowaną względem opływanego elementu:

<div class="profile-image"></div>
<p>Paragraph text wraps neatly around the circular profile image thanks to shape-outside matching the visual border-radius.</p>

shape-outside: ellipse()

Tekst opływa eliptyczną ścieżkę:

<div class="cutout"></div>
<p>Text on the left flows around the elliptical shape on the right, curving inward and outward with the ellipse's boundary.</p>

shape-outside: polygon()

Tekst opływa ścieżkę wielokąta, umożliwiając tworzenie złożonych układów redakcyjnych:

<div class="diagonal-image"></div>
<p>Text follows the diagonal polygon edge as it wraps down the page.</p>

shape-outside z obrazem

Przekaż adres URL, aby użyć kanału alfa obrazu jako granicy kształtu. Tekst będzie opływać nieprzezroczyste obszary obrazu:

<div class="character"></div>
<p>Text hugs the silhouette defined by the gradient's alpha channel, simulating shape-outside from an image mask.</p>

shape-margin

shape-margin dodaje odstęp między ścieżką shape-outside a tekstem, który ją opływa:

<div class="shape-float"></div>
<p>A 16px shape-margin adds breathing room between the circular float and the wrapping text.</p>

shape-image-threshold

W przypadku użycia obrazu dla shape-outside shape-image-threshold ustawia próg przezroczystości alfa (od 0 do 1), który określa granicę kształtu.

Zastosowania w projektowaniu

CSS Shapes umożliwiają tworzenie układów redakcyjnych w stylu magazynowym, wyróżnionych cytatów z opływaniem tekstu wokół obrazu oraz obszarów inicjałów z nieregularnym przepływem tekstu — efektów, które wcześniej można było uzyskać wyłącznie w projektach drukowanych lub za pomocą SVG.

Obsługa przeglądarek

shape-outside z podstawowymi kształtami (circle, ellipse, polygon, inset) jest obsługiwane we wszystkich nowoczesnych przeglądarkach. shape-outside z adresem URL obrazu ma szerszą obsługę, ale działanie może się różnić. Zawsze należy przeprowadzić testy.

Przykład praktyczny: inicjał

Trójkątny obszar inicjału, wokół którego tekst opływa dużą dekoracyjną literę:

<div><span class="drop-cap">T</span>his paragraph begins with a large drop cap letter that text wraps around using shape-outside on the enlarged first character, a classic print typography effect brought to CSS.</div>

Szybkie sprawdzenie

Co jest wymagane, aby shape-outside działało na elemencie?

Podsumowanie

shape-outside umożliwia przepływ tekstu wokół nieprostokątnych kształtów zdefiniowanych dla elementów pływających. Kształtami mogą być okręgi, elipsy, wielokąty lub kanały alfa obrazów. Aby dodać odstęp, należy użyć shape-margin. Warto połączyć tę właściwość z clip-path, aby wizualnie dopasować element do zdefiniowanego kształtu.

Często zadawane pytania

Czy lekcja „shape-outside do zawijania tekstu” jest bezpłatna?

Tak — pełny tekst „shape-outside do zawijania tekstu” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „shape-outside do zawijania tekstu”?

Nauczy się Pan/Pani zawijać tekst wokół niestandardowych kształtów za pomocą shape-outside na elementach pływających. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.

Ile czasu zajmuje lekcja „shape-outside do zawijania tekstu”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?

Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do CSS Academy