Tyylikkäät verkkosivustoelementit, joissa on CSS-taustaväri

Jos olet ollut Internetissä yli muutaman minuutin, on todennäköistä, että olet törmännyt CSS-kaltevuuteen. CSS-taustaominaisuutta voidaan käyttää luomaan erilaisia ​​tyylejä, ja yksi kiehtovimmista tyypeistä on se, mitä se voi tehdä liukuväriarvolla.

Tieto kuinka suunnitella ja luoda erilaisia ​​CSS-gradientteja on voimavara kaikille ohjelmistosuunnittelijoille tai kehittäjille. Tästä artikkelista opit kaiken, mitä sinun tarvitsee tietää, jotta voit aloittaa CSS-liukuvärien sisällyttämisen projekteihisi.

Mikä on CSS-gradientti?

CSS-gradientti on olennaisesti kahden tai useamman värin yhdistelmä, joka siirtyy sujuvasti yhdestä toiseen. CSS-gradientin siirtymätila riippuu käytetyn gradientin tyypistä. Ohjelmistosuunnittelussa käytetään yleensä kahta päätyyppiä: lineaarinen ja säteittäinen.

On kuitenkin olemassa kolmas tyyppinen kaltevuus, joka on vähemmän suosittu ja joka tunnetaan nimellä kartiomainen kaltevuus.

CSS-gradienttien syntaksit

Taustakuva: gradienttityyppi (suunta, väri1, väri2);

CSS-gradientti tulisi määrittää taustakuvan CSS-ominaisuuteen. Gradienttityyppi voi olla yksi monista; lineaarinen gradientti, radiaalinen gradientti tai kartiomainen gradientti. Liukuvärin tyyppiä seuraavat avaavat ja sulkeutuvat suluet, jotka sisältävät kaltevuuden siirtymissuunnan sekä kaltevuuteen sisällytettävät värit.

Liittyvät: Kuinka asettaa taustakuva CSS: ssä

Yllä olevassa esimerkissä on kaksi väriä, mutta kaltevuus voi sisältää useita eri värejä. Ainoa vaatimus on, että jokainen luettelon väri erotetaan pilkulla.

Mikä on lineaarinen kaltevuus?

Lineaarinen gradientti on suosituin CSS-gradientti. Se luo vaakasuoran, pystysuoran tai vinosti siirtyvän kaltevuuden käyttämällä kahta tai useampaa väriä.

CSS-lineaarinen gradienttiesimerkki

Taustakuva: lineaarinen gradientti (# 00A4CCFF, # F95700FF);

Yllä oleva koodi tuottaa seuraavan CSS-gradientin:

Yksi esimerkki gradienttisyntaksista on jätetty pois yllä olevasta esimerkistä. Tämä komponentti on gradientin siirtymäsuunta, ja se jätettiin pois, koska lineaarisen gradientin oletusasetus on pystysuora (ylhäältä alas); se on haluttu tulos tässä esimerkissä.

Yllä oleva koodi tuottaa saman tuloksen kuin seuraava koodirivi. Ainoa ero näiden kahden välillä on koodin suuntaosa.

Alemman lineaarisen kaltevuusesimerkin käyttäminen

Taustakuva: lineaarinen gradientti (alareunaan, # 00A4CCFF, # F95700FF);

Kuten tulosteesta näkyy, yllä oleva koodi luo kaltevuuden, joka alkaa sinisellä ylhäältä ja siirtyy sitten hitaasti oranssiin alareunaan. Jos haluat muuttaa värien järjestystä, voit korvata sen pohjaan kanssa huipulle ja tämä kääntää kaltevuuden suunnan, jolloin saadaan seuraava tulos:

Samalla tavalla kuin pystysuuntainen suuntaus, kaltevuuden vaakasuuntainen suuntaus voidaan saavuttaa käyttämällä kahta suuntaavaavainsarjaa: vasemmalle ja oikealle, joka tuottaa seuraavat lähdöt, vastaavasti.

Diagonaalinen lineaarinen kaltevuus

On mahdollista saavuttaa diagonaalinen lineaarinen gradienttisiirtymä mihin tahansa lineaarisen gradientin suuntaan. On vain neljä erityistä avainsanaluetteloa, jotka sinun on tiedettävä tämän mahdollistamiseksi.

• Oikealle
• Vasempaan alakulmaan
• Ylhäällä oikealla
• Ylhäällä vasemmalla

Diagonaalisen lineaarisen kaltevuusesimerkin käyttö

Taustakuva: lineaarinen gradientti (oikeaan alakulmaan, # 00A4CCFF, # F95700FF);

Yllä oleva esimerkki tuottaa seuraavan tuloksen:

Kuten yllä olevasta lähdöstä näet, lineaarinen gradientti siirtyy diagonaalisuunnassa siirtymällä kaltevuuden vasemmasta yläkulmasta oikeaan alakulmaan.

Monivärinen lineaarinen kaltevuus

Lineaarisella liukuvärillä voi olla kaksi tai useampia värejä, mutta miltä enemmän värejä näyttää liukuvärillä? Monivärinen lineaarinen gradienttivärijärjestely riippuu sen suunnasta. Vaakasuunnassa siirtyvillä kukin uusi väri näkyy lineaarisen gradientin vasemmalla tai oikealla puolella riippuen lineaarisen gradientin tarkasta suunnasta.

Esimerkki monivärisestä lineaarisesta liukuväristä

Taustakuva: lineaarinen gradientti (oikealle, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

Yllä oleva koodirivi tuottaa seuraavan tuloksen:

Kuten näette, kukin uusi väri lisätään kaltevuuden oikealle puolelle, mikä luo lopulta sateenkaareksi. Sama tulos voidaan saavuttaa pystysuunnassa; erityinen värijärjestely lineaarisella gradientilla riippuu kuitenkin pystysuunnan avainsanasta (ylös tai alas).

Mikä on säteittäinen kaltevuus?

Radiaalinen kaltevuus luo kierteisen kaltevuuden, jossa kaksi on enemmän värejä, jotka alkavat oletusarvoisesti keskustasta. Kun lineaarinen gradientti tuottaa suoran kaltevuuden, joka virtaa pystysuoraan tai vaakasuoraan, säteittäinen gradientti tuottaa pyöreän kaltevuuden, joka virtaa keskeltä ulkoreunoihin.

Käyttämällä säteittäistä gradienttia

Taustakuva: säteittäinen kaltevuus (ympyrä, # 00A4CCFF, # F95700FF);

Yllä oleva koodirivi tuottaa seuraavan tuloksen:

Radiaalisen kaltevuuskeskuksen vaihtaminen

Oletuksena radiaalinen kaltevuus alkaa gradientin keskiosasta; lähtöpistettä on kuitenkin mahdollista muuttaa muutamalla avainsanalla.

Säteittäisen kaltevuuden aloitusasennon muuttaminen

Taustakuva: säteittäinen kaltevuus (ympyrä oikeassa yläkulmassa, # 00A4CCFF, # F95700FF);

Yllä oleva koodirivi tuottaa seuraavan tuloksen:

Kuten voit nähdä ylhäältä tulevasta lähdöstä, kaltevuus alkaa nyt oikeasta yläkulmasta keskuksen sijaan. Tämä muutos on mahdollista avainsanan sisällyttämisen vuoksi Yläoikea yllä olevassa koodissa. Seuraavaa avainsanaluetteloa voidaan käyttää myös säteittäisen kaltevuuden alkupisteen muuttamiseen:

• Ylävasen
• Ala oikea
• Alhaalla vasemmalla

Moniväriset säteittäiset kaltevuudet

Kuten lineaarinen gradientti, radiaalinen gradientti voi käyttää myös kahta enemmän väriä, suurin ero on siinä missä lineaarinen gradientti lisää kaltevuutta suoralla linjalla, säteittäinen gradientti lisää uusia värejä ulkopintaan reuna.

Esimerkki monivärisestä säteittäisestä gradientista

Taustakuva: säteittäinen kaltevuus (ympyrä, # 00A4CCFF, # F95700FF, # e2e223, # 2727e2, # 19ad19);

Yllä oleva koodirivi tuottaa seuraavan tuloksen:

Liukuvärien mukauttaminen

Toistaiseksi olet nähnyt, kuinka vaihdat kaltevuuden suuntaa ja keskipistettä, mutta et ole nähnyt, kuinka kaltevuutta mukautetaan. Liukuvärin mukauttaminen saattaa kuulostaa suurelta työltä, mutta kun ymmärrät luomisen perusteet CSS-taustagradientti Seuraava ilmeinen vaihe on oppia tekemään CSS-kaltevuuksista enemmän ainutlaatuinen.

Oletuksena gradientin värit vievät tasaisesti jakautuneen tilan jokaisen värin siirtyessä sujuvasti sen jälkeiseksi. Joten jos kaksi väriä yhdistetään gradientiksi, kukin väri vie puolet käytettävissä olevasta tilasta siirtyessään yhdestä toiseen. Jos yhdistetään kolme väriä, jokainen väri vie kolmanneksen käytettävissä olevasta tilasta.

Mukautetun liukuvärin avulla voit määrittää, kuinka paljon tilaa väri vie liukuvärillä, osoittamalla nimenomaisesti värin pysäytysasento.

Lineaarisen kaltevuuden esimerkin mukauttaminen 1

Taustakuva: lineaarinen gradientti (oikealle, # 00A4CCFF, # F95700FF 30%);

Yllä oleva koodirivi tuottaa seuraavan tuloksen:

Yllä oleva tulos näyttää lineaarisen gradientin toisen värin pysähtyen gradientin ensimmäisen värin 30%: n pisteeseen, tavallisen sijaintinsa sijasta ja koska toinen väri on myös liukuvärin viimeinen väri, se luonnollisesti ulottuu värille loppuun.

Jos aiot sijoittaa 30% yllä olevan koodin ensimmäisen värin loppuun, asioiden pitäisi tulla selvemmiksi.

Lineaarisen kaltevuuden esimerkin mukauttaminen 2

Taustakuva: lineaarinen gradientti (oikealle, # 00A4CCFF 30%, # F95700FF);

Yllä oleva koodi tuottaa seuraavan tuloksen.

Yllä oleva tulos näyttää selvästi gradientin ensimmäisen värin pysähtyvän gradientin toisen värin 30%: n pisteessä. Tämän esimerkin ja yllä olevan pitäisi auttaa helpottamaan värien pysäyttämisen mukauttamista.

Radiaalisen gradientin mukauttaminen tapahtuu samalla tavalla kuin lineaarinen gradientti. Ainoa asia, joka sinun on tehtävä saavuttaaksesi edellä mainitut tulokset säteittäisessä gradientissa, on muuttaa kaltevuuden tyyppiä ja suuntaa.

Luo CSS-liukuvälejä ei ole koskaan ollut näin helppoa

Tässä opetusartikkelissa on työkalut lineaaristen ja säteittäisten kaltevuuksien tunnistamiseen ja luomiseen. Jos olet päässyt tähän pisteeseen, opit muuttamaan kaltevuuden suuntaa ja keskustaa. Lisäksi sinulla on nyt taidot mukauttaa CSS-liukuvälejä ja luoda ainutlaatuisia taustakaltevuuksia.

Jos et kuitenkaan halua siirtyä suoraan uusien ja ainutlaatuisten kaltevuuksien luomiseen, voit aloittaa luomalla upeita aiemmin luotuja kaltevuuksia.

27 tyylikästä CSS-taustagradientti-esimerkkiä

Yhtenäiset värit ovat niin viime vuonna. Kaltevuudet ovat sisään! Mutta miten luot ne CSS: ssä?

Lue seuraava

Kirjailijasta

Laajenna lukemaan koko tarina