Přechody CSS

Obsah

    Zobrazit obsah

Přechodové pozadí:

Gradient Backgrounds

Přechody CSS umožňují zobrazit plynulé přechody mezi dvěma nebo více určenými barvami.

CSS definuje tři typy přechodů:

  • Lineární přechody (jdou dolů/nahoru/doleva/doprava/diagonálně)

  • Radiální přechody (definované svým středem)

  • Kónické přechody (otočené kolem středového bodu)

Lineární přechody CSS

Chcete-li vytvořit lineární přechod, musíte definovat alespoň dvě barevné zastávky. Zarážky barev jsou barvy, které chcete vykreslit hladké přechody mezi. Můžete také nastavit počáteční bod a směr (nebo úhel). s gradientovým efektem.

Syntax

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

Směr - shora dolů (toto je výchozí nastavení)

Následující příklad ukazuje lineární přechod, který začíná nahoře. Začíná červeně a přechází do žluté:

top to bottom (default)

Příklad

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

Zkuste to sami →

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

Směr - zleva doprava

Následující příklad ukazuje lineární přechod, který začíná zleva. Začíná červeně, přechází do žlutá:

left to right

Příklad

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

Zkuste to sami →

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

Směr - úhlopříčka

Přechod můžete vytvořit diagonálně zadáním vodorovné i svislé počáteční polohy.

Následující příklad ukazuje lineární přechod, který začíná vlevo nahoře (a jde vpravo dole). Začíná červeně a přechází do žluté:

top left to bottom right

Příklad

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

Zkuste to sami →

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

Použití úhlů

Pokud chcete větší kontrolu nad směrem přechodu, můžete definovat úhel místo předdefinovaných směrů (dolů, ke nahoře, vpravo, vlevo, vpravo dole atd.). Hodnota 0 stupňů je ekvivalentní "nahoru". Hodnota 90 stupňů odpovídá „doprava“. Hodnota 180 stupňů je ekvivalentní k „dolu“.

Syntax

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

Následující příklad ukazuje, jak používat úhly na lineárních přechodech:

180deg

Příklad

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

Zkuste to sami →

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

Použití více barevných zarážek

Následující příklad ukazuje lineární gradient (shora dolů) s více barevných zastávek:

Příklad

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

Zkuste to sami →

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

Následující příklad ukazuje, jak vytvořit lineární přechod (zleva doprava) s barvou duhy a nějakým textem:

Rainbow Background

Příklad

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

Zkuste to sami →

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

Použití průhlednosti

Přechody CSS také podporují průhlednost, kterou lze použít k vytvoření efektů blednutí.

Pro přidání průhlednosti používáme funkci rgba() k definování barevných zarážek. Posledním parametrem ve funkci rgba() může být hodnota od 0 do 1 a to definuje průhlednost barvy: 0 označuje plnou průhlednost, 1 označuje plnou barvu (bez průhlednosti).

Následující příklad ukazuje lineární přechod, který začíná zleva. Začíná zcela průhledně a přechází do plné barvy červené:

Příklad

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

Zkuste to sami →

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

Opakování lineárního gradientu

Funkce repeating-linear-gradient() se používá k opakování lineárních přechodů:

Příklad

Opakující se lineární gradient:

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

Zkuste to sami →

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