Generator CSS prehodov
Kaj je CSS prehod?
CSS prehodi vam omogočajo prikazovanje gladkih prehodov med dvema ali več barvami brez uporabe slikovnih datotek. Obstajajo tri vrste: linear-gradient (vzdolž ravne linije), radial-gradient (seva iz središčne točke) in conic-gradient (se vrti okoli središčne točke). Prehodi se uporabljajo za ozadja, gumbe, prekrivne plasti in dekorativne elemente.
Kako uporabljati generator CSS prehodov
-
Izberite prednastavitev iz vzorcev ali konfigurirajte lastni prehod.
-
Izberite vrsto prehoda: linear, radial ali conic.
-
Nastavite kot (za linear/conic) ali obliko (za radial).
-
Uredite barvne točke — spremenite barve in položaje (0–100%).
-
Po potrebi dodajte ali odstranite barvne točke.
-
Kopirajte CSS in ga prilepite v svojo stilsko predlogo.
Pogosto Postavljana Vprašanja
Kako ustvarim prozoren gradient? Uporabite barve rgba() ali hsla() z alfa kanalom 0 za popolno prosojnost. Na primer, barvna postaja rgba(0,0,0,0) je popolnoma prosojni črni, uporabna za postopne presvleke na slikah.
Kako ustvarim trdo barvno postajo (brez prehoda)? Postavite dve barvni postaji na isto pozicijo — eno zaključujočo in eno začenjajočo na tej točki. Na primer, rdeča 50%, modra 50% ustvari trenutni preklop iz rdeče na modro na sredini brez prehoda gradienta.
Kateri brskalniki podpirajo konične gradijente? Konični gradienti so podprti v vseh sodobnih brskalnikih (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Niso podprti v Internet Explorerju.
Ali lahko uporabim več gradijentov na istem elementu? Da. CSS background sprejema s črtami ločen seznam slojev. Gradijente lahko gradite, jih kombinirate s sliko ozadja in neodvisno nadzirujete pozicijo in velikost vsakega sloja.
Keywords: generator CSS prehoda, linearni prehod, radialni prehod, konični prehod, generator CSS ozadja, izbirnik barve prehoda, orodje za CSS gradient