Stílusú weboldalelemek CSS háttérgradienssel

Ha több mint néhány percig voltál az interneten, akkor valószínű, hogy találkoztál egy CSS színátmenettel. A CSS háttér tulajdonság segítségével különböző stílusok készíthetők, és az egyik legérdekesebb típus az, hogy mit tud tenni a színátmenet értékével.

Különböző CSS színátmenetek tervezésének és létrehozásának ismerete minden szoftvertervező vagy fejlesztő számára eszköz. Ebből a cikkből megtudhat mindent, amit tudnia kell, hogy elkezdhesse beépíteni a CSS színátmeneteket a projektjeibe.

Mi az a CSS színátmenet?

A CSS színátmenet lényegében két vagy több szín kombinációja, amely simán áttér az egyikről a másikra. A CSS színátmenet átmeneti állapota az alkalmazott színátmenet típusától függ. A szoftvertervezés során általában két fő gradiens létezik: lineáris és radiális.

Van azonban egy harmadik típusú gradiens, amely kevésbé népszerű és kúpos színátmenet néven ismert.

CSS színátmenetek szintaxisa

Háttérkép: színátmenet-típus (irány, szín1, szín2);

A CSS színátmenetet hozzá kell rendelni a háttérkép CSS tulajdonsághoz. A színátmenet típusa lehet a többféle; lineáris gradiens, radiális gradiens vagy kúpos gradiens. A színátmenet típusát nyitó és záró zárójel követi, amely tartalmazza a színátmenet átmeneti irányát, valamint a színátmenetbe beillesztendő színeket.

Összefüggő: Háttérkép beállítása CSS-ben

A fenti példa két színt mutat, de a színátmenet több különböző színt is tartalmazhat. Az egyetlen követelmény, hogy a lista minden színét vessző választja el.

Mi az a lineáris színátmenet?

A lineáris gradiens a legnépszerűbb CSS gradiens. Két vagy több szín felhasználásával vízszintes, függőleges vagy átlós átmeneti gradienst hoz létre.

CSS lineáris gradiens példa

Háttérkép: lineáris gradiens (# 00A4CCFF, # F95700FF);

A fenti kód a következő CSS színátmenetet eredményezi:

A színátmenet szintaxisának egyik fő összetevője el van hagyva a fenti példából. Ez az összetevő a gradiens átmeneti iránya, és elhagyta, mert a lineáris gradiens alapértelmezett igazítása függőleges (fentről lefelé); ez a kívánt kimenet ebben a példában.

A fenti kód ugyanazt az eredményt adja, mint a következő kódsor. Az egyetlen különbség a kettő között a kód irányszekciója.

Az alsó lineáris gradiens példa használata

Háttérkép: lineáris gradiens (lefelé, # 00A4CCFF, # F95700FF);

Amint a kimenetből látható, a fenti kód létrehoz egy színátmenetet, amely felül kék színnel kezdődik, majd lassan áttér az alján lévő narancssárgára. Ha meg szeretné változtatni a színek sorrendjét, egyszerűen kicserélheti a színt az aljára val vel a tetejére és ez megfordítja a gradiens irányát, a következő kimenetet eredményezve:

A függőleges igazításhoz hasonlóan a színátmenet vízszintes igazítása két irányzatsorozat használatával érhető el: balra és jobbra, amely a következő kimeneteket hozza létre.

Átlós lineáris színátmenet

Átlós lineáris gradiens átmenet érhető el a lineáris gradiens bármelyik irányában. Csak négy konkrét kulcsszólista található, amelyeket tudnia kell ennek érdekében.

• Jobbra lent
• Balra lent
• Jobbra fent
• Balra fent

Az átlós lineáris gradiens példa segítségével

Háttérkép: lineáris gradiens (jobbra lent, # 00A4CCFF, # F95700FF);

A fenti példa a következő kimenetet eredményezi:

Amint a fenti kimenetből látható, a lineáris gradiens átlós irányban haladja át az átmenetet a gradiens bal felső sarkától a jobb alsó részig.

Többszínű lineáris színátmenet

A lineáris gradiensnek két vagy több színe lehet, de hogyan néz ki több szín egy gradiensben? A többszínű lineáris gradiens színelrendezés annak irányától függ. A vízszintes irányban átmenők mindegyikének új színe a lineáris gradiens bal vagy jobb oldalán jelenik meg, a lineáris gradiens pontos irányától függően.

Többszínű lineáris gradiens példa

Háttérkép: lineáris gradiens (jobbra, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

A fenti kódsor a következő kimenetet hozza létre:

Amint láthatja, minden új szín a színátmenet jobb oldalán jelenik meg, létrehozva azt, ami végül szivárványmá válik. Ugyanez a kimenet függőleges irányban érhető el; azonban a lineáris színátmenet sajátos színelrendezése függ a függőleges irányú kulcsszótól (fent vagy le).

Mi az a sugaras színátmenet?

A sugárirányú színátmenet spirális színátmenetet hoz létre, amelyek közül kettő több szín, amelyek alapértelmezés szerint a középponttól indulnak. Ahol a lineáris gradiens egyenes, függőlegesen vagy vízszintesen áramló gradienst eredményez, a radiális gradiens kör alakú gradienst eredményez, amely a középponttól a külső élekig áramlik.

A radiális gradiens példa segítségével

Háttérkép: radiális gradiens (kör, # 00A4CCFF, # F95700FF);

A fenti kódsor a következő kimenetet hozza létre:

A sugárirányú gradiens központ megváltoztatása

Alapértelmezés szerint egy sugárirányú gradiens a színátmenet közepén kezdődik; néhány kulcsszó bevezetésével azonban meg lehet változtatni a kiindulási pontot.

A radiális színátmenet kiindulási helyzetének módosítása

Háttérkép: radiális gradiens (kör a jobb felső sarokban, # 00A4CCFF, # F95700FF);

A fenti kódsor a következő kimenetet hozza létre:

Amint a fenti kimenetből látható, a színátmenet most a jobb felső saroktól indul a középpont helyett. Ez a változás a kulcsszó felvétele miatt lehetséges jobb felső a fenti kódban. A következő kulcsszólista felhasználható a radiális gradiens kiindulási pontjának megváltoztatására is:

• Bal felső
• Jobb alsó
• Bal alsó

Tarka radiális színátmenetek

A lineáris gradienshez hasonlóan a radiális gradiens is használhat kettőnél több színt, a fő különbség az ahol a lineáris színátmenet egyenes vonalban adja hozzá a színátmenetet, a sugárirányú színátmenet új színeket ad a külső részhez él.

Többszínű radiális gradiens példa

Háttérkép: radiális gradiens (kör, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

A fenti kódsor a következő kimenetet hozza létre:

A színátmenetek testreszabása

Eddig látta, hogyan változtassa meg a színátmenet irányát és középpontját, de még nem látta, hogyan szabhatja meg a színátmenetet. A színátmenet testreszabása sok munkának tűnhet, de miután megértette a készítés alapjait CSS háttérgradiens a következő kézenfekvő lépés: megtanulni, hogyan lehet a CSS-színátmeneteit jobban fejleszteni egyedi.

Alapértelmezés szerint a színátmenet színei egyenletesen elosztott helyet foglalnak el, az egyes színek simán áttérnek az utána következőre. Tehát, ha két színt kombinálva gradiens képződik, mindegyik szín a rendelkezésre álló hely felét foglalja el, miközben egyikről a másikra vált. Három szín kombinálásával minden szín a rendelkezésre álló hely egyharmadát foglalja el.

Egy testreszabott színátmenettel megadhatja, hogy egy szín egy színátmenetben mekkora helyet foglal el, a szín-stop helyzet.

Lineáris színátmenet testreszabása 1. példa

Háttérkép: lineáris gradiens (jobbra, # 00A4CCFF, # F95700FF 30%);

A fenti kódsor a következő kimenetet hozza létre:

A fenti kimenet a lineáris gradiens második színét mutatja, amely a gradiens első színének 30% -ánál áll meg, szokásos helyzete helyett, és mivel a második szín egyben a színátmenet végső színe, természetesen kiterjed a vége.

Ha az első szín végén a fenti kódba helyezné a 30% -ot, akkor a dolgoknak világosabbá kell válniuk.

Lineáris színátmenet testreszabása 2. példa

Háttérkép: lineáris gradiens (jobbra, # 00A4CCFF 30%, # F95700FF);

A fenti kód a következő kimenetet eredményezi.

A fenti kimenet egyértelműen megmutatja a színátmenet első színét, amely a gradiens második színének 30% -ánál áll meg. Ez a példa a fenti példával együtt elősegíti a színmegállítási testreszabás könnyebb megértését.

A sugárirányú gradiens testreszabása ugyanúgy történik, mint a lineáris gradiens. Az egyetlen dolog, amit meg kell tennie, hogy a fenti sugárirányú gradiensben ugyanazokat az eredményeket érje el, az a színátmenet típusának és irányának megváltoztatása.

A CSS gradiensek létrehozása még soha nem volt ilyen egyszerű

Ez az oktató cikk a lineáris és radiális gradiensek azonosításához és létrehozásához szükséges eszközöket tartalmazza. Ha eddig eljutott, megtanulta, hogyan változtassa meg a színátmenet irányát és középpontját. Ezenkívül megvan a képessége a CSS-színátmenetek testreszabására és egyedi háttér-színátmenetek létrehozására.

Ha azonban nem szeretne egyenesen új és egyedi színátmenetek létrehozásával foglalkozni, akkor kezdjen néhány remekül kinéző, már meglévő szín létrehozásával.

27 Stílusos CSS háttér gradiens példa

Az egyszínűek tavaly is. Színátmenetek vannak! De hogyan hozhatja létre őket a CSS-ben?

Olvassa el a következőt

A szerzőről

Bontsa ki, hogy elolvassa a teljes történetet