Tyylisiä verkkosivustoelementtejä CSS -taustagradientilla

Jos olet ollut Internetissä yli muutaman minuutin, olet todennäköisesti törmännyt CSS -kaltevuuteen. CSS -taustaominaisuutta voidaan käyttää luomaan erilaisia tyylejä, ja yksi mielenkiintoisimmista tyypeistä on se, mitä se voi tehdä liukuvuusarvolla.

Osaaminen suunnitella ja luoda erilaisia CSS -kaltevuuksia on hyödyksi kaikille ohjelmistosuunnittelijoille tai -kehittäjille. Tästä artikkelista opit kaiken, mitä sinun tarvitsee tietää CSS -kaltevuuksien sisällyttämiseksi 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 yleisesti kahta päätyyppiä kaltevuuksista: lineaarinen ja radiaalinen.

On kuitenkin olemassa kolmaskin kaltevuus, joka on vähemmän suosittu ja tunnetaan kartiomaisena kaltevuutena.

CSS -liukuvärien syntaksi

Background-image: gradient-type (direction, color1, color2);

CSS-gradientti on määritettävä taustakuvan CSS-ominaisuudelle. Kaltevuustyyppi voi olla yksi useista; lineaarinen kaltevuus, säteittäinen kaltevuus tai kartiomainen kaltevuus. Kaltevuustyypin jälkeen avautuvat ja sulkeutuvat sulkeet, jotka sisältävät kaltevuuden siirtymissuunnan sekä kaltevuuteen sisällytettävät värit.

Aiheeseen liittyviä: Taustakuvan asettaminen CSS: ään

Yllä oleva esimerkki näyttää kaksi väriä, mutta kaltevuus voi sisältää useita eri värejä. Ainoa vaatimus on, että luettelon jokainen väri erotetaan pilkulla.

Mikä on lineaarinen gradientti?

Lineaarinen gradientti on suosituin CSS -gradientti. Se luo vaakasuoran, pystysuoran tai diagonaalisen siirtymägradientin käyttämällä kahta tai useampaa väriä.

Esimerkki CSS -lineaarisesta gradientista

Background-image: linear-gradient(#00A4CCFF, #F95700FF);

Yllä oleva koodi tuottaa seuraavan CSS -gradientin:

Gradientin syntaksissa on yksi tärkeä osa, joka jätetään pois yllä olevasta esimerkistä. Tämä komponentti on kaltevuuden siirtymäsuunta, ja se jätettiin pois, koska lineaarisen kaltevuuden oletuskohdistus on pystysuora (ylhäältä alas); se on haluttu lähtö tässä esimerkissä.

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

Käyttämällä Bottom Linear Gradient -esimerkkiä

Background-image: linear-gradient(to bottom, #00A4CCFF, #F95700FF);

Kuten tulosteesta näkyy, yllä oleva koodi luo kaltevuuden, joka alkaa sinisellä yläosassa ja siirtyy sitten hitaasti oranssiin alareunaan. Jos haluat muuttaa värien järjestystä, voit vaihtaa värin pohjaan kanssa huipulle ja tämä kääntää kaltevuuden suunnan ja tuottaa seuraavan tuloksen:

Pystysuuntaisen kohdistuksen tapaan kaltevuuden vaakasuuntainen kohdistaminen voidaan saavuttaa käyttämällä kahta suunta -avainsanaa: vasemmalle ja oikealle , joka tuottaa seuraavat lähdöt.

kuinka kääntää kuvahaku puhelimessa

Diagonaalinen lineaarinen kaltevuus

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

Oikeassa alakulmassa
Vasemmassa alakulmassa
Oikeassa yläkulmassa
Vasemmassa yläkulmassa

Esimerkki diagonaalisesta lineaarisesta gradientista

Background-image: linear-gradient(to bottom right, #00A4CCFF, #F95700FF);

Yllä oleva esimerkki tuottaa seuraavan tuloksen:

Kuten yllä olevasta tuotoksesta näkyy, lineaarinen kaltevuus siirtyy diagonaaliseen suuntaan siirtymällä kaltevuuden vasemmasta yläkulmasta oikeaan alaosaan.

Monivärinen lineaarinen gradientti

Lineaarisella gradientilla voi olla kaksi tai useampia värejä, mutta miltä useat värit näyttävät kaltevuudessa? Monivärinen lineaarinen gradientin värijärjestely riippuu sen suunnasta. Vaakasuunnassa siirtyvillä väreillä on jokainen uusi väri lineaarisen kaltevuuden vasemmalla tai oikealla puolella, riippuen lineaarisen kaltevuuden tarkasta suunnasta.

Esimerkki monivärisestä lineaarisesta gradientista

Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);

Yllä oleva koodirivi tuottaa seuraavan tuloksen:

Kuten näette, jokainen uusi väri lisätään kaltevuuden oikealle puolelle, mikä luo lopulta sateenkaaren. Sama lähtö voidaan saavuttaa pystysuunnassa; lineaarisen kaltevuuden erityinen värijärjestely riippuu kuitenkin pystysuuntaisesta avainsanasta (ylös tai alas).

Mikä on säteittäinen kaltevuus?

Säteittäinen kaltevuus luo kierreliukuvärin, jossa on kaksi väriä, jotka alkavat oletusarvoisesti keskeltä. Kun lineaarinen kaltevuus tuottaa suoran kaltevuuden, joka virtaa pystysuoraan tai vaakasuoraan, säteittäinen kaltevuus tuottaa pyöreän kaltevuuden, joka virtaa keskeltä ulkoreunoille.

Käyttämällä Radial Gradient -esimerkkiä

Background-image: radial-gradient( circle, #00A4CCFF, #F95700FF);

Yllä oleva koodirivi tuottaa seuraavan tuloksen:

Radiaalisen kaltevuuskeskuksen muuttaminen

Oletuksena säteittäinen kaltevuus alkaa kaltevuuden keskeltä; on kuitenkin mahdollista muuttaa lähtöpistettä lisäämällä muutamia avainsanoja.

Voinko pelata youtubea alexalla

Esimerkki radiaalisen kaltevuuden aloitusasennon muuttamisesta

Background-image: radial-gradient(circle at top right, #00A4CCFF, #F95700FF);

Yllä oleva koodirivi tuottaa seuraavan tuloksen:

Kuten näet tulosteesta, kaltevuus alkaa nyt oikeasta yläkulmasta keskikohdan sijasta. Tämä muutos on mahdollinen avainsanan sisällyttämisen vuoksi Yläoikea yllä olevassa koodissa. Seuraavaa avainsanaluetteloa voidaan käyttää myös säteittäisen kaltevuuden lähtöpisteen muuttamiseen:

Ylävasen
Ala oikea
Alhaalla vasemmalla

Moniväriset säteittäiset kaltevuudet

Kuten lineaarinen kaltevuus, myös säteittäinen kaltevuus voi käyttää kahta enemmän väriä, suurin ero on se, että jos lineaarinen kaltevuus lisää kaltevuutta suorassa linjassa, säteittäinen kaltevuus lisää uusia värejä ulkoreunaan.

Monivärinen säteittäinen kaltevuusesimerkki

  
Background-image: radial-gradient(circle, #00A4CCFF, #F95700FF, #e2e223, #2727e2, #19ad19);

Yllä oleva koodirivi tuottaa seuraavan tuloksen:

Liukuvärien mukauttaminen

Toistaiseksi olet nähnyt kaltevuuden suunnan ja keskipisteen muuttamisen, mutta et ole nähnyt kaltevuuden mukauttamista. Liukuvärin mukauttaminen saattaa kuulostaa paljon työtä, mutta kun olet ymmärtänyt CSS -taustakaltevuuden luomisen perusteet, seuraava ilmeinen askel on oppia tekemään CSS -kaltevuuksista ainutlaatuisempia.

Voinko pelata ps3 -pelejäni ps4: llä

Oletusarvon mukaan kaltevuuden värit vievät tasaisesti jaetun tilan, ja jokainen väri siirtyy tasaisesti sen jälkeiseen. Joten jos kaksi väriä yhdistetään liukuväriksi, kukin väri vie puolet käytettävissä olevasta tilasta siirtyessään yhdestä toiseen. Jos kolme väriä yhdistetään, kukin väri vie kolmanneksen käytettävissä olevasta tilasta.

Räätälöidyn kaltevuuden avulla voit määrittää värin liukuvärissä olevan tilan määrän määrittämällä nimenomaisesti värin pysäytysasento .

Lineaarisen gradientin mukauttaminen Esimerkki 1

Background-image: linear-gradient(to right, #00A4CCFF, #F95700FF 30%);

Yllä oleva koodirivi tuottaa seuraavan tuloksen:

Yllä oleva tulos näyttää lineaarisen kaltevuuden toisen värin, joka pysähtyy gradientin ensimmäisen värin 30%: n pisteeseen sen tavanomaisen sijainnin sijaan, ja koska toinen väri on myös gradientin viimeinen väri, se ulottuu luonnollisesti loppuun .

Jos sijoittaisit 30% yllä olevaan koodiin ensimmäisen värin lopussa, asioiden pitäisi tulla selkeämmiksi.

Lineaarisen gradientin mukauttaminen Esimerkki 2

Background-image: linear-gradient( to right, #00A4CCFF 30%, #F95700FF );

Yllä oleva koodi tuottaa seuraavan tuloksen.

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

Säteittäisen kaltevuuden mukauttaminen tapahtuu samalla tavalla kuin lineaarinen kaltevuus. Ainoa asia, joka sinun on tehtävä saavuttaaksesi samat tulokset edellä säteittäisessä kaltevuudessa, on muuttaa kaltevuustyyppiä ja suuntaa.

CSS -liukuvärien luominen ei ole koskaan ollut helpompaa

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

Jos et kuitenkaan halua mennä suoraan uusien ja ainutlaatuisten kaltevuuksien luomiseen, voit aloittaa luomalla upeita, jo olemassa olevia kaltevuuksia.

Jaa Jaa Tweet Sähköposti 27 Tyylikästä CSS -taustagradienttiesimerkkiä

Tasaiset värit ovat niin viime vuonna. Kaltevuudet ovat mukana! Mutta miten voit luoda ne CSS: ssä?

Lue seuraava Liittyvät aiheet

Ohjelmointi
Verkkokehitys
Web-suunnittelu
CSS

Kirjailijasta Kadeisha Kean(21 artikkelia julkaistu)

Kadeisha Kean on täyspinoinen ohjelmistokehittäjä ja tekninen/teknologinen kirjoittaja. Hänellä on selkeä kyky yksinkertaistaa joitain monimutkaisimpia teknologisia käsitteitä; tuottaa materiaalia, jonka jokainen tekniikan aloittelija voi helposti ymmärtää. Hän on intohimoinen kirjoittamiseen, mielenkiintoisten ohjelmistojen kehittämiseen ja matkustamiseen ympäri maailmaa (dokumenttielokuvien kautta).

Lisää Kadeisha Keanilta

tilaa uutiskirjeemme

Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia e -kirjoja ja ainutlaatuisia tarjouksia!

Klikkaa tästä tilataksesi