CSS színátmenetek

Tartalomjegyzék

    Tartalomjegyzék megjelenítése

Gradiens hátterek:

Gradient Backgrounds

A CSS színátmenetek lehetővé teszik két vagy több meghatározott szín közötti sima átmenetek megjelenítését.

A CSS háromféle színátmenetet határoz meg:

  • Lineáris színátmenetek (le/fel/balra/jobbra/átlósan megy)

  • Radiális színátmenetek (a középpontjuk alapján)

  • Kúpos színátmenetek (egy középpont körül elforgatva)

CSS Lineáris színátmenetek

Lineáris gradiens létrehozásához meg kell határoznia legalább két színstop. A színstopok azok a színek, amelyekkel sima átmeneteket szeretne megjeleníteni között. Kiindulási pontot és irányt (vagy szöget) is beállíthat a gradiens hatással.

Szintaxis

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

Irány - fentről lefelé (ez az alapértelmezett)

A következő példa egy lineáris gradienst mutat be, amely felül kezdődik. Pirosan kezdődik, sárgává vált:

top to bottom (default)

Példa

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

Próbálja ki Ön is →

<!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>

Irány - balról jobbra

A következő példa egy balról induló lineáris gradienst mutat be. Pirosan kezdődik, átmegy a következőre sárga:

left to right

Példa

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

Próbálja ki Ön is →

<!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>

Irány - átlós

A vízszintes és a függőleges kiindulási helyzet megadásával átlósan is készíthet gradienst.

A következő példa egy lineáris gradienst mutat be, amely a bal felső sarokban kezdődik (és a jobb alsó sarokban tart). Pirosan kezdődik, sárgává vált:

top left to bottom right

Példa

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

Próbálja ki Ön is →

<!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>

Szögek használata

Ha jobban szeretné szabályozni a gradiens irányát, szöget határozhat meg az előre meghatározott irányok helyett (lefelé, felé fent, jobbra, balra, jobbra lent stb.). A 0 fok érték megegyezik a "tetejére". A 90 fokos érték egyenértékű a "jobbra" értékkel. Egy érték 180 fok egyenértékű az "aljáig".

Szintaxis

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

A következő példa bemutatja, hogyan kell használni a szögeket lineáris gradienseken:

180deg

Példa

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

Próbálja ki Ön is →

<!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>

Több színstop használata

A következő példa egy lineáris gradienst mutat be (felülről lefelé) a több színstop:

Példa

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

Próbálja ki Ön is →

<!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>

A következő példa bemutatja, hogyan hozhat létre lineáris színátmenetet (balról jobbra) a szivárvány színével és némi szöveggel:

Rainbow Background

Példa

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

Próbálja ki Ön is →

<!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>

Az átlátszóság használata

A CSS színátmenetek az átlátszóságot is támogatják, amivel fading hatásokat lehet létrehozni.

Az átlátszóság növelése érdekében az rgba() függvényt használjuk a színmegállók meghatározásához. Az rgba() függvény utolsó paramétere 0 és 1 közötti érték lehet, és ez meghatározza a szín átlátszóságát: 0 a teljes átlátszóságot, 1 teljes színt jelez (nincs átlátszóság).

A következő példa egy balról induló lineáris gradienst mutat be. Teljesen átlátszóvá válik, átmegy a teljes színű vörösre:

Példa

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

Próbálja ki Ön is →

<!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>

Lineáris gradiens ismétlése

A repeating-linear-gradient() függvény a lineáris gradiensek ismétlésére szolgál:

Példa

Ismétlődő lineáris gradiens:

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

Próbálja ki Ön is →

<!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>