CSS átmenet generátor
Mi az a CSS átmenet?
A CSS átmenetek lehetővé teszik, hogy két vagy több szín között sima átmeneteket jelenítsen meg képfájlok használata nélkül. Három típus létezik: linear-gradient (egyenes vonal mentén), radial-gradient (egy középpontból kisugározva) és conic-gradient (középpont körül forogva). Az átmeneteket háttereknél, gomboknál, rétegborítóknál és díszítőelemeknél alkalmazzák.
A CSS átmenet generátor használata
-
Válasszon egy előre beállított sémát a mintákból, vagy konfigurálja saját átmenetét.
-
Válassza ki az átmenet típusát: linear, radial vagy conic.
-
Állítsa be a szöget (linear/conic esetén) vagy az alakot (radial esetén).
-
Szerkessze a színmegállókat — módosítsa a színeket és a pozíciókat (0–100%).
-
Szükség szerint adjon hozzá vagy távolítson el színmegállókat.
-
Másolja a CSS-t, és illessze be a stíluslapjába.
Gyakran feltett kérdések
Hogyan hozhatok létre átlátszó gradiensz? Használjon rgba() vagy hsla() színértékeket 0 alfa csatornával a teljes átlátszósághoz. Például az rgba(0,0,0,0) színstop teljesen átlátszó fekete, hasznos a képek fölötti elhalványuló átfedésekhez.
Hogyan hozhatok létre kemény színstopot (átmenet nélkül)? Helyezzen el két színstopot ugyanazon a pozíción — egyik vége és egyik eleje azon a ponton. Például vörös 50%, kék 50% azonnali váltást hoz létre vörösről kékre a középpontnál, gradiensz átmenet nélkül.
Mely böngészők támogatják a kúpos gradienszt? A kúpos gradienszt az összes modern böngésző támogatja (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Az Internet Explorer nem támogatja.
Használhatok több gradienszt ugyanazon az elemen? Igen. A CSS háttér vesszővel elválasztott rétegek listáját fogadja el. Halmazozhat gradienszt, kombinálhatja azokat háttérképekkel, és egymástól függetlenül vezérelheti az egyes rétegek helyzetét és méretét.
Keywords: CSS átmenet generátor, lineáris átmenet, radiális átmenet, kúpos átmenet, CSS háttér generátor, átmenetszín-választó, CSS gradiens eszköz