CSS-liukuvärigeneraattori
Luo upeita CSS-liukuvärejä visuaalisesti. Luo lineaarisia, radiaalisia ja kartiomaisia liukuvärejä useilla väripysähdysillä, kulmilla ja sijainneilla. Kopioi tuotantovalmis CSS-koodi välittömästi.
Mikä on CSS-liukuväri?
CSS-liukuväri on CSS-kuva-arvo, joka näyttää pehmeät siirtymät kahden tai useamman värin välillä ilman kuvatiedostoja. Selain renderöi liukuvärit, joten ne ovat resoluutiosta riippumattomia ja erittäin suorituskykyisiä.
Mitkä CSS-liukuvärityypit ovat tuettuja?
Tämä generaattori tukee kolmea tyyppiä: linear-gradient (värit suoran viivan varrella), radial-gradient (värit säteilevät keskipisteestä) ja conic-gradient (värit pyörivät keskipisteen ympäri).
Lineaarisen ja radiaalisen liukuvärin ero?
Lineaariset liukuvärit siirtävät värejä suoran viivan varrella, jonka määrittää kulma tai suunnan avainsana. Radiaaliset liukuvärit siirtävät värejä ulospäin keskipisteestä ympyrän tai ellipsin muotoisina.
Kuinka monta väripysähdystä voin käyttää?
Voit käyttää niin monta väripysähdystä kuin tarvitset. Jokainen pysähdys määrittää värin ja valinnaisesti sijainnin (0%–100%) liukuväriviivalla.
Miten käytän luotua CSS-koodia?
Kopioi luotu CSS-koodi ja liitä se background- tai background-image-ominaisuuden arvoksi CSS-tyylitiedostossasi. Koodi toimii kaikissa moderneissa selaimissa.
Mitä ovat väripysähdykset liukuväreissä?
Väripysähdykset määrittävät tiettyjä värejä tietyissä sijainneissa liukuväriviivalla. Esimerkiksi "red 0%, blue 50%, green 100%" luo liukuvärin, joka alkaa punaisena, siirtyy siniseen keskellä ja päättyy vihreään.
Voinko luoda kulmallisia liukuvärejä?
Kyllä, lineaariset liukuvärit tukevat kulma-arvoja 0deg:stä 360deg:hen. Voit myös käyttää suunnan avainsanoja kuten "to right", "to bottom", "to top left".
Ovatko CSS-liukuvärit responsiivisia?
Kyllä, CSS-liukuvärit ovat luonnostaan responsiivisia, koska ne ovat vektoripohjaisia ja selain renderöi ne. Ne skaalautuvat täydellisesti mihin tahansa säiliön kokoon laadun heikkenemättä.
Vaikuttavatko CSS-liukuvärit sivun suorituskykyyn?
CSS-liukuvärit ovat yleensä erittäin suorituskykyisiä. Ne eliminoivat HTTP-pyynnöt kuvatiedostoille ja ovat laitteistokiihdytettyjä. Erittäin monimutkaiset liukuvärit voivat kuitenkin vaikuttaa renderöintiin heikoilla laitteilla.
Voinko käyttää liukuvärejä taustoihin ja reunoihin?
Kyllä, liukuvärejä voidaan käyttää background-image, border-image, mask-image ja mihin tahansa CSS-kuva-arvoja hyväksyvään ominaisuuteen.
Mitkä selaimet tukevat CSS-liukuvärejä?
Kaikki modernit selaimet tukevat CSS-liukuvärejä: Chrome, Firefox, Safari, Edge ja Opera. Tuki on ollut erinomainen IE10:stä lähtien. Toimittajan etuliittejä ei enää tarvita.
Miten luon toistuvan liukuvärin?
Käytä repeating-linear-gradient tai repeating-radial-gradient standardiversioiden sijaan. Nämä toistavat liukuvärikuvion koko elementin täyttämiseksi.
Voinko animoida CSS-liukuvärejä?
CSS-liukuvärejä ei voi suoraan animoida CSS-siirtymillä. Voit kuitenkin animoida background-position, background-size tai käyttää mukautettuja CSS-ominaisuuksia @property:n kanssa.
Onko tämä liukuvärigeneraattori ilmainen?
Kyllä, tämä CSS-liukuvärigeneraattori on täysin ilmainen. Ei rekisteröitymistä, ei käyttörajoituksia ja kaikki luotu koodi on sinun käytettäväksi missä tahansa projektissa.