CSS színátmenet (Lineáris és sugárirányú CSS gradient)

A CSS gradient segítségével egyenletes színátmenetet jeleníthetünk meg két vagy több szín között. Két szín használata esetén a kezdőpont és végpont értékét kell megadni. A böngésző a két megadott pont között egyenesen arányos színátmenetet készít. Vagy megadhatunk kettőnél több értéket is, ilyenkor rendelhetünk hozzájuk pozíciót vagy a böngészőre hagyhatjuk ezt a feladatot.

Két különböző típusú színátmenetet különböztetünk meg:

• Lineáris színátmenet
• Sugárirányú színátmenet

Lineáris színátmenet

A lineáris azt jelenti, hogy a színátmenet olyan lesz, mintha egy vonal mentén haladnánk. Ahhoz, hogy létrehozzunk egy lineáris színátmenetet, muszáj legalább két színt kiválasztanunk. E között a két szín között fog a színátmenet létrejönni. Ezen felül még beállíthatjuk azt is, hogy milyen irányba történjen a színátmenet.

CSS lineáris színátmenet szintaktikája

background-image: linear-gradient(IRÁNY, SZÍN1, SZÍN2, ...);
Code language: HTTP (http)

Az irány elhagyható, ilyenkor az alapértelmezett irányt állítja be automatikusan. Az alapértelmezett gradient irány a felülről lefelé.

Példa alapértelmezett lineáris gradient irányra

div {
  background-image: linear-gradient(yellow, green);
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ebben a példában csak két színt állítottam be, egy kezdőértéket és egy végértéket. Az irány megválasztását a böngészőre hagytam, amely beállította az alapértelmezettet, a felülről lefele történő színátmenetet.

Példa balról jobbra tartó lineáris színátmenetre

div {
  background-image: linear-gradient(to right, yellow, green);
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ha azt szeretnénk, hogy a színátmenet az ellenkező irányba történjen, akkor értelemszerűen a „to right” szöveget kell kicserélnünk „to left„-re.

Példa átlós lineáris színátmenetre

div {
  background-image: linear-gradient(to bottom left, yellow, green);
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ha azt szeretnénk, hogy a színátmenet átlósan történjen, akkor csak annyi a teendőnk, hogy két irányt adunk meg. Például a bal alsó sarkot a „bottom left” értékkel tudjuk beállítani.

Példa több színből álló lineáris színátmenetre

div {
  background-image: linear-gradient(red, yellow, green);
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ha több színből álló színátmenetet szeretnénk alkotni, akkor sem nehezebb a dolgunk. Írjunk be annyi színt a gradient tulajdonságba, amennyit szeretnénk megjelentetni.

Sugárirányú színátmenet

A sugárirányú azt jelenti, hogy a színátmenet a középpontból kiindulva körkörösen jelenik meg. Ahhoz, hogy létrehozzunk egy sugárirányú színátmenetet, muszáj legalább két színt megadnunk. E között a két szín között fog a színátmenet létrejönni. Ezen felül még beállíthatjuk azt is, hogy milyen irányba történjen a színátmenet radiális gradient esetében.

CSS sugárirányú színátmenet szintaktikája

background-image: linear-gradient(ELHELYEZKEDÉS, SZÍN1, SZÍN2, ...);
Code language: HTTP (http)

Az elhelyezkedést itt is kihagyhatjuk, elég csak a színekkel foglalkozni. Az első szín lesz a középső, míg a második a külső szín.

Példa sugárirányú színátmenetre

div {
  background: radial-gradient(yellow, green);
}
Code language: CSS (css)

>> Próbáld ki ezt a kódot az online weboldal szerkesztőnkben. <<

Ha hasznos volt számodra, akkor kérlek oszd meg másokkal is, hogy ezzel támogass minket!