CSS kuželové přechody

Obsah

CSS kuželové přechody

Kuželový přechod je přechod s barevnými přechody otočenými kolem středového bodu.

Chcete-li vytvořit kuželový přechod, musíte definovat alespoň dvě barvy.

Syntax

background-image: conic-gradient([from angle] [at position,] color 
  [degree], color [degree], ...);

Ve výchozím nastavení je úhel 0 stupňů a pozice střed.

Pokud není zadán žádný stupeň, budou barvy rovnoměrně rozloženy středový bod.

Kuželový přechod: tři barvy

Následující příklad ukazuje kuželový přechod se třemi barvami:

Příklad

Kuželový přechod se třemi barvami:

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

Zkuste to sami →

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

<h1>Conic Gradient - Three Colors</h1>

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

</body>
</html>

Kuželový přechod: pět barev

Následující příklad ukazuje kuželový přechod s pěti barvami:

Příklad

Kuželový přechod s pěti barvami:

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

Zkuste to sami →

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

<h1>Conic Gradient - Five Colors</h1>

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

</body>
</html>

Kuželový přechod: tři barvy a stupně

Následující příklad ukazuje kuželový přechod se třemi barvami a stupněm pro každou barvu:

Příklad

Kuželový přechod se třemi barvami a stupněm pro každou barvu:

   #grad {
  background-image: conic-gradient(red 45deg, yellow 
    90deg, green 210deg);
}

Zkuste to sami →

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

<h1>Conic Gradient - Defined degree for each color</h1>

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

</body>
</html>

Vytvořte koláčové grafy

Stačí přidat poloměr okraje: 50 %, aby kuželový přechod vypadal jako koláč:

Příklad

   #grad {
  background-image: conic-gradient(red, yellow, green, blue, 
    black);
  
    border-radius: 50%;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(red, yellow, green, blue, black);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Conic Gradient - Pie Chart</h1>

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

</body>
</html>

Zde je další koláčový graf s definovanými stupni pro všechny barvy:

Příklad

   #grad {
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 
    180deg, green 180deg, green 270deg, blue 270deg);
  
    border-radius: 50%;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(red 0deg, red 90deg, yellow 90deg, yellow 180deg, green 180deg, green 270deg, blue 270deg);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Conic Gradient - Pie Chart</h1>

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

</body>
</html>

Kuželový Gradient S Zadaným Úhlem

[od úhel] určuje úhel, kterým je celý gradient kuželosečky otočený o.

Následující příklad ukazuje kuželový gradient s úhlem od 90 stupňů:

Příklad

Kuželový gradient s úhlem od:

   #grad {
  background-image: conic-gradient(from 90deg, red, yellow, 
    green);
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(from 90deg, red, yellow, green);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Conic Gradient - With a from angle</h1>

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

</body>
</html>

Kuželový přechod se specifikovanou středovou polohou

[at position] určuje střed kuželosečky.

Následující příklad ukazuje kuželový přechod se středovou polohou 60 % 45 %:

Příklad

Kuželový gradient se zadanou středovou polohou:

   #grad {
  background-image: conic-gradient(at 60% 45%, red, yellow, 
    green);
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: conic-gradient(at 60% 45%, red, yellow, green);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Conic Gradient - With a specified center position</h1>

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

</body>
</html>

Opakování kuželového gradientu

Funkce repeating-conic-gradient() se používá k opakování kuželoseček:

Příklad

Opakující se kuželový gradient:

   #grad {
  background-image: 
repeating-conic-gradient(red 10%, yellow 20%);
  
    border-radius: 50%;
}

Zkuste to sami →

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

<h1>Repeating a Conic Gradient</h1>

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

</body>
</html>

Zde je opakující se kuželový gradient s definovanými barevnými počátky a ukončeními:

Příklad

Opakující se kuželový přechod s definovanými začátky a zastaveními barvy:

   #grad {
  background-image: 
repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
  
    border-radius: 50%;
}

Zkuste to sami →

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
  height: 200px;
  width: 200px;
  background-color: red; /* For browsers that do not support gradients */
  background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg);
  border-radius: 50%;
}
</style>
</head>
<body>

<h1>Repeating a Conic Gradient with color-starts and -stops</h1>

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

</body>
</html>

Přechodové funkce CSS

V následující tabulce jsou uvedeny funkce přechodu CSS:

conic-gradient(): Vytváří kuželový přechod. Definujte alespoň dva barvy (kolem středového bodu)
linear-gradient(): Vytvoří lineární přechod. Definujte alespoň dva barvy (shora dolů)
radial-gradient(): Vytvoří radiální přechod. Definujte alespoň dva barvy (od středu k okrajům)
repeating-conic-gradient(): Opakuje kuželový gradient
repeating-linear-gradient(): Opakuje lineární gradient
repeating-radial-gradient(): Opakuje radiální gradient