Opakující se přechody CSS - Triky CSS

Opakování gradienty se trik již můžeme dělat s kreativní použití color-stopsna straně linear-gradient()a radial-gradient()záznamů, a peče se mění stav na nás.

Myšlenka je, že z přechodů, které vytváříme, můžeme vytvářet vzory a umožnit jim nekonečné opakování.

Porovnání lineárního gradientu (vlevo) s opakujícím se lineárním gradientem (vpravo).

Existuje trik s neopakujícími se přechody, který vytvoří přechod takovým způsobem, že pokud by to byl malý malý obdélník, srovnal by se s dalšími malými malými obdélníkovými verzemi, aby vytvořil opakující se vzor. Takže v podstatě vytvořte ten přechod a nastavte background-sizeten malý malý obdélník. Díky tomu bylo snadné vyrobit pruhy, které jste pak mohli otáčet nebo cokoli jiného.

Syntax

Existují tři typy opakujících se přechodů, z nichž dva jsou aktuálně podporovány v oficiální specifikaci a jeden, který je v aktuálním pracovním konceptu.

Syntaxe pro každou notaci je stejná jako její související typ přechodu. Například repeating-linear-gradient()dodržuje stejnou syntaxi jako linear-gradient().

Opakující se přechod	Související notace	Podporováno?
`repeating-linear-gradient()`	`linear-gradient()`	Ano
`repeating-radial-gradient`	`radial-gradient()`	Ano
`repeating-conic-gradient`	`conic-gradient()`	Ne

Kde se gradient opakuje, je určen konečným zastavením barvy . Pokud je to na 20px, velikost přechodu (který se pak opakuje) je 20pxo 20pxčtverec. Totéž platí, pokud je k vzoru připoutáno více barev. Konečná barva s konečným zastavením určuje velikost a umístění opakování.

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

Podívejte se na Pen lAkyo od Chrisa Coyiera (@chriscoyier) na CodePen.

Stejné jako radiální:

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

Podívejte se na opakující se přechody pera od Chrisa Coyiera (@chriscoyier) na CodePen.

Podpora prohlížeče

Opakující se přechody si v současné době užívají skvělou podporu prohlížeče. To znamená, že v době psaní tohoto textu mluvíme pouze o lineárních a radiálních gradientech, protože kónické přechody jsou stále navrhovanou funkcí pracovního konceptu úrovně 4 specifikace. Doufáme, že uvidíme široké přijetí, jakmile dosáhne doporučení kandidáta.

Tato data podpory prohlížeče pocházejí z Caniuse, který obsahuje více podrobností. Číslo označuje, že prohlížeč podporuje tuto funkci v dané verzi a vyšší.