Jak zacząć od CSS Shapes

Sieć zazwyczaj była miejscem pudełek i prostokątów, ale nowa specyfikacja CSS to zmieni. W tym artykule przedstawię Wam Kształty CSS, wyjaśniając czym one są i podstawowe pojęcia, których potrzebujesz, aby zacząć ich używać.

Wszystkie przykłady są powiązane z Githubem , dzięki czemu można wyświetlić i pobrać kod źródłowy jako punkt wyjścia do własnych eksperymentów.

Czym są kształty CSS?

The Specyfikacja CSS Shapes opisuje geometryczne kształty dla nas w CSS. Na poziomie 1 specyfikacji, teraz w Statusie statusu kandydata, kształty mogą być stosowane tylko do elementów pływających. Przykład to najprostszy sposób na rozpoczęcie.

.shape { float: left; width: 150px; height: 150px; margin: 20px; shape-outside: circle(50%); }

W powyższym przykładzie dodajemy tę klasę do obrazu. Przesuwamy obraz w lewo, nadając mu szerokość, wysokość i margines, a następnie używamy kształtu właściwości -na zewnątrz, aby wygiąć tekst wokół koła.

Zobacz przykład

Zanim przejdziesz dalej, użyj Chrome na górze http://betravis.github.io/shape-tools/ i przeciągnij zakładkę bookmarków Show Shapes na pasek zakładek.

Jeśli przejdziesz do mojej przykładowej strony i klikniesz bookmarklet, zobaczysz, jak rysuje się kształt koła:

Podstawowe kształty

Właściwość kształtu zewnętrznego używana w naszym prostym przykładzie może przyjmować różne wartości. Pierwsze możliwości określane są w specyfikacji jako "podstawowe kształty". Te podstawowe kształty są funkcjami:

wstawka()
okrąg()
elipsa()
wielokąt()

wstawka()

Funkcja inset () służy do definiowania kształtów na prostokątnych elementach, które unoszą się za nas iw większości przypadków są odpowiednie. Może się zdarzyć, że dodatkowa kontrola stanie się użyteczna.

Funkcję inset () można przekazać cztery argumenty pozycji, które są przesunięciem do wewnątrz od krawędzi elementu, plus promień obramowania w kształcie prostokąta, poprzedzony słowem kluczowym "runda".

wstawka (górny prawy dolny lewy róg o promieniu brzegu);

na przykład:

inset(10px 20px 10px 20px round 50%);

Argumenty wstawki mają taki sam skrót jak margines, więc jeśli chcesz wstawić 20 pikseli wokół elementu, możesz użyć:

inset(10px round 50%);

W moim przykładzie użyłem obrazu, który ma dużo białej przestrzeni poniżej. Jeśli po prostu unoszę obraz, mam pod sobą dużą lukę. Używając wartości wstawki, mogę wstawić dno kształtu, pozwalając tekstowi zbliżyć się do niego.

.shape { float: left; width: 200px; height: 200px; shape-outside: inset(0 0 70px 0 round 10px); }

Zobacz przykład i użyj bookmarkletu Show Shapes, aby zobaczyć kształt.

okrąg()

Na początku tego artykułu spotkaliśmy się z podstawowym kształtem koła. Wartość kształtu circle () jest w pełni opisana w specyfikacji jako:

circle(r at cx cy);

Wartością r jest promień okręgu, 50% to połowa szerokości elementu. Pozostałe dwie wartości to współrzędne x i y dla środka okręgu, co zasadniczo pozwala na przesunięcie koła.

W moim przykładzie użyłem:

circle(50%);

Mogłem również opisać to jako:

circle(50% at 50% 50%);

Na mojej przykładowej stronie Github Mam ikonę, ma przezroczyste tło i aby przykłady były wyraźniejsze nadałem obrazowi szary kolor tła, dopełnienie, obramowanie i margines:

.shape { float: left; width: 150px; height: 150px; margin: 20px; padding: 20px; background-color: #cccccc; border: 10px solid #999999; }

Został ustawiony w lewo, a jeśli nie zastosujemy żadnych kształtów do tego obrazu, wygląda to jak zrzut ekranu poniżej.

Mogę utworzyć prosty kształt koła:

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

Jeśli użyję wartości koła w kształcie-wewnątrz, a tym razem zmień współrzędne. Koło jest wypychane w górę i w lewo.

.circle-coords { shape-outside: circle(50% at 30% 30%); }

Możesz użyć wartości bezwzględnych lub względnych dla współrzędnych lub słów kluczowych, tak jak przy ustawianiu obrazów tła.

W tym momencie warto rzucić okiem na koncepcję skrzynek referencyjnych. Istnieją cztery możliwe pola referencyjne, z których możemy skorzystać:

content-box
padding-box
border-box
pole margin

Domyślnym polem odniesienia dla koła jest pole marginesu.

shape-outside: circle(50%) margin-box;

Czy to samo, co pisanie:

shape-outside: circle(50%);

Jak można się spodziewać marginesy są ograniczone marginesem elementu, ramka obramowania przy obramowaniu, dopełnienie pola przez dopełnienie i zawartość-pola będzie ograniczona przez rzeczywistą treść.

Czytać Ten artykuł dla pełnego wyjaśnienia działania skrzynek referencyjnych w kontekście CSS Shapes.

Jeśli przyjrzymy się mojej przykładowej stronie za pomocą skryptozakładki Show Shapes, widać wyraźnie, jak to działa.

Ostatnią rzeczą, którą pokażę ci w kółku, jest to, jak klipować zawartość, aby nadążyć za utworzonym przez ciebie kształtem. Kiedy dodałem widoczne dopełnienie i granice do mojego elementu, nasz tekst wydaje się nakładać na siebie. Możemy faktycznie przyciąć zawartość kształtu za pomocą właściwości clip-path ze specyfikacji CSS Masking Level 1. Obecnie wymaga prefiksowania (patrz [można użyć] [7]).

.circle-clip { shape-outside: circle(50%) margin-box; -webkit-clip-path: circle(50%) ; clip-path: circle(50%) ; }

Jak widać na powyższym zrzucie ekranu, nasz element jest teraz przycinany, aby podążać za krzywą. Działa to bardzo dobrze w przypadku obrazów, umożliwiając ich przycięcie, aby tekst wydawał się płynąć po krzywych.

elipsa()

Wiele kształtów można zakrzywiać dookoła, używając wartości elipsy, nawet jeśli nie są to oczywiście elipsy.

Używanie elipsy jest bardzo podobne do używania kółka, z tym wyjątkiem, że zamiast jednej wartości dla promienia, musisz osobno określić promień x i y.

shape-outside(rx ry at cx cy);

Wartości promienia mogą być wartościami bezwzględnymi lub względnymi, a także słowami kluczowymi najbliższymi i najdalszymi . Te słowa kluczowe są również ważne do wykorzystania jako promień koła, chociaż mniej przydatne w praktyce.

Mój przykład bez nałożonego kształtu jest po prostu pływający.

.shape { float: left; width: 200px; height: 200px; margin: 20px; }

Mogę użyć słów kluczowych dotyczących promienia:

.ellipse-keywords { shape-outside: ellipse(closest-side farthest-side at 50% 50%); }

Który tworzy krąg tego elementu, ponieważ rzeczywiste wymiary obrazu są kwadratowe.

Aby wymusić elipsę, używam jednostek długości bezwzględnej.

.ellipse-values { shape-outside: ellipse(90px 150px at 50% 50%); }

Aby przesunąć elipsę, zmieniam współrzędne:

.ellipse-center { shape-outside: ellipse(closest-side farthest-side at 70% 80%); }

wielokąt()

Jeśli potrzebujesz naprawdę precyzyjnej kontroli podczas rysowania kształtu, pomoże ci wartość wielokąta. Możesz określić tyle współrzędnych, ile potrzebujesz dla swojego kształtu - z minimum trzema.

Każda para współrzędnych jest oddzielona przecinkiem.

.shape-polygon { shape-outside: polygon(0 20px, 160px 40px, 180px 70px, 180px 120px, 120px 200px, 60px 210px, 0 220px); }

Za pomocą zakładki Book Shapes możesz zobaczyć kształt.

Kształty z obrazu

Innym sposobem tworzenia kształtu jest nadanie obrazowi wartości dla kształtu zewnętrznego. Ten obraz musi mieć kanał alfa. (Możesz dowiedzieć się więcej o tym, jak zapisywać obrazy, jeśli używasz Photoshopa na Blog Adobe Web Platform .)

Możesz użyć obrazu już na swojej stronie lub przekazać obraz z innego miejsca.

Uwaga: używany obraz musi być zgodny z CORS. Kiedy po raz pierwszy się z tym bawiłem, nie mogłem zrozumieć, dlaczego mój kształt nie działa, gdy testowałem lokalnie. Dowiedz się więcej tutaj .

Moja przykładowa strona zawiera trzy różne zastosowania tej techniki. W pierwszym przykładzie mam obraz na mojej stronie i przekazuję go również jako adres URL, z którego można utworzyć kształt.

.shape-image { shape-outside: url('noun_109069.png'); shape-image-threshold: 0.5; }

Próg obrazu kształtu definiuje próg nieprzezroczystości, którego powinniśmy użyć, od 0, który jest całkowicie przezroczysty do 1, który jest całkowicie nieprzejrzysty.

Jak widać nasz tekst pojawia się bezpośrednio na obrazie.

W drugim przykładzie używam innej ikony, a także ustawię właściwość marginesu kształtu . Tworzy to margines wygięty wokół ścieżki elementu.

.shape-image-margin { shape-outside: url('noun_109207_cc.png'); shape-image-threshold: 0.5; shape-margin: 20px; }

Nie musisz tworzyć kształtu opartego na czymś na stronie. W tym ostatnim przykładzie utworzyłem obraz w Photoshopie, który wygląda właśnie tak.

Wykorzystam to i utworzę kształt na niektórych generowanych treściach, aby ukształtować mój tekst wzdłuż ukośnej linii.

.content:before { content: ""; float: left; width: 200px; height: 200px; shape-outside: url('alpha.png'); shape-image-threshold: 0.5; }

Oznacza to, że możesz utworzyć obraz maskujący i używać go niezależnie od tego, co masz na swojej stronie.

Kształty z pudełka referencyjnego

Można również podać wartość właściwości shape-outside, która jest ramką referencyjną, o której mówiliśmy wcześniej, patrząc na wartość circle ().

Na przykład:

.circle-margin-box { shape-outside: margin-box; }

Jest to przydatne, gdy użyłeś promienia obramowania, aby dodać zaokrągloną ramkę do elementu i po prostu chcesz, aby treść zakrzywiała się wokół tej granicy. Jak w tym przykładzie.

Obsługa przeglądarki

Jedną z fajnych rzeczy na temat CSS Shapes jest to, że ponieważ muszą być stosowane do float, mogą być z łatwością używane jako progresywne ulepszenia twojej witryny.

Przeglądarki, które nie obsługują Kształty, będą wyświetlały wartość zmiennoprzecinkową zgodnie z oczekiwaniami, z kwadratowym prostokątem wokół elementu. Przeglądarki obsługujące kształty będą miały określony kształt. Możesz zobaczyć świetny przykład tego na nowej stronie dla The Web Ahead podcast. Na stronach podcastu Kształty CSS służą do wygięcia tekstu wokół okrągłego obrazu gościa.

Możesz zobaczyć, jak to wygląda w Chrome po lewej stronie. Firefox (po prawej) nie obsługuje jeszcze Kształty, więc otrzymujemy kwadratowe okienko wokół obrazu.

Użytkownik Firefox nie dowiedziałby się, że brakowało go w tym małym dotyku, i nie szkodzi to wrażeniu, że strona nie ma go - jest to po prostu bardzo miłe w obsłudze przeglądarek.

Możesz zobaczyć pełne, aktualne informacje o obsłudze przeglądarek na Mogę uzyć stronie internetowej. W chwili pisania tego tekstu Safari wymaga prefiksu -webkit na właściwościach CSS Shapes. Moje przykłady wykorzystują Lea Verou Prefiks bezpłatny scenariusz.

W przypadku poziomu Kształty 1 w statusie rekomendacji kandydata, niedługo zobaczymy go we wszystkich nowoczesnych przeglądarkach. Nie ma powodu, aby nie używać go do dodawania wykończenia do swoich projektów. Pamiętaj, aby testować w przeglądarce bez wsparcia, zwłaszcza jeśli nakładasz tekst na obrazy, gdzie brak wsparcia może sprawić, że treść będzie trudna do odczytania.

Jeśli chcesz wypróbować kształty wieloformatowe w nieobsługujących przeglądarkach, zespół Adobe Web Platform utworzył polyfill dostępny na Github .

Zasoby i dalsze czytanie

W tym artykule omówiłem najważniejsze rzeczy, które możesz potrzebować, aby zacząć używać Kształtów CSS w swoich witrynach. Aby uzyskać więcej informacji, w tym informacje na temat tego, co nadchodzi w specyfikacji poziomu 2, spójrz na następujące zasoby.

Ikony od Projekt Noun . Ikona Fox jest autorstwa Laury Olivares, Ikona Sofa Pan Pixel.

zaawansowane css kształty css

Jak zacząć od kształtów CSS