CSS gradiendi generaator
Mis on CSS gradient?
CSS-gradiendid võimaldavad kuvada sujuvaid üleminekuid kahe või enama värvi vahel ilma pildifaile kasutamata. Neid on kolme tüüpi: linear-gradient (mööda sirget joont), radial-gradient (kiirgab keskmisest punktist) ja conic-gradient (pöörlevalt ümber keskmise punkti). Gradiendid sobivad taustade, nuppude, ülekattete ja dekoratiivsete elementide jaoks.
Kuidas CSS gradiendi generaatorit kasutada
-
Vali eelseadistus värvinäidistest või seadista oma gradient.
-
Vali gradiendi tüüp: linear, radial või conic.
-
Kohanda nurka (linear/conic jaoks) või kuju (radial jaoks).
-
Muuda värvipeatusi — vaheta värve ja asukohti (0–100%).
-
Lisa või eemalda värvipeatusi vastavalt vajadusele.
-
Kopeeri CSS ja kleebi see oma stiililehele.
Korduma Kippuvad Küsimused
Kuidas luua läbipaistvat gradienti? Kasuta rgba() või hsla() värviväärtusi alfa-kanali 0-ga täieliku läbipaistvuse saamiseks. Näiteks värvi peatuspunkt rgba(0,0,0,0) on täielikult läbipaistev must, kasulik piltide hääbumise katete jaoks.
Kuidas luua kõva värvipeatust (ilma üleminekuta)? Paiguta kaks värvipeatust samasse asukohta — üks lõpetav ja üks alustav sel hetkel. Näiteks red 50%, blue 50% loob hetkese vahetuse punasest siniseks poolel tee, ilma gradientüleminekuta.
Millised brauserid toetavad koonuseid gradiente? Koonuseid gradiente toetavad kõik kaasaegsed brauserid (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Internet Explorer neid ei toeta.
Kas saan kasutada sama elemendi peal mitu gradienti? Jah. CSS background aktsepteerib komaga eraldatud kihtide loendit. Saad virna asetada gradiente, kombineerida neid taustapiltidega ja juhtida iga kihi asukohta ja suurust iseseisvalt.
Keywords: CSS gradiendi generaator, lineaarne gradient, radiaalne gradient, kooniline gradient, CSS tausta generaator, gradiendi värvi valija, CSS gradiendi tööriist