Funkcia radial-gradient

Funkcia radial-gradient nastavuje radiálny gradient. Táto funkcia sa aplikuje na vlastnosti, ktoré nastavujú obrázok pozadia: background, background-image alebo obrázok okraja: border-image, background-image-source.

Syntax

cssselektor {
  background: radial-gradient([tvar typ pozícia], farba1 veľkosť1, farba2 veľkosť2...);
}

Hodnoty

Hodnoty pre typ

Poznámka

Typ a tvar je možné meniť miestami, no pozícia musí ísť na konci prvého parametra. Typ gradientu a jeho veľkosť navzájom nepracujú (logicky, veď sa dostávajú do konfliktu). Vyhráva veľkosť.

Príklad . Najjednoduchší variant

Jednoducho nastavme začiatočnú a konečnú farbu:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(red, blue);
  width: 200px;
  height: 200px;
}

Результат:

Príklad . Pridajme pozíciu

Nastavme polohu stredu: 30px - odsadenie zľava, 100px - odsadenie zhora:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(at 30px 100px, red, blue);
  width: 200px;
  height: 200px;
}

Результат:

Príklad . Pozícia v percentách

Nastavme polohu stredu v percentách: 30% - odsadenie zľava, 50% - odsadenie zhora:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(at 30% 50%, red, blue);
  width: 200px;
  height: 200px;
}

Результат:

Príklad . Pozícia kľúčovým slovom

Je možné použiť kľúčové slová top, bottom, left, right, center v rôznych kombináciách. Nastavme napríklad gradient vpravo v strede:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(at right center, red, blue);
  width: 200px;
  height: 200px;
}

Результат:

Príklad . Veľkosť gradientu

V tomto prípade bude gradient fungovať takto: od 0px do 20px bude čistá červená farba, od 20px do 60px - gradient od červenej k modrej, po 60px - čistá modrá farba:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(red 20px, blue 60px);
  width: 200px;
  height: 200px;
}

Результат:

Príklad . Niekoľko farieb za sebou

V tomto prípade bude gradient fungovať takto: od 0px do 20px bude čistá červená farba, od 20px do 40px bude čistá modrá farba, od 40px do 60px - gradient od modrej k zelenej, po 60px - čistá zelená:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(red 20px, blue 20px, blue 40px, green 60px);
  width: 200px;
  height: 200px;
}

Результат:

Príklad . Veľkosť + pozícia

Nastavme súčasne veľkosti pre rôzne farby a pozíciu stredu gradientu:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(at 30px 60px, red 20px, blue 60px);
  width: 200px;
  height: 200px;
}

Результат:

Príklad . Tvar gradientu

Tvar gradientu sa nastavuje prvým parametrom a môže prijať 2 hodnoty: circle (kruhový gradient) alebo ellipse (eliptický gradient, predvolený). Prečo sme až doteraz nevideli eliptické gradienty, hoci sa nastavuje ako predvolený? Pretože doteraz bol tvar blokov štvorcový. Ak zmeníme tvar na obdĺžnikový, uvidíme eliptický gradient:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(red 20px, blue 60px);
  width: 300px;
  height: 200px;
}

Результат:

Príklad . Kruhový gradient

Vytvorme kruhový gradient v obdĺžnikovom bloku. Na to nastavme prvým parametrom tvar gradientu pomocou kľúčového slova circle:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(circle, red 20px, blue 60px);
  width: 300px;
  height: 200px;
}

Результат:

Príklad . Pridajme pozíciu

Pridajme k predchádzajúcemu kódu ešte aj pozíciu gradientu:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(circle at 30px 60px, red 20px, blue 60px);
  width: 300px;
  height: 200px;
}

Результат:

Príklad . Typ farthest-corner + circle

Tvar gradientu sa vypočítava na základe informácie o vzdialenosti k ďalekému rohu bloku:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(circle farthest-corner at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

Príklad . Typ farthest-corner + ellipse

Tvar gradientu sa vypočítava na základe informácie o vzdialenosti k ďalekému rohu bloku:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(ellipse farthest-corner at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

Príklad . Typ farthest-side + circle

Gradient sa šíri až k ďalšej strane bloku:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(circle farthest-side at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

Príklad . Typ farthest-side + ellipse

Gradient sa šíri až k ďalšej strane bloku:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(ellipse farthest-side at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

Príklad . Typ closest-corner + circle

Tvar gradientu sa vypočítava na základe informácie o vzdialenosti k najbližšiemu rohu bloku:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(circle closest-corner at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

Príklad . Typ closest-corner + ellipse

Tvar gradientu sa vypočítava na základe informácie o vzdialenosti k najbližšiemu rohu bloku:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(ellipse closest-corner at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

Príklad . Typ closest-side + circle

Tvar gradientu sa zhoduje s najbližšou k nemu stranou bloku:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(circle closest-side at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

Príklad . Typ closest-side + ellipse

Tvar gradientu sa zhoduje s najbližšou k nemu stranou bloku:

html<div id="elem"></div>

css#elem {
  background: radial-gradient(ellipse closest-side at 60px 80px, red, blue);
  width: 300px;
  height: 200px;
}

Результат:

Pozri tiež