Powtarzanie gradientów CSS - CSS-Tricks

Powtarzanie gradienty wziąć lewę możemy już zrobić z twórczego wykorzystania color-stopsw sprawie linear-gradient()i radial-gradient()notacje i piecze go do nas.

Chodzi o to, że możemy tworzyć wzory z tworzonych przez nas gradientów i pozwalać im powtarzać się w nieskończoność.

Porównanie gradientu liniowego (po lewej) z powtarzającym się gradientem liniowym (po prawej).

Istnieje sztuczka z niepowtarzalnymi gradientami, która polega na utworzeniu gradientu w taki sposób, że gdyby był to mały, malutki prostokąt, zrównałby się z innymi małymi wersjami samego siebie, tworząc powtarzający się wzór. Więc zasadniczo utwórz ten gradient i ustaw, background-sizeaby utworzył ten mały prostokąt. Ułatwiło to tworzenie pasków, które można było następnie obracać lub cokolwiek innego.

Składnia

Istnieją trzy typy powtarzających się gradientów, z których dwa są obecnie obsługiwane w oficjalnej specyfikacji, a jeden znajduje się w bieżącej wersji roboczej.

Składnia każdej notacji jest taka sama, jak jej powiązany typ gradientu. Na przykład ma repeating-linear-gradient()taką samą składnię jak linear-gradient().

Powtarzający się gradient	Powiązana notacja	Utrzymany?
`repeating-linear-gradient()`	`linear-gradient()`	tak
`repeating-radial-gradient`	`radial-gradient()`	tak
`repeating-conic-gradient`	`conic-gradient()`	Nie

Miejsce, w którym gradient się powtarza, jest określane przez końcowy punkt przejścia koloru . Jeśli to na 20pxwielkość gradientu (która powtarza) jest 20pxprzez 20pxkwadrat. To samo dotyczy sytuacji, gdy do wzoru przypisanych jest wiele kolorów. Ostateczny kolor z ostatnim przystankiem określa rozmiar i lokalizację powtórzenia.

.repeat ( background-image: repeating-linear-gradient( 45deg, yellow, yellow 10px, red 10px, red 20px /* determines size */ ); )

Zobacz Pen lAkyo autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.

To samo z radialnym:

.repeat ( background: repeating-radial-gradient( circle at 0 0, #eee, #ccc 50px ); )

Zobacz Pen Repeating Gradients autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.

Wsparcie przeglądarki

Powtarzanie gradientów cieszy się obecnie doskonałą obsługą przeglądarki. To powiedziawszy, mówimy tylko o gradientach liniowych i radialnych w momencie pisania tego tekstu, ponieważ gradienty stożkowe są nadal proponowaną funkcją w roboczej wersji roboczej specyfikacji poziomu 4. Mamy nadzieję, że po osiągnięciu rekomendacji kandydata zobaczymy szerokie przyjęcie.

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.