CSS gradientide generaator

Lineaarsed gradiendid viivad värvid üle mööda sirget joont (horisontaalne, vertikaalne või diagonaalne), luues suunava voolu ühest värvist teise. Radiaalsed gradientid kiirgavad keskpunktist välja ringikujulise või elliptilise mustrina. Kasutage lineaarseid gradiente suundade rõhutamiseks ja moodsate kasutajaliideste jaoks ning radiaalseid gradiente valgusfektide, nuppude või orgaanilise visuaalse huvi tekitamiseks.

Saate määrata kaldenurga kraadides (0deg kuni 360deg) või kasutada märksõnu nagu 'paremale', 'allapoole', 'paremale ülevalt' jne. 0 kraadi näitab ülespoole, 90 kraadi näitab paremale, 180 kraadi näitab alla ja 270 kraadi näitab vasakule. Nurgaga määratakse telg, mida mööda värvid üle lähevad, andes teile täieliku kontrolli gradientide suuna üle.

Jah! CSS-gradiendid toetavad piiramatuid värvipiiranguid. Saate lisada mitu värvi, et luua keerulisi, mitmevärvilisi gradiente. Igal värvil võib olla valikuline positsiooniprotsent (0% kuni 100%), et kontrollida, kus see gradientis ilmub. See sobib ideaalselt vikerkaarefektide, päikeseloojangu gradientide või keeruliste värvide üleminekute loomiseks.

Kasutage kahte värvi, mis on lähedased toonilt, küllastusastmelt või heledusastmelt. Näiteks minge keskmise sinise värvilt üle veidi heledamale või tumedamale sinisele. Hoidke kontrast madalal ja kaaluge HSL-väärtuste kasutamist, mille puhul reguleerite heledust ainult 10-20%. Peened gradendid lisavad sügavust ja visuaalset huvi, ilma sisu ülepaisutamata.

Kaasaegsed CSS-gradientid (kasutades lineaarset gradienti ja radiaalset gradienti) on toetatud kõigis praegustes brauserites ilma tootja eesliideteta. Kui teil on aga vaja toetada väga vanu brausereid (IE9 ja varasemad), siis võite vajada müüja eesliiteid (-webkit-, -moz-, -o-) või varuvärve. Kaasaegses veebiarenduses töötab kõikjal standardne CSS gradientide süntaks.

Asetage oma värvipunktid ühtlaselt ja vältige drastilisi värvihüppeid. Kasutage vahepealseid värvipunkte äärmuslike värvide vahel, et luua sujuvamad üleminekud. Radiaalvärvide puhul katsetage kuju (ring vs. ellips) ja asukohta. Kaaluge sarnaste küllastus- ja heledusväärtustega värvide kasutamist või töötage HSL-ruumis, kus saate luua sujuvad värvitooni üleminekud.

Radiaalsed gradiendid võivad olla ringikujulised (kõikides suundades võrdsed) või elliptilised (venitatud, et mahutisse sobida). Ringid sobivad hästi valgusfektide ja keskendatud kujunduste jaoks, samas kui ellipsid on paremad taustade jaoks, mis peavad katma ristkülikukujulisi alasid ühtlaselt. Parameetriga kuju saab seda käitumist kontrollida.

Jah! Kasutage diagonaalsete kallete jaoks nurkasid vahemikus 0 ja 360 kraadi. 45 kraadi loob täiusliku diagonaali vasakult alt-vasakult paremale, 135 kraadi läheb paremalt-alla alt-vasakult vasakule. Diagonaalsed gradiendid lisavad dünaamilist visuaalset huvi ja juhivad pilku läbi kujunduse.

Kasutage RGBA- või HSLA-värvivorminguid koos alfa-kanaliga, et luua läbipaistvaks muutuvaid värvitoone. See sobib ideaalselt ülekattematerjalide, pildimaskide või sügavuse loomiseks. Näiteks gradient rgba(0,0,0,0,1) ja rgba(0,0,0,0,0) vahel loob ülemineku läbipaistvaks mustaks.

Värvipeatused kontrollivad, kus iga värv ilmub gradientis (0% kuni 100%). Ühtlane vahekaugus loob sujuvad üleminekud, samas kui peatuste koondamine kokku loob teravad värvimuutused. Näiteks kahe värvi paigutamine 50% juures loob kõva joone, samas kui nende paigutamine 40% ja 60% juures loob sujuva segunemise.