ЦСС понављајући градијенти - ЦСС-трикови

Понављање нагиби узети трик већ можемо везе са креативну употребу color-stopsна linear-gradient()и radial-gradient()нотација, и пече се за нас.

Идеја је да можемо створити обрасце од градијената које креирамо и омогућити им бесконачно понављање.

Поређење линеарног градијента (лево) са понављајућим линеарним градијентом (десно).

Постоји трик, са не понављајућим градијентима, да се градијент створи на такав начин да се, ако је то мали сићушни правоугаоник, поравна са другим малим, маленим верзијама правоугаоника, како би створио понављајући образац. Дакле, у основи направите тај градијент и подесите background-sizeда направи тај мали сићушни правоугаоник. То је олакшало прављење пруга, које сте потом могли ротирати или шта већ.

Синтакса

Постоје три врсте понављајућих градијената, од којих су два тренутно подржана у службеној спецификацији, а један који је у тренутном радном нацрту.

Синтакса за сваки запис је иста као и његов сродни тип градијента. На пример, repeating-linear-gradient()следи исту синтаксу као linear-gradient().

Понављајући градијент	Повезана нотација	Подржао?
`repeating-linear-gradient()`	`linear-gradient()`	да
`repeating-radial-gradient`	`radial-gradient()`	да
`repeating-conic-gradient`	`conic-gradient()`	Не

Тамо где се градијент понавља одређује се коначним заустављањем боје . Ако је то на 20px, величина градијента (која онда понавља) је 20pxпо 20pxквадрат. Исто важи и ако постоји више боја окованих узорком. Коначна боја са крајњим заустављањем одређује величину и локацију понављања.

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

Погледајте Пен лАкио Цхриса Цоииера (@цхрисцоииер) на ЦодеПен-у.

Исто са радијалним:

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

Погледајте Пен Репеатинг Градиентс Цхрис Цоииер-а (@цхрисцоииер) на ЦодеПен-у.

Подршка прегледача

Понављајући градијенти тренутно уживају сјајну подршку прегледача. Међутим, у време писања овог текста говоримо само о линеарним и радијалним градијентима, јер су конусни градијенти и даље предложена карактеристика у радном нацрту нивоа 4 спецификације. Надамо се да ћемо видети широко усвајање када стигне до препоруке кандидата.

Подаци о подршци за прегледач су од компаније Цаниусе, која садржи више детаља. Број указује на то да прегледач подржава функцију у тој верзији и новијој.