CSS gradiens generátor

A lineáris gradiensek a színeket egyenes vonal mentén (vízszintes, függőleges vagy átlós) vezetik át, irányított áramlást hozva létre egyik színről a másikra. A sugárirányú gradiensek egy középpontból kör vagy ellipszis alakban sugároznak kifelé. Használjon lineáris gradienseket az iránykiemeléshez és a modern felületekhez, radiális gradienseket pedig reflektorhatásokhoz, gombokhoz vagy szerves vizuális érdekességhez.

A gradiens szögét fokban adhatja meg (0 foktól 360 fokig), vagy olyan kulcsszavakat használhat, mint 'jobbra', 'alulra', 'jobbra fentre', stb. A 0deg felfelé mutat, a 90deg jobbra, a 180deg lefelé, a 270deg pedig balra. A szög határozza meg azt a tengelyt, amely mentén a színek átmenetet képeznek, így teljes mértékben szabályozhatja a színátmenet irányát.

Igen! A CSS-gradiensek korlátlan számú színmegállást támogatnak. Több színt is hozzáadhatsz, hogy összetett, több színű gradienseket hozz létre. Minden színhez megadható egy opcionális pozíciószázalék (0% és 100% között), amellyel szabályozható, hogy hol jelenjen meg a színátmenetben. Ez tökéletes szivárványhatások, naplemente-gradiensek vagy kifinomult színátmenetek létrehozásához.

Használjon két olyan színt, amelyek árnyalatban, telítettségben vagy világosságban közel állnak egymáshoz. Például egy közepes kék színről térjen át egy kicsit világosabb vagy sötétebb kékre. Tartsa alacsonyan a kontrasztot, és fontolja meg a HSL-értékek használatát, ahol a világosságot csak 10-20%-kal módosítja. A finom átmenetek mélységet és vizuális érdeklődést adnak anélkül, hogy túlterhelnék a tartalmat.

A modern CSS-gradiensek (a lineáris gradiens és a radiális gradiens használatával) minden jelenlegi böngésző támogatja a gyártó előtagjai nélkül. Ha azonban nagyon régi böngészőket (IE9 és korábbi) kell támogatni, akkor szükség lehet a gyártó előtagjaira (-webkit-, -moz-, -o-) vagy a tartalék egyszínű színekre. A modern webfejlesztésben a szabványos CSS gradiens szintaxis mindenhol működik.

A színmegállókat egyenletesen helyezze el, és kerülje a drasztikus színugrásokat. Használjon köztes színmegállókat a szélsőséges színek között, hogy simább átmeneteket hozzon létre. A sugárirányú színátmenetek esetében kísérletezzen az alakkal (kör vagy ellipszis) és a pozícióval. Fontolja meg a hasonló telítettségi és világossági értékű színek használatát, vagy dolgozzon HSL-térben, ahol sima árnyalatátmeneteket hozhat létre.

A sugárirányú gradiensek lehetnek kör alakúak (minden irányban azonosak) vagy ellipszis alakúak (a tárolóhoz igazodóan megnyújtva). A körök jól használhatóak reflektoros hatásokhoz és központosított mintákhoz, míg az ellipszisek jobbak olyan hátterekhez, amelyeknek téglalap alakú területeket kell egyenletesen lefedniük. A shape paraméterrel szabályozhatja ezt a viselkedést.

Igen! Használjon 0 és 360 fok közötti szögeket az átlós gradiensekhez. A 45deg tökéletes átlót hoz létre balról balról lentről jobbra fentre, a 135deg pedig jobbról lentről balra fentre. Az átlós gradiensek dinamikus vizuális érdekességet adnak, és végigvezethetik a szemet a terven.

Használjon RGBA- vagy HSLA-színformátumokat alfacsatornával, hogy átlátszóvá halványuló gradienseket hozzon létre. Ez tökéletes átfedési effektusokhoz, képmaszkokhoz vagy mélység létrehozásához. Például az rgba(0,0,0,0,1) és rgba(0,0,0,0,0) közötti gradiens átlátszó feketébe való átmenetet hoz létre.

A színmegállók szabályozzák, hogy az egyes színek hol jelennek meg a színátmenetekben (0% és 100% között). Az egyenletes távolságok sima átmeneteket, míg a megállók egymás mellé csoportosítása éles színváltozásokat eredményez. Ha például két színt 50%-os távolságban helyez el, kemény vonalat hoz létre, míg ha 40%-os és 60%-os távolságban helyezi el őket, akkor sima átmenetet hoz létre.