A lineáris színátmenet: irányok és szögek
A lineáris színátmenet az egyik leggyakrabban használt típus, amely a színeket egy egyenes vonal mentén mossa össze. A színek keveredésének irányát egy konkrét szög határozza meg.
A lineáris színátmenetek működésének főbb szabályai:
- A színek egy egyenes mentén folynak össze az egyik pontból a másikba.
- Az irányt meghatározó szögcsúszka segítségével pontosan beállítható a színátmenet dőlésszöge.
- A szög beállításánál a 0° pontosan felfelé mutat, míg a 90° jobbra irányítja a színátmenetet.
A lineáris átmenetek kiválóan alkalmasak klasszikus függőleges, vízszintes vagy átlós háttérszínek létrehozására a weboldalakon.
A radiális színátmenet: alakzatok és eloszlás
A radiális színátmenet a színeket nem egy egyenes mentén, hanem egy belső középpontból kiindulva, kifelé haladva teríti szét. Ez a típus különösen hasznás, ha körkörös vagy ovális fényhatásokat, illetve lágy fókuszpontokat szeretnénk létrehozni a felületen.
A radiális színátmenetek jellemzői:
- A színek a középpontból sugárirányban terjednek kifelé.
- Ez a típus nem használ szöget az irány meghatározásához.
- A szög helyett a színátmenet formáját kell kiválasztani, amely lehet Ellipszis vagy Kör.
A forma megválasztása alapvetően meghatározza, hogy a színek milyen arányban és nyújtottsággal oszlanak el a rendelkezésre álló területen.
A kúpos színátmenet: színek söprése a középpont körül
A kúpos (conic) színátmenet egy különleges és látványos formátum, amely a színeket egy központi pont körül söpri végig, hasonlóan egy óramutató járásához vagy egy színkörhöz.
A kúpos színátmenet tulajdonságai:
- A színek nem kifelé terjednek és nem is egyenes vonalban haladnak, hanem a középpont körül fordulnak el.
- A kezdőpontot és a forgás irányát a szög beállításával lehet szabályozni.
- A lineáris átmenethez hasonlóan itt is a szögcsúszka határozza meg a kiindulási irányt, ahol a 0° felfelé mutat, a 90° pedig jobbra.
Ez a típus rendkívül hasznos egyedi kördiagramok, színtárcsák vagy különleges dizájnelemek megalkotásakor.
A színpontok szerepe a színátmenetek tervezésében
A színpontok (color stops) határozzák meg, hogy a színátmenet mely pontjain milyen színek jelenjenek meg teljes intenzitással. A színpontok elhelyezkedése és száma adja meg a színkeveredés finomságát és komplexitását.
A színpontok kezelésének szabályai:
- Minden egyes színpont egy konkrét színértékből és egy százalékos pozícióból áll.
- A pozíció értéke 0% és 100% között mozoghat, ahol a 0% a színátmenet kezdetét, a 100% pedig a végét jelöli.
- A színátmenet kialakításához legalább két színpontra van szükség. Az alapértelmezett kezdő színátmenet két színpontot tartalmaz:
#6366f1 0%és#ec4899 100%. - Új színpont hozzáadásakor az alapértelmezett pozíció 50%-ra kerül beállításra.
- A színátmenetben legfeljebb nyolc színpont használható fel. Amikor eléri a nyolc színpontot, a további pontok hozzáadására szolgáló gomb inaktívvá válik.
A színpontok pozíciójának eltolásával szabályozható, hogy a színek hol találkozzanak, és milyen gyorsan menjenek át egyikből a másikba.
A Színátmenet generátor használata
A Színátmenet generátor egy olyan eszköz, amellyel vizuálisan és gyorsan tervezhetők meg a CSS színátmenetek. Az eszköz használata egyszerű folyamatra épül:
- Típus kiválasztása: A Színátmenet típusa rész alatt válassza ki a Lineáris, Radiális vagy Kúpos (Conic) lehetőséget.
- Irány vagy alak beállítása: Lineáris és kúpos típusnál a Szög csúszkával állíthatja be az irányt. Radiális típus esetén az Alak opciónál válassza az Ellipszis vagy Kör formát.
- Színpontok testreszabása: A Színpontok szekcióban módosíthatja a meglévő pontok színét a Színpont színe mezőben, valamint a Pozíció csúszkával azok elhelyezkedését. Új pontot a Színpont hozzáadása gombbal adhat hozzá, míg a feleslegeseket a Színpont eltávolítása gombbal törölheti.
- Előnézet és kód másolása: A változtatások során az eszköz folyamatosan mutatja a vizuális előnézetet. Ha elégedett az eredménnyel, a CSS mező alatt található CSS másolása gombra kattintva a vágólapra mentheti a generált kódot. A sikeres másolást követően a gomb állapota megváltozik, jelezve a másolás megtörténtét.
Adatkezelés és adatvédelem
A Színátmenet generátor használata során a felhasználói adatok védelme teljes mértékben biztosított. Minden színátmenet renderelése közvetlenül a böngészőjében történik. Semmilyen beállítás vagy megadott érték nem kerül feltöltésre a BroBroGo szervereire.
Gyakran Ismételt Kérdések
Mi a különbség a lineáris, radiális és kúpos színátmenetek között?
A lineáris színátmenet egy egyenes vonal mentén mossa össze a színeket, amelyet egy szög megadásával irányíthat. A radiális színátmenet a középpontból kifelé haladva, kör vagy ellipszis alakban teríti szét őket. A kúpos (conic) színátmenet pedig a középpont körül söpör végig, mint egy színkör.
Mik azok a színpontok (color stops)?
Minden színpont egy adott pozícióhoz rögzített szín a színátmenet mentén – 0% a kezdet, 100% a vég. Mozgassa a színpontot a szín csúcspontjának eltolásához, vagy adjon hozzá további pontokat a gazdagabb keverékért. Legfeljebb nyolc pontot használhat.
Hogyan szabályozhatom az irányt?
Lineáris vagy kúpos (conic) színátmenetnél a szögcsúszka határozza meg az irányt – a 0° felfelé mutat, a 90° pedig jobbra. A radiális színátmenetnek nincs szöge; helyette válasszon kör vagy ellipszis alakot a terjedés módosításához.