CSS farveovergang

Gradations baggrund

CSS farveovergange lader dig vise en glat overgang mellem to eller flere specificerede farver.

CSS definerer to typer af farveovergange:

  • Lineær farveovergang(nedad/oppad/til venstre/til højre/diagonal)
  • Radial farveovergang(defineret af dens midte)

CSS lineær farveovergang

For at oprette en lineær farveovergang skal du definere mindst to farvestøtter. Farvestøtter er de farver, du vil vise en glat overgang mellem. Du kan også indstille startpunktet og retningen (eller vinklen) samt overgangseffekten.

syntaks

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

Lineær farveovergang - fra toppen til bunden (standard)

Dette eksempel viser en lineær farveovergang fra toppen. Den starter med rød og overgår til gul:

Fra øverst til nederst (standard)

Eksempel

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

Prøv det selv

Liniær gradation - Fra venstre til højre

Følgende eksempel viser en linær gradation, der starter til venstre. Den starter med rød og overgår til yellow:

Fra venstre til højre

Eksempel

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

Prøv det selv

Liniær gradation - Diagonal

Du kan opnå en diagonaal gradation ved at specificere både den horisontale og vertikale startposition.

Følgende eksempel viser en linær gradation, der starter i øverste venstre hjørne (til nederste højre hjørne). Den starter med rød og overgår til yellow:

Fra øverst til nederst til højre

Eksempel

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

Prøv det selv

Brug af vinkel

Hvis du ønsker mere kontrol over gradationsvinklen, kan du definere en vinkel for at erstatte foruddefinerede retninger (nedad, opad, til højre, til venstre, til højre ned osv.). Værdien 0deg svarer til opad (til top). Værdien 90deg svarer til til højre (til right). Værdien 180deg svarer til nedad (til bottom).

180deg

syntaks

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

Denne vinkel specificerer vinklen mellem den horisontale linje og gradationslinjen.

Følgende eksempel viser, hvordan man bruger vinklen i en linær gradation:

Eksempel

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

Prøv det selv

Brug af flere farvekoder

Følgende eksempel viser en linær gradation med flere farvekoder (fra øverst til nederst):

Eksempel

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

Prøv det selv

Følgende eksempel viser, hvordan man bruger regnbuesfarver og tekst til at skabe en linær gradation (fra venstre til højre):

Gradations baggrund

Eksempel

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

Prøv det selv

Brug af gennemsigtighed

CSS gradation understøtter også gennemsigtighed og kan bruges til at skabe gradations effekter.

Hvis du vil tilføje gennemsigtighed, bruger vi rgba() funktionen til at definere farvekoden. Den sidste parameter i rgba() funktionen kan være en værdi mellem 0 og 1, som definerer farvens gennemsigtighed: 0 betyder fuldstændig gennemsigtig, 1 betyder fuld farve (ingen gennemsigtighed).

Følgende eksempel viser en linear gradient, der starter fra venstre. Den starter helt gennemsigtig og overgår derefter til fuld farve rød:

Eksempel

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

Prøv det selv

Gentagen linear gradient

repeating-linear-gradient() Funktioner bruges til gentagen linear gradient:

Eksempel

Gentagen linear gradient:

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

Prøv det selv