CSS Gradiensek

A CSS gradiensek lehetővé teszik színátmenetek létrehozását képek használata nélkül. Segítségükkel modern, reszponzív és esztétikus háttereket készíthetünk.

Lineáris gradiensek

A lineáris gradiens egyenes vonal mentén változtatja a színeket. Az irányt kulcsszavakkal (to right, to bottom) vagy szögértékekkel (45deg) adhatjuk meg.

Az alábbi példában pirosból sárgába átmenő lineáris gradienst adunk meg:

Radial és konikus gradiensek

A radiális gradiens kör alakban terjed, míg a konikus gradiens egy középpontból sugárirányban változtatja a színeket. Ezek különleges vizuális hatásokat nyújtanak.

Radiális gradiens példa

A radiális gradiens például alkalmas lehet fényhatás vagy középponti kiemelés kialakítására.

Több szín és színátmeneti pontok

A gradiensekben több színt is megadhatunk, pontos helyekkel (színátmeneti pontokkal) szabályozva az átmenetet.

Átlátszó gradiensek

Az rgba színek vagy az opacity segítségével áttetsző gradienseket hozhatunk létre, például képek fölé árnyékolásnak.

Ismétlődő gradiensek

A repeating-linear-gradient és repeating-radial-gradient lehetővé teszi, hogy ismétlődő mintákat készítsünk a hátterekben.

Tippek a gradiensek használatához

A gradiensek használatával dinamikus és modern felületeket hozhatunk létre. Az alábbi tanácsok segíthetnek:

• Kerüld a túl sok szín használatát, mert könnyen zavaró lehet.
• Használj áttetsző színeket (rgba) a fokozatos hatásokhoz.
• Kombinálj több gradienst a <background> rövidítéssel, hogy komplexebb dizájnt érj el.