Přechody CSS
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é jejich středem)
- Kuželové 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, mezi kterými chcete vykreslit hladké přechody. Můžete také nastavit počáteční bod a směr (nebo úhel) spolu s efektem přechodu.
Syntax
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Směr – shora dolů (toto je výchozí)
Následující příklad ukazuje lineární přechod, který začíná nahoře. Začíná červeně a přechází do žluté:
Příklad
#grad {
background-image: linear-gradient(red, yellow);
}
Směr - zleva doprava
Následující příklad ukazuje lineární přechod, který začíná zleva. Začíná červeně a přechází do žluté:
Příklad
#grad {
background-image: linear-gradient(to right, red , yellow);
}
Směr - Diagonální
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é:
Příklad
#grad {
background-image: linear-gradient(to bottom right, red, yellow);
}
Použití úhlů
Chcete-li mít větší kontrolu nad směrem přechodu, můžete místo předdefinovaných směrů definovat úhel (dolů, nahoru, doprava, doleva, doprava dolů atd.). Hodnota 0° je ekvivalentní „to top“. Hodnota 90 stupňů odpovídá „doprava“. Hodnota 180 stupňů je ekvivalentní „to bottom“.
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:
Příklad
#grad {
background-image: linear-gradient(180deg, red, yellow);
}
Použití více barevných zarážek
Následující příklad ukazuje lineární přechod (shora dolů) s více barvami:
Příklad
#grad {
background-image: linear-gradient(red, yellow, green);
}
Následující příklad ukazuje, jak vytvořit lineární přechod (zleva doprava) s barvou duhy a nějakým textem:
Příklad
#grad {
background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet);
}
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í parametr ve funkci rgba() může být hodnota od 0 do 1 a 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));
}
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%);
}