CSS-gradienter

Indholdsfortegnelse

Gradientbaggrunde:

Gradient Backgrounds

CSS-gradienter lader dig vise jævne overgange mellem to eller flere specificerede farver.

CSS definerer tre typer gradienter:

Lineære gradienter (går ned/op/venstre/højre/diagonalt)
Radiale gradienter (defineret af deres midte)
Koniske gradienter (roteret omkring et midtpunkt)

CSS lineære gradienter

For at oprette en lineær gradient skal du definere mindst to farvestop. Farvestop er de farver, du ønsker for at give jævne overgange blandt. Du kan også indstille et startpunkt og en retning (eller en vinkel) langs med gradienteffekten.

Syntaks

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

Retning - top til bund (dette er standard)

Følgende eksempel viser en lineær gradient, der starter øverst. Det begynder rødt og går over til gult:

top to bottom (default)

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Top to Bottom</h1>
<p>This linear gradient starts red at the top, transitioning to yellow at the bottom:</p>

<div id="grad1"></div>

</body>
</html>

Retning - venstre mod højre

Følgende eksempel viser en lineær gradient, der starter fra venstre. Den begynder rødt og går over til gul:

left to right

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Left to Right</h1>
<p>This linear gradient starts red at the left, transitioning to yellow (to the right):</p>

<div id="grad1"></div>

</body>
</html>

Retning - diagonal

Du kan lave en gradient diagonalt ved at angive både den vandrette og lodrette startposition.

Det følgende eksempel viser en lineær gradient, der starter øverst til venstre (og går nederst til højre). Det begynder rødt og skifter til gult:

top left to bottom right

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to bottom right, red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradient - Diagonal</h1>
<p>This linear gradient starts red at top left, transitioning to yellow (at bottom right):</p>

<div id="grad1"></div>

</body>
</html>

Brug af vinkler

Hvis du ønsker mere kontrol over retningen af gradienten, du kan definere en vinkel i stedet for de foruddefinerede retninger (til bund, til øverst, til højre, til venstre, nederst til højre osv.). En værdi på 0 grader svarer til "til top". En værdi på 90 grader svarer til "til højre". En værdi på 180 grader svarer til "til bunden".

Syntaks

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

Følgende eksempel viser, hvordan man bruger vinkler på lineære gradienter:

180deg

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(0deg, red, yellow);
}

#grad2 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(90deg, red, yellow);
}

#grad3 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(180deg, red, yellow);
}

#grad4 {
  height: 100px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(-90deg, red, yellow);
}
</style>
</head>
<body>

<h1>Linear Gradients - Using Different Angles</h1>

<div id="grad1" style="text-align:center;">0deg</div><br>
<div id="grad2" style="text-align:center;">90deg</div><br>
<div id="grad3" style="text-align:center;">180deg</div><br>
<div id="grad4" style="text-align:center;">-90deg</div>

</body>
</html>

Brug af flere farvestop

Følgende eksempel viser en lineær gradient (fra top til bund) med flere farvestop:

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, yellow, green);
}

#grad2 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red, orange, yellow, green, blue, indigo, violet);
}

#grad3 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(red 10%, green 85%, blue 90%);
}
</style>
</head>
<body>

<h1>Linear Gradients - Multiple Color Stops</h1>
<p><strong>Note:</strong> Color stops are spaced evenly when no percents are specified.</p>

<h2>3 Color Stops (evenly spaced):</h2>
<div id="grad1"></div>

<h2>7 Color Stops (evenly spaced):</h2>
<div id="grad2"></div>

<h2>3 Color Stops (not evenly spaced):</h2>
<div id="grad3"></div>

</body>
</html>

Følgende eksempel viser, hvordan man laver en lineær gradient (fra venstre mod højre) med regnbuens farve og noget tekst:

Rainbow Background

Eksempel

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 55px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
}
</style>
</head>
<body>

<div id="grad1" style="text-align:center;margin:auto;color:#888888;font-size:40px;font-weight:bold">
Rainbow Background
</div>

</body>
</html>

Brug af gennemsigtighed

CSS-gradienter understøtter også gennemsigtighed, som kan bruges til at skabe fading-effekter.

For at tilføje gennemsigtighed bruger vi funktionen rgba() til at definere farvestoppene. Den sidste parameter i rgba()-funktionen kan være en værdi fra 0 til 1, og den definerer farvens gennemsigtighed: 0 angiver fuld gennemsigtighed, 1 angiver fuld farve (ingen gennemsigtighed).

Følgende eksempel viser en lineær gradient, der starter fra venstre. Det starter helt gennemsigtigt og skifter 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 →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}
</style>
</head>
<body>

<h1>Linear Gradient - Transparency</h1>
<p>To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).</p>

<div id="grad1"></div>

</body>
</html>

Gentagelse af en lineær gradient

Funktionen repeating-linear-gradient() bruges til at gentage lineære gradienter:

Eksempel

En gentagende lineær gradient:

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

Prøv det selv →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

#grad2 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(45deg,red,yellow 7%,green 10%);
}

#grad3 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(190deg,red,yellow 7%,green 10%);
}

#grad4 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(90deg,red,yellow 7%,green 10%);
}

#grad5 {
  height: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-linear-gradient(45deg, red 0px, red 10px, red 10px, yellow 10px, yellow 20px);
}
</style>
</head>
<body>

<h1>Repeating Linear Gradient</h1>

<div id="grad1"></div>

<p>A repeating gradient on 45deg axe starting red and finishing green:</p>
<div id="grad2"></div>

<p>A repeating gradient on 190deg axe starting red and finishing green:</p>
<div id="grad3"></div>

<p>A repeating gradient on 90deg axe starting red and finishing green:</p>
<div id="grad4"></div>

<p>A repeating linear gradient with solid stripes:</p>
<div id="grad5"></div>

</body>
</html>