Google używa technologii AI do tłumaczenia treści na Twój preferowany język. Tłumaczenia wygenerowane przez AI mogą zawierać błędy.

Pierwsze kroki z kształtami CSS

Zawijanie treści wokół niestandardowych ścieżek

Razvan Caliman

Przez długi czas projektanci stron internetowych musieli tworzyć w ramach ograniczeń prostokąta. Większość treści w internecie jest nadal uwięziona w prostych polach, ponieważ większość prób stworzenia niestandardowego układu kończy się frustracją. To się jednak zmieni wraz z wprowadzeniem kształtów CSS, które są dostępne od wersji Chrome 37. Kształty CSS umożliwiają projektantom stron internetowych zawijanie treści wokół niestandardowych ścieżek, takich jak okręgi, elipsy i wielokąty, co pozwala im uwolnić się od ograniczeń prostokąta.

Kształty można definiować ręcznie lub wnioskować na podstawie obrazów.

Przeanalizujmy bardzo prosty przykład.

Być może zdarzyło Ci się, tak jak mi, naiwnie oczekiwać, że po umieszczeniu obrazu z przezroczystymi elementami treść zawinie się i wypełni luki, a potem rozczarować się, gdy wokół elementu pozostał prostokątny kształt zawijania. Aby rozwiązać ten problem, możesz użyć kształtów CSS.

<img class="element" src="image.png" />
<p>Lorem ipsum…</p>

<style>
.element{
  shape-outside: url(image.png);
  shape-image-threshold: 0.5;
  float: left;
}
</style>

Deklaracja CSS shape-outside: url(image.png) informuje przeglądarkę, że ma wyodrębnić kształt z obrazu.

Właściwość shape-image-threshold określa minimalny poziom przezroczystości pikseli, które zostaną użyte do utworzenia kształtu. Wartość musi mieścić się w zakresie od 0.0 (pełna przezroczystość) do 1.0 (pełna nieprzezroczystość). Wartość shape-image-threshold: 0.5 oznacza, że do utworzenia kształtu zostaną użyte tylko piksele o kryciu wynoszącym co najmniej 50%.

Kluczowa jest tu właściwość float. Właściwość shape-outside określa kształt obszaru, wokół którego będzie zawijana treść, ale bez właściwości float nie zobaczysz efektów kształtu.

Elementy mają obszar pływający po przeciwnej stronie wartości float. Jeśli na przykład element z obrazem filiżanki kawy jest przesunięty w lewo, obszar przesunięcia zostanie utworzony po prawej stronie filiżanki. Nawet jeśli utworzysz obraz z odstępami po obu stronach, treść będzie opływać kształt tylko po przeciwnej stronie określonej przez właściwość float (po lewej lub po prawej stronie, nigdy po obu).

W przyszłości, po wprowadzeniu wykluczeń CSS, będzie można używać właściwości shape-outside w elementach, które nie są pływające.

Ręczne tworzenie kształtów

Oprócz wyodrębniania kształtów z obrazów możesz też kodować je ręcznie. Do tworzenia kształtów możesz wybrać kilka wartości funkcjonalnych: circle(), ellipse(), inset() i polygon(). Każda funkcja kształtu akceptuje zestaw współrzędnych i jest sparowana z polem referencyjnym, które określa układ współrzędnych. Za chwilę dowiesz się więcej o polach referencyjnych.

Funkcja circle()

Ilustracja przedstawiająca wartość kształtu circle()

Pełny zapis wartości kształtu koła to circle(r at cx cy), gdzie r to promień koła, a cx i cy to współrzędne środka koła na osiach X i Y. Współrzędne środka okręgu są opcjonalne. Jeśli je pominiesz, domyślnie zostanie użyty środek elementu (punkt przecięcia jego przekątnych).

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

W przykładzie powyżej treść będzie zawijać się wokół zewnętrznej krawędzi okrągłej ścieżki. Pojedynczy argument 50% określa promień okręgu, który w tym konkretnym przypadku wynosi połowę szerokości lub wysokości elementu. Zmiana wymiarów elementu wpłynie na promień kształtu koła. To podstawowy przykład tego, jak kształty CSS mogą być elastyczne.

Zanim przejdziemy dalej, warto przypomnieć, że kształty CSS wpływają tylko na kształt obszaru pływającego wokół elementu. Jeśli element ma tło, nie zostanie ono przycięte przez kształt. Aby uzyskać ten efekt, musisz użyć właściwości z maskowania CSS – clip-path lub mask-image. Właściwość clip-path jest bardzo przydatna, ponieważ używa tej samej notacji co kształty CSS, dzięki czemu można ponownie używać wartości.

Ilustracja przedstawiająca kształt `circle()` i ścieżkę przycinania

Ilustracje w tym dokumencie wykorzystują przycinanie, aby podkreślić kształt i pomóc Ci zrozumieć efekty.

Wróć do kształtu koła.

Gdy używasz wartości procentowych do określenia promienia okręgu, wartość jest obliczana za pomocą nieco bardziej złożonego wzoru: sqrt(szerokość^2 + wysokość^2) / sqrt(2). Warto o tym pamiętać, ponieważ dzięki temu łatwiej wyobrazić sobie, jaki będzie kształt koła, jeśli wymiary elementu nie będą równe.

We współrzędnych funkcji kształtu można używać wszystkich typów jednostek CSS – px, em, rem, vw, vh itd. Możesz wybrać ten, który jest wystarczająco elastyczny lub sztywny, aby spełnić Twoje potrzeby.

Położenie okręgu możesz dostosować, ustawiając dokładne wartości współrzędnych jego środka.

.element{
  shape-outside: circle(50% at 0 0);
}

Spowoduje to umieszczenie środka okręgu w początku układu współrzędnych. Czym jest układ współrzędnych? W tym miejscu wprowadzamy pola referencyjne.

Pola referencyjne kształtów CSS

Pole referencyjne to wirtualne pole wokół elementu, które określa układ współrzędnych używany do rysowania i pozycjonowania kształtu. Punkt początkowy układu współrzędnych znajduje się w lewym górnym rogu, oś X jest skierowana w prawo, a oś Y – w dół.

Pamiętaj, że shape-outside zmienia kształt obszaru pływającego, wokół którego będzie zawijana treść. Obszar pływający rozciąga się do zewnętrznych krawędzi pola określonego przez właściwość margin. Nazywa się to margin-box i jest domyślnym polem referencyjnym kształtu, jeśli nie określono żadnego innego.

Te 2 deklaracje CSS dają identyczne wyniki:

.element{
  shape-outside: circle(50% at 0 0);
  /* identical to: */
  shape-outside: circle(50% at 0 0) margin-box;
}

Nie ustawiliśmy jeszcze marginesu elementu. W tym momencie można bezpiecznie założyć, że początek układu współrzędnych i środek okręgu znajdują się w lewym górnym rogu obszaru zawartości elementu. Sytuacja zmienia się, gdy ustawisz marżę:

.element{
  shape-outside: circle(50% at 0 0) margin-box;
  margin: 100px;
}

Początek układu współrzędnych znajduje się teraz poza obszarem zawartości elementu (100 pikseli w górę i 100 pikseli w lewo), podobnie jak środek okręgu. Obliczona wartość promienia okręgu również rośnie, aby uwzględnić zwiększoną powierzchnię układu współrzędnych ustanowionego przez pole referencyjne margin-box.