CSS-liukuvärigeneroija

Mita ovat CSS-liukuvaarit?

CSS-liukuvaarit luovat sulavia, jatkuvia siirtymia kahden tai useamman varin valilla ilman kuvia. Selain piirtaa ne natiivisti, mika tarkoittaa, etta ne skaalautuvat mihin tahansa resoluutioon, latautuvat valittomasti eivaetka tuota yhtaan HTTP-pyyntoa. Liukuvaarit ovat yksi nykyaikaisen CSS:n tehokkaimmista tyokaluista visuaalisesti rikkaiden taustojen, painikkeiden ja koristeellisten elementtien luomiseen.

CSS-liukuvaareja on kahta paatyyppia: lineaariset liukuvaarit, jotka siirtyvat suoraa viivaa pitkin, ja radiaaliset liukuvaarit, jotka sateilevat ulospain keskipisteesta. Kolmas tyyppi, kooniset liukuvaarit, pyorivat keskipisteen ympari kuin variympyra. Tama tyokalu keskittyy lineaarisiin ja radiaalisiin liukuvaareihin, jotka kattavat valtaosan suunnittelutarpeista.

CSS-liukuvarisyntaksi

linear-gradient()-funktio ottaa suunnan (kulman tai avainsanan) ja sen jalkeen varipysahdykset. Perussyntaksi on background: linear-gradient(kulma, vari1 sijainti1, vari2 sijainti2). Kulma on asteina — 0deg menee alhaalta ylos, 90deg vasemmalta oikealle ja 180deg ylhaaelta alas. Voit lisata niin monta varipysahdysta kuin tarvitset.

Radiaaliset liukuvaarit kayttavat muotoa radial-gradient(muoto koko at sijainti, vari1, vari2). Muoto voi olla circle tai ellipse. Kokoavainsanat (closest-side, farthest-corner jne.) ohjaavat, kuinka pitkalle liukuvari ulottuu. Jos jatataan pois, selain kayttaa oletuksia, jotka nayttavat yleensa oikeilta.

Tyokalun kayttohje

Valitse varit varinvalitsimilla, saeada liukuvarin kulmaa liukusaatimella tai kirjoittamalla astearvo, ja lisaa tai poista varipysahdyksia tarpeen mukaan. Tyokalu tuottaa CSS-koodin reaaliajassa. Napsauta kopiointipainiketta kopioidaksesi taydeliasen CSS-saannon leikepoyoalle ja liita se sitten tyylitiedostoosi.

Suunnitteluvinkkeja liukuvareille

Hienovaraiset liukuvaarit nayttavat ammattimaisemmilta kuin dramaattiset. 10-20 asteen savymuutos kahden laheisen varin valilla luo elegantin, modernin ilmeen. Valta yli kolmen varin yhdistamista, ellet tarkoituksella luo sateenkaariefektia. Suuret alueet hyotyvat pehmeista liukuvaareista, kun taas pienet kayttoeliittyman elementit kuten painikkeet kestavat rohkeampia siirtymia.

Tumman tilan suunnittelussa liukuvaaripaeallysteet tummilla taustoilla lisaavat syvyytta haaeritsematta. Kayta puolilaepinakyvia varipysahdyksia (rgba tai hsla) lasinkaltaisten efektien luomiseen. Kerrostaa useita liukuvareja kayttamalla pilkkuja background-ominaisuudessa monimutkaisia kompositioita varten.

Suorituskykynakokohdat

CSS-liukuvaarit ovat GPU-kiihdytettyjaa ja erittain tehokkaita — paljon parempia kuin liukuvarikuvien lataaminen. Kuitenkin hyvin monimutkaiset liukuvaarit, joissa on useita varipysahdyksia, voivat aiheuttaa pienia piirtoeroja selainten valilla. Testaa liukuvarisi aina Chromessa, Firefoxissa ja Safarissa. Nykyaikaiset selaimet tukevat liukuvareja ilman palveluntarjoajaetuliitteita, joten -webkit-linear-gradient ei ole enaa tarpeen.

Usein kysytyt kysymykset

Voinko animoida CSS-liukuvareja?

CSS ei voi animoida liukuvariarvoja suoraan transition-ominaisuudella. Voit kuitenkin animoida ylisuuren liukuvarin background-positionia, kayttaa @property-saantoa mukautettujen ominaisuuksien animointiin liukuvarien sisalla tai ristihaalveta kahden liukuvarin valilla kayttamalla opasiteettia pseudo-elementeilla.

Mika on lineaarisen ja radiaalisen liukuvarin ero?

Lineaarinen liukuvari siirtaa vareja suoraa viivaa pitkin maaratyssae kulmassa. Radiaalinen liukuvari siirtaa ulospain keskipisteesta ympyran tai ellipsin muotoisena. Valitse lineaarinen taustoille ja bannereille, ja radiaalinen valokeila-efekteille tai painikkeiden korostuksille.