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

Od dawna projektanci stron internetowych muszą tworzyć treści wewnątrz 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ą. Ta zmiana ma ulec zmianie wraz z wprowadzeniem kształtu CSS, który będzie dostępny w Chrome w wersji 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. Do rozwiązania tego problemu można 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 określa kształt obszaru, wokół którego zawinie się treść, ale bez elementu pływającego 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 unosi się w lewo, po prawej stronie kubka zostanie utworzony obszar pływania. 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.

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ć 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()

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

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 okręgu 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 będzie 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ż 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.

Wróć do kształtu koła.

Gdy dla promienia okręgu korzystasz z procentów, wartość jest obliczana za pomocą nieco bardziej złożonej wzoru: sqrt(szerokość^2 + wysokość^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 będzie elastyczny lub odpowiednio sztywny zgodnie z Twoimi potrzebami.

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

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

Powoduje to ustawienie środka okręgu na początku układu współrzędnych. Co to jest układ współrzędnych? Tutaj wprowadzamy pola referencyjne.

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.