CSS Gradiens Generátor

Mik azok a CSS-átmenetek?

A CSS-átmenetek képek használata nélkül hoznak létre zökkenőmentes, folyamatos színátmeneteket két vagy több szín között. A böngésző natívan rendereli őket, ami azt jelenti, hogy tetszőleges felbontásra skálázhatók, azonnal betöltődnek, és egyetlen HTTP-kérést sem igényelnek. Az átmenetek a modern CSS egyik legerőteljesebb eszköze vizuálisan gazdag hátterek, gombok és dekoratív elemek létrehozásához.

A CSS-átmeneteknek két fő típusa van: a lineáris átmenet, amely egyenes vonal mentén vált, és a radiális átmenet, amely egy középpontból sugárirányban terjed ki. Egy harmadik típus, a kúpszelet-átmenet (conic gradient) egy központi pont köré kering, mint a színkerék. Ez az eszköz a lineáris és radiális átmenetekre összpontosít, amelyek a tervezési igények túlnyomó többségét lefedik.

CSS-átmenetek szintaxisa

A linear-gradient() függvény egy irányt (szög vagy kulcsszó), majd színmegállókat fogad el. Az alapszintaxis: background: linear-gradient(szög, szín1 pozíció1, szín2 pozíció2). A szög fokban értendő – 0 fok alulról felfelé, 90 fok balról jobbra, 180 fok felülről lefelé halad. Tetszőleges számú színmegálló adható hozzá.

A radiális átmenetek szintaxisa: radial-gradient(alak méret pozíciónál, szín1, szín2). Az alak lehet circle (kör) vagy ellipse (ellipszis). A méret kulcsszavak (closest-side, farthest-corner stb.) szabályozzák az átmenet kiterjedését. Ha kimaradnak, a böngésző általában helyesen alkalmazott alapértékeket használ.

Az eszköz használata

Válasszon színeket a színválasztókkal, állítsa be az átmenet szögét a csúszkával vagy egy fokérték beírásával, és adjon hozzá vagy távolítson el szükség szerint színmegállókat. Az eszköz valós időben generálja a CSS-kódot. Kattintson a másolás gombra a teljes CSS-szabály vágólapra másolásához, majd illessze be a stíluslapjába.

Tervezési tippek átmenetekhez

A finom átmenetek professzionálisabb hatást keltenek, mint a drámaiak. Két közel rokon szín közötti 10–20 fokos árnyalatváltás elegáns, modern megjelenést teremt. Kerülje háromnál több szín kombinálását, hacsak nem szándékosan szivárványhatást kíván létrehozni. A nagy területek lágy átmeneteknek fekszenek jobban, míg a kis UI-elemek, például a gombok merészebb átmeneteket is elviselnek.

Sötét módú megjelenéseknél a sötét háttéren alkalmazott átmenetes rétegek mélységet adnak anélkül, hogy zavaróak lennének. Félig átlátszó színmegállókkal (rgba vagy hsla) üvegszerű hatásokat érhet el. A background tulajdonságban vesszőkkel elválasztott több átmenettel összetett kompozíciók is létrehozhatók.

Teljesítménnyel kapcsolatos szempontok

A CSS-átmenetek GPU-gyorsítottak és rendkívül hatékonyak – sokkal jobbak, mint az átméneti képek betöltése. Azonban a sok színmegállóval rendelkező, nagyon összetett átmenetek kisebb renderelési eltéréseket okozhatnak böngészők között. Mindig tesztelje az átmeneteket Chrome-ban, Firefoxban és Safariban. A modern böngészők gyártói előtag nélkül is támogatják az átmeneteket, ezért a -webkit-linear-gradient már nem szükséges.

Gyakran ismételt kérdések

Animálhatók-e a CSS-átmenetek?

A CSS közvetlenül nem képes átmenet-értékeket animálni transition segítségével. Azonban animálhatja egy túlméretezett átmenet background-position-jét, @property segítségével animálhat egyéni tulajdonságokat az átmeneteken belül, vagy keresztezhet két átmenetet pseudo-elemeken alkalmazott opacity révén.

Mi a különbség a lineáris és a radiális átmenet között?

A lineáris átmenet megadott szög mentén, egyenes vonalban váltja a színeket. A radiális átmenet egy középpontból kifelé, kör vagy ellipszis alakban terjed. Válasszon lineárisat háttereknél és bannereken, és radiálisat reflektorfény-effektusoknál vagy gombkiemelőknél.