CSS tutoriál

DOMŮ CSS Úvod do CSS Syntaxe CSS Selektory CSS CSS Jak na to Komentáře CSS CSS barvy CSS pozadí Hranice CSS Okraje CSS CSS padding Výška/šířka CSS CSS Box Model obrys CSS Text CSS CSS písma Ikony CSS CSS odkazy CSS seznamy CSS tabulky Zobrazení CSS CSS Max-šířka Pozice CSS CSS Z-index Přetečení CSS CSS Float CSS Inline-block CSS zarovnat CSS kombinátory Pseudotřída CSS Pseudoprvek CSS Neprůhlednost CSS Navigační lišta CSS Rozbalovací seznamy CSS Galerie obrázků CSS CSS obrázkoví skřítci CSS Attr Selectory CSS formuláře Počítadla CSS Rozvržení webu CSS Jednotky CSS Specifičnost CSS CSS !důležité Matematické funkce CSS

Pokročilé CSS

CSS zaoblené rohy Obrázky ohraničení CSS CSS pozadí CSS barvy Klíčová slova barev CSS Přechody CSS CSS Shadows Textové efekty CSS Webová písma CSS CSS 2D transformace CSS 3D transformace Přechody CSS CSS animace CSS Tooltips Obrázky ve stylu CSS CSS obrazový odraz Přizpůsobení objektu CSS CSS objekt-pozice CSS maskování Tlačítka CSS Stránkování CSS Více sloupců CSS Uživatelské rozhraní CSS CSS proměnné Velikost CSS boxu CSS mediální dotazy Příklady CSS MQ CSS Flexbox

CSS responzivní

Úvod RWD Výhled RWD Zobrazení mřížky RWD Dotazy na média RWD Obrázky RWD Videa RWD Rámce RWD Šablony RWD

CSS mřížka

Úvod do mřížky Mřížkový kontejner Položka mřížky

CSS SASS

Výukový program SASS

Příklady CSS

CSS šablony Příklady CSS css kvíz Cvičení CSS CSS certifikát

CSS reference

Reference CSS Selektory CSS Funkce CSS CSS Reference Aural Webová bezpečná písma CSS CSS animovatelné Jednotky CSS Převodník CSS PX-EM CSS barvy Hodnoty barev CSS Výchozí hodnoty CSS Podpora prohlížeče CSS

CSS kuželové přechody


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 poloha je střed.

Pokud není zadán žádný stupeň , budou barvy rovnoměrně rozprostřeny kolem středového bodu.


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);
}

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);
}

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);
}


Vytvořte koláčové grafy

Stačí přidat border-radius: 50%, aby kuželový přechod vypadal jako koláč:

Příklad

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

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%;
}

Kuželový přechod se specifikovaným úhlem

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

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);
}

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);
}

Opakování kuželového gradientu

Funkce repeating-conic-gradient()se používá k opakování kuželových přechodů:

Příklad

Opakující se kuželový gradient:

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

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%;
}

Přechodové funkce CSS

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

Function Description
conic-gradient() Creates a conic gradient. Define at least two colors (around a center point)
linear-gradient() Creates a linear gradient. Define at least two colors (top to bottom)
radial-gradient() Creates a radial gradient. Define at least two colors (center to edges)
repeating-conic-gradient() Repeats a conic gradient
repeating-linear-gradient() Repeats a linear gradient
repeating-radial-gradient() Repeats a radial gradient