CSS aalto

Siirtymätausta

CSS pehmennys mahdollistaa kahden tai useamman määritetyn väriä välisen pehmeän siirtymän.

CSS määrittää kaksi pehmennysvaihtoehdosta:

  • Lineaarinen pehmennys((alas/ylös/vasen/oikea/kulma-ala-oikea)
  • Radiaalinen pehmennys((määritetty keskellä)

CSS lineaarinen pehmennys

Jos haluat luoda lineaarisen pehmennysvaihteen, sinun täytyy määritellä vähintään kaksi värikoordinaattoria. Värikoordinaattorit ovat niitä värejä, joita haluat näyttää pehmeänä siirtymänä. Voit myös asettaa lähtö- ja suunnan (tai kulman) sekä pehmennysvaikutuksen.

Syntax

background-image: linear-gradient(suunta, color-stop1, color-stop2, ...);

Lineaarinen pehmennys - ylhäältä alas (oletus)

Esimerkki näyttää ylhäältä alkavan lineaarisen pehmennysvaihteen. Se alkaa punaisesta ja siirtyy keltaiseen:

yltä alas (oletusarvo)

Esimerkki

#grad {
  background-image: linear-gradient(red, yellow);
}

Kokeile itse

Lineaarinen siirtymä - vasemmalta oikealle

Seuraava esimerkki näyttää, miten voit luoda lineaarisen siirtymän (vasemmalta oikealle). Se alkaa punaisesta ja siirtyy keltaiseen:

vasemmalta oikealle

Esimerkki

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

Kokeile itse

Lineaarinen siirtymä - kulmavaihe

Voit määrittää horisontaalisen ja vertikaalisen alkupisteen saavuttaaksesi kulmavaiheen.

Seuraava esimerkki näyttää, miten voit luoda lineaarisen siirtymän (vasemmalta oikealle) aloittaen vasemmalta ylärystävältä (oikeaan alarystävälle). Se alkaa punaisesta ja siirtyy keltaiseen:

vasemmasta ylärystävältä oikeaan alarystävälle

Esimerkki

#grad {
  background-image: linear-gradient(to bottom right, red, yellow);
}

Kokeile itse

Käytä kulmaa

Jos haluat tehdä enemmän kontrollia siirtymäkulmaan, voit määrittää kulman korvaamaan oletusarvoisen suunnan (alas, ylös, oikealle, vasemmalle, oikealle alas jne.). Arvo 0deg vastaa ylös (to top). Arvo 90deg vastaa oikealle (to right). Arvo 180deg vastaa alas (to bottom).

180deg

Syntax

background-image: linear-gradient(angle, color-stop1, color-stop2);

Tämä kulma määrittää horisontaalisen ja siirtymälinjan välisen kulman.

Seuraava esimerkki näyttää, miten voit käyttää kulmaa lineaarisessa siirtymässä:

Esimerkki

#grad {
  background-image: linear-gradient(-90deg, red, yellow);
}

Kokeile itse

Käytä useita väritikkejä

Seuraava esimerkki näyttää monivärisen lineaarisen siirtymän (yltä alas):

Esimerkki

#grad {
  background-image: linear-gradient(red, yellow, green);
}

Kokeile itse

Seuraava esimerkki näyttää, miten voit luoda lineaarisen siirtymän (vasemmalta oikealle) käyttämällä taikasävyjä ja tekstiä:

Siirtymätausta

Esimerkki

#grad {
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet); 
}

Kokeile itse

Käytä läpinäkyvyyttä

CSS-siirtymät tukevat myös läpinäkyvyyttä ja voidaan käyttää siirtymäefektien luomiseen.

Jos haluat lisätä läpinäkyvyyttä, käytämme rgba()-funktiota määrittääksesi väritikkin. rgba() -funktioiden viimeinen parametri voi olla arvo 0-1, joka määrittää väriksen läpinäkyvyyden: 0 tarkoittaa täysin läpinäkyvää, 1 täysin värikkäää (ei läpinäkyvyyttä).

Seuraava esimerkki näyttää vasemmalta alkavan lineaarisen peittauksen. Se alkaa täysin läpinäkyvänä ja siirtyy täysin punaiseksi:

Esimerkki

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

Kokeile itse

Toistuva lineaarinen peittaus

repeating-linear-gradient() Funktio toistuva lineaarinen peittaus:

Esimerkki

Toistuva lineaarinen peittaus:

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

Kokeile itse