Ta strona została przetłumaczona przez Cloud Translation API.

Pierwsze kroki z kształtami CSS

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

Razvan Caliman

Przez długi czas projektanci stron internetowych musieli tworzyć w ramach ograniczeń prostokąta. Większość treści w internecie jest nadal zamknięta w prostych ramach, ponieważ większość prób tworzenia układów nieprostokątnych kończy się frustracją. Wprowadziliśmy kształty CSS, które są dostępne od wersji Chrome 37. Kształty CSS umożliwiają projektantom stron internetowych owinięcie treści wokół niestandardowych ścieżek, takich jak koła, elipsy i wielokąty, dzięki czemu mogą oni tworzyć projekty bez ograniczeń związanych z prostokątem.

Kształty można definiować ręcznie lub wyodrębniać z obrazów.

Przyjrzyjmy się bardzo prostemu przykładowi.

Być może jesteś tak naiwny jak ja, gdy po raz pierwszy umieszczasz pływający obraz z przezroczystymi częściami, oczekując, że zawartość zostanie owinięta i wypełni luki, a zamiast tego widzisz prostokątny kształt otaczający element. 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ę, aby wyodrębniła kształt z obrazu.

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

Kluczowa jest tutaj właściwość float. Właściwość shape-outside definiuje kształt obszaru, wokół którego ma być zawijana treść. Bez wartości zmiennej typu 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, po prawej stronie filiżanki zostanie utworzona obszar pływający. Chociaż możesz utworzyć obraz z lukami po obu stronach, treści zostaną zawinięte tylko po stronie przeciwnej, określonej przez właściwość float, w lewo lub w prawo, ale nigdy po obu stronach.

W przyszłości będzie można używać shape-outside w elementach, które nie są wycentrowane za pomocą CSS Exclusions.

Tworzenie kształtów ręcznie

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ć jedną z kilku wartości funkcyjnych: circle(), ellipse(), inset() i polygon(). Każda funkcja kształtu przyjmuje zestaw współrzędnych i jest połączona z polem odniesienia, które określa układ współrzędnych. Więcej informacji o polach referencyjnych znajdziesz za chwilę.

Funkcja circle()

Pełna notacja 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 osi 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 przypadku przykładu powyżej treści będą się kończyć na zewnątrz ścieżki okrężnej. Pojedynczy argument 50% określa promień okręgu, który w tym konkretnym przypadku jest równy połowie szerokości lub wysokości elementu. Zmiana wymiarów elementu będzie miała wpływ na promień koła. Oto podstawowy przykład, jak kształty CSS mogą być responsywne.

Zanim przejdziemy dalej, warto pamiętać, ż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ć taki 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ż stosuje tę samą notację co kształty CSS, dzięki czemu możesz ponownie używać wartości.

Ilustracja przedstawiająca kształt „circle()” i ścieżkę obcinania

Ilustracje w tym dokumencie wykorzystują wycinki, aby wyróżnić kształt i ułatwić zrozumienie efektów.

Powrót do koła.

Gdy do określenia promienia koła używasz wartości procentowych, wartość jest obliczana za pomocą nieco bardziej złożonej formuły: sqrt(width^2 + height^2) / sqrt(2). Warto to wiedzieć, ponieważ pomoże Ci to wyobrazić sobie kształt koła, który powstanie, jeśli wymiary elementu nie są równe.

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

Pozycję koła możesz dostosować, ustawiając dokładne wartości współrzędnych jego środka.

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

Umożliwia to umieszczenie środka koła w początku układu współrzędnych. Co to jest układ współrzędnych? Tutaj przedstawiamy pola informacyjne.

Pola referencyjne dla kształtów usługi porównywania cen

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

System współrzędnych dla kształtów w usłudze porównywania cen

Pamiętaj, że shape-outside zmienia kształt obszaru pływającego, wokół którego będzie owijane zawartość. Obszar pływający rozciąga się do zewnętrznych krawędzi pola zdefiniowanego przez właściwość margin. Nazywamy to margin-box i jest to domyślne pole odniesienia dla kształtu, jeśli nie ma żadnego wyraźnego odwołania.

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 tego elementu. W tym momencie można założyć, że początek układu współrzędnych i środek okręgu znajdują się w lewym górnym rogu obszaru treści elementu. Gdy ustawisz margines, zmieni się:

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

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