Home-theater-designers
Ha több mint néhány perce volt az interneten, akkor nagy valószínűséggel találkozott egy CSS -színátmenettel. A CSS háttértulajdonsággal különféle stílusok hozhatók létre, és az egyik legérdekesebb típus az, hogy mit tud tenni a színátmenet értékével.
A különböző CSS gradiensek tervezésének és létrehozásának ismerete minden szoftvertervező vagy fejlesztő számára előnyös. Ebből a cikkből mindent megtudhat, amit tudnia kell ahhoz, hogy elkezdhesse beépíteni a CSS gradienseket a projektjeibe.
Mi az a CSS gradiens?
A CSS gradiens lényegében két vagy több szín kombinációja, amely simán átvált egyikről a másikra. A CSS gradiens átmeneti állapota a használt gradiens típusától függ. A szoftverek tervezésében általában két fő színátmenet 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.
CSS színátmenetek szintaxisa
Background-image: gradient-type (direction, color1, color2);
A CSS színátmenetet hozzá kell rendelni a háttérképes CSS tulajdonsághoz. A színátmenet típusa egy lehet a több közül; lineáris gradiens, radiális gradiens vagy kúpos gradiens. A színátmenet típusát nyitó és záró zárójelek követik, amelyek tartalmazzák a színátmenet átmeneti irányát, valamint a színátmenetben szerepeltetendő színeket.
Összefüggő: Háttérkép beállítása a CSS -ben
A fenti példa két színt mutat, de egy színátmenet több különböző színt is tartalmazhat. Az egyetlen követelmény az, hogy a lista minden színét vesszővel kell elválasztani.
Mi az a lineáris gradiens?
A lineáris gradiens a legnépszerűbb CSS gradiens. Vízszintes, függőleges vagy átlós átmeneti gradienst hoz létre két vagy több szín használatával.
CSS lineáris gradiens példa
Background-image: linear-gradient(#00A4CCFF, #F95700FF);
A fenti kód a következő CSS -színátmenetet hozza létre:
A gradiens szintaxis egyik fő összetevője kimaradt a fenti példából. Ez az összetevő a színátmenet átmeneti iránya, és kihagyták, mert a lineáris gradiens alapértelmezett igazítása függőleges (felülről lefelé); ebben a példában ez a kívánt kimenet.
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ányszakasza.
Az alsó lineáris gradiens példa használata
Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);
Amint a kimeneten látható, a fenti kód színátmenetet hoz létre, amely kékkel kezdődik a tetején, majd lassan átmegy az alsó narancssárgára. Ha meg szeretné fordítani a színek sorrendjét, egyszerűen cserélje ki a színt aljára val vel tetejére és ez megfordítja a gradiens irányát, és a következő kimenetet eredményezi:
A függőleges igazításhoz hasonlóan a színátmenet vízszintes igazítása két irányszavas kulcsszó használatával érhető el: balra és jobbra , amely a következő kimeneteket hozza létre.
keressen egy könyvet a homályos leírásból
Átlós lineáris színátmenet
Lehetőség van egy átlós lineáris gradiens átmenet elérésére a lineáris gradiens bármely irányában. Csak négy konkrét kulcsszólistát kell tudnia, hogy ez lehetséges legyen.
- Jobbra lent
- Balra lent
- Jobbra fent
- Balra fent
Példa az átlós lineáris gradiensre
Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);
A fenti példa a következő kimenetet eredményezi:
Amint a fenti kimeneten látható, a lineáris gradiens átlós irányban halad át a gradiens bal felső sarkától a jobb alsó részig.
Tarka lineáris színátmenet
Egy lineáris gradiensnek két vagy több színe lehet, de hogyan néz ki több szín egy színátmenetben? A sokszínű, lineáris gradiens színelrendezés az irányától függ. A vízszintes irányban átmenők mindegyikének új színei a lineáris gradiens bal vagy jobb oldalán jelennek meg, a lineáris gradiens pontos irányától függően.
Példa sokszínű lineáris színátmenetre
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
A fenti kódsor a következő kimenetet eredményezi:
Amint láthatja, minden új szín a színátmenet jobb oldalán található, ami végül szivárványt formál. Ugyanez a kimenet érhető el függőleges irányban is; a lineáris gradiens konkrét színelrendezése azonban függ a függőleges irányú kulcsszótól (felfelé vagy lefelé).
Mi a radiális gradiens?
A sugárirányú színátmenet spirálos gradienst hoz létre, amely két színből áll, amelyek alapértelmezés szerint a középpontból indulnak. Ahol a lineáris gradiens egyenes gradienst hoz létre, amely függőlegesen vagy vízszintesen áramlik, a sugárirányú gradiens egy kör alakú gradienst hoz létre, amely a középpontból a külső élek felé áramlik.
A Radial Gradient példa használatával
Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);
A fenti kódsor a következő kimenetet eredményezi:
A Radial Gradient Center megváltoztatása
Alapértelmezésben a színátmenet a színátmenet közepén kezdődik; azonban néhány kulcsszó bevezetésével megváltoztathatja a származási pontot.
hogyan kell új ssd -t beállítani
Példa a sugárirányú színátmenet kezdő pozíciójának megváltoztatására
Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);
A fenti kódsor a következő kimenetet eredményezi:
Amint az a fenti kimeneten látható, a színátmenet most a középső helyett a jobb felső sarokban kezdődik. Ez a módosítás a kulcsszó felvétele miatt lehetséges jobb felső a fenti kódban. A következő kulcsszólista is használható a sugárirányú színátmenet kezdőpontjának megváltoztatására:
- Bal felső
- Jobb alsó
- Bal alsó
Többszínű radiális színátmenetek
A lineáris gradienshez hasonlóan a sugárirányú gradiens is használhat két több színt, a fő különbség az, hogy ahol a lineáris gradiens egyenes vonalban adja hozzá a gradienst, a sugárirányú gradiens új színeket ad a külső széléhez.
Példa sokszínű radiális színátmenetre
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);
A fenti kódsor a következő kimenetet eredményezi:
A színátmenetek testreszabása
Eddig látta, hogyan lehet megváltoztatni a színátmenet irányát és középpontját, de nem látta, hogyan kell személyre szabni a színátmenetet. A színátmenet testreszabása sok munkának tűnhet, de miután megértette a CSS háttér -színátmenet létrehozásának alapjait, a következő nyilvánvaló lépés az, hogy megtanulja, hogyan teheti egyedivé a CSS -színátmeneteket.
hogyan lehet Mac -et telepíteni a Windows rendszerre
Alapértelmezés szerint a színátmenet színei egyenletesen elosztott helyet foglalnak el, és minden szín simán átvált az azt követőbe. Tehát ha két színt kombinálunk, hogy színátmenetet hozzunk létre, akkor mindegyik szín a rendelkezésre álló hely felét foglalja el, miközben átáll az egyikről a másikra. Ha három színt kombinál, mindegyik szín a rendelkezésre álló hely egyharmadát foglalja el.
Egy testreszabott színátmenettel határozhatja meg, hogy a szín milyen mértékben foglalja el a színátmenetet a színátmenet explicit hozzárendelésével színmegálló helyzet .
Lineáris színátmenet testreszabása Példa 1
Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);
A fenti kódsor a következő kimenetet eredményezi:
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, a szokásos helyzete helyett, és mivel a második szín a színátmenet végső színe is, természetesen a végéig terjed .
Ha az első szín végén elhelyezi a 30% -ot a fenti kódban, akkor világosabbnak kell lennie.
Lineáris színátmenet testreszabása 2. példa
Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );
A fenti kód a következő kimenetet eredményezi.
A fenti kimenet egyértelműen mutatja a színátmenet első színét, amely megáll a színátmenet második színének 30% -ánál. Ez a példa a fenti példával együtt segíthet abban, hogy könnyebben érthető legyen a színmegállítási testreszabás.
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 ugyanazokat az eredményeket érje el radiális gradiensben, az a gradiens típusának és irányának megváltoztatása.
A CSS színátmenetek létrehozása még soha nem volt ilyen egyszerű
Ez a bemutató cikk a lineáris és sugárirányú színátmenetek azonosítására és létrehozására szolgáló eszközöket nyújt Önnek. Ha eljutott idáig, megtanulta, hogyan változtathatja meg a színátmenet irányát és középpontját. Ezenkívül megvan a készsége a CSS -színátmenetek testreszabásához és egyedi háttér -színátmenetek létrehozásához.
Ha azonban nem szeretne egyenesen új és egyedi színátmenetek létrehozásába kezdeni, akkor kezdjen néhány nagyszerű megjelenésű, már meglévő létrehozásával.
Részvény Részvény Csipog Email 27 Példák stílusos CSS háttér színátmenetekreAz egységes színek olyanok, mint tavaly. A színátmenetek benne vannak! De hogyan hozza létre őket CSS -ben?
Olvassa tovább Kapcsolódó témák- Programozás
- Webfejlesztés
- Web Design
- CSS
Kadeisha Kean Full Stack szoftverfejlesztő és műszaki/technológiai író. Megvan az a képessége, hogy leegyszerűsítse a legösszetettebb technológiai fogalmakat; olyan anyagot állít elő, amelyet minden technológiai kezdő könnyen megért. Szenvedélyesen ír, érdekes szoftvereket fejleszt és utazik a világban (dokumentumfilmeken keresztül).
Bővebben: Kadeisha KeanIratkozzon fel hírlevelünkre
Csatlakozz hírlevelünkhöz, ahol technikai tippeket, véleményeket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!
Feliratkozáshoz kattintson ide