Radiální přechody CSS
Radiální přechody CSS
Radiální gradient je definován svým středem.
Chcete-li vytvořit radiální přechod, musíte také definovat alespoň dvě barevné zarážky.
Syntax
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
Ve výchozím nastavení je tvar elipsa, velikost je nejvzdálenější roh a pozice je střed.
Radiální přechod – rovnoměrně rozmístěné barevné zastávky (toto je výchozí)
Následující příklad ukazuje radiální přechod s rovnoměrně rozmístěnými barvami:
Příklad
#grad {
background-image: radial-gradient(red, yellow, green);
}
Radiální přechod - různě rozmístěné barevné zastávky
Následující příklad ukazuje radiální přechod s různě rozmístěnými barevnými zarážkami:
Příklad
#grad {
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
Nastavit tvar
Parametr tvar definuje tvar. Může mít hodnotový kruh nebo elipsu. Výchozí hodnota je elipsa.
Následující příklad ukazuje radiální gradient s tvarem kruhu:
Příklad
#grad {
background-image: radial-gradient(circle, red, yellow, green);
}
Použití různých velikostí klíčových slov
Parametr size definuje velikost přechodu. Může nabývat čtyř hodnot:
- nejbližší strana
- nejvzdálenější strana
- nejbližší roh
- nejvzdálenější roh
Příklad
Radiální přechod s různými velikostmi klíčových slov:
#grad1 {
background-image: radial-gradient(closest-side at 60% 55%, red, yellow,
black);
}
#grad2 {
background-image: radial-gradient(farthest-side at 60%
55%, red, yellow, black);
}
Opakování radiálního gradientu
Funkce repeating-radial-gradient() se používá k opakování radiálních gradientů:
Příklad
Opakující se radiální gradient:
#grad {
background-image:
repeating-radial-gradient(red, yellow 10%, green 15%);
}