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

Pierwsze kroki z kształtami CSS

Owijanie treści ścieżkami niestandardowymi

Razvan Caliman

Przez długi czas projektanci stron internetowych byli zmuszani do tworzenia treści zgodnie z ograniczeniami prostokąta. Większość treści w internecie jest nadal uwięziona w prostych pudełkach, ponieważ większość twórczyń z wykorzystaniem nieprostokątnego układu kończy się frustracją. To się zmieni po wprowadzeniu kształtów CSS, które są dostępne od Chrome 37. Kształty CSS umożliwiają projektantom stron internetowych otoczenie treści wokół niestandardowych ścieżek, takich jak okręgi, elipsy i wielokąty, co pozwala wydostać się z ograniczeń prostokąta.

Kształty można definiować ręcznie lub określać je z obrazów.

Spójrzmy na bardzo prosty przykład.

Być może podczas pierwszego pływania obrazu z przezroczystymi częściami zawartość strony w treści zawijasz i wypełniałaś luki, masz dość naiwnego zachowania jak ja. Ostatnio rozczarował Cię prostokątny kształt zawijania widoczny wokół elementu. 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ę, ż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 się mieścić w zakresie od 0.0 (pełna przezroczystość) do 1.0 (pełna nieprzezroczysta). Oznacza to, że do utworzenia kształtu zostaną użyte tylko piksele o przezroczystości co najmniej 50%.shape-image-threshold: 0.5

Właściwość float ma tutaj kluczowe znaczenie. Właściwość shape-outside określa kształt obszaru, wokół którego zostanie owinięta treść. Jeśli jednak nie użyjesz pływającej, efekty tej zmiany nie będą widoczne.

Elementy mają pole powierzchni zmiennoprzecinkowej po przeciwnej stronie wartości float. Jeśli na przykład element z obrazem filiżanki pływa w lewo, na prawo od filiżanki zostanie utworzony obszar zmiennoprzecinkowy. Mimo że możesz opracować obraz z lukami po obu stronach, treść zostanie zawijana tylko wokół kształtu po przeciwnej stronie wyznaczonej przez właściwość pływającej – po lewej lub prawej stronie, ale nigdy z obu tych stron.

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

Ręczne tworzenie kształtów

Oprócz wyodrębniania kształtów z obrazów możesz też zakodować je ręcznie. Aby utworzyć kształty, możesz wybrać jedną z kilku wartości funkcjonalnych: circle(), ellipse(), inset() i polygon(). Każda funkcja kształtu akceptuje zestaw współrzędnych i jest połączona z ramką odniesienia, która określa układ współrzędnych. Za chwilę więcej informacji o polach referencyjnych.

FunkcjaCircle()

Pełny zapis wartości kształtu okręgu 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, jako domyślny zostanie użyty środek elementu (przecięcie jego przekątnych).

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

W przykładzie powyżej treść zostanie obcięta poza okrągłą ścieżką. Pojedynczy argument 50% określa promień okręgu, który w tym przypadku jest równy połowie szerokości lub wysokości elementu. Zmiana wymiarów elementu wpłynie na promień okręgu. To podstawowy przykład responsywności kształtów CSS.

Zanim przejdziemy dalej, na marginesie: trzeba pamiętać, że kształty CSS wpływają tylko na kształt obszaru pływającego wokół elementu. Jeśli element ma tło, kształt nie zostanie przycięty. Aby osiągnąć 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, bo jest zgodna z tym samym zapisem co w przypadku kształtów CSS, więc możesz wielokrotnie używać tych samych wartości.

Ilustracja kształtu „Circle()” + Clip-path

Ilustracje w tym dokumencie wykorzystują przycinanie, by wyróżnić kształt i pomóc zrozumieć efekty.

Wróć do kształtu okręgu.

Przy wykorzystaniu wartości procentowych dla promienia okręgu wartość jest obliczana za pomocą nieco bardziej złożonego wzoru: sqrt(width^2 + wysokość^2) / sqrt(2). Warto to zrozumieć, bo dzięki temu łatwiej będzie Ci sobie wyobrazić, jaki będzie kształt okręgu, 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ć taki, który jest elastyczny lub wystarczająco sztywny, aby odpowiadał Twoim potrzebom.

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

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

Określa położenie środka okręgu na początku układu współrzędnych. Co to jest układ współrzędnych? W tym miejscu wprowadzamy pola referencyjne.

Pola z odwołaniami do kształtów CSS

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

Pamiętaj, że shape-outside zmienia kształt obszaru pływającego, wokół którego zostanie zwinięta. Obszar zmiennoprzecinkowy rozciąga się do zewnętrznych krawędzi pola określonych przez właściwość margin. Jest ono nazywane margin-box i jest domyślnym polem referencyjnym dla kształtu, jeśli żadne z nich nie jest wyraźnie wspomniane.

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 ustawiono jeszcze marży dla tego elementu. W tym momencie można przyjąć, że punkt początkowy układu współrzędnych i środek okręgu znajdują się w lewym górnym rogu obszaru treści elementu. Zmienia się to po ustawieniu marży:

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

Punkt początkowy układu współrzędnych znajduje się teraz poza obszarem treści elementu (100 piks. w górę i 100 pikseli po lewej) oraz środek okręgu. Obliczona wartość promienia okręgu rośnie także, uwzględniając zwiększoną powierzchnię układu współrzędnych określoną przez pole odniesienia margin-box.