Funkce linear-gradient

Funkce linear-gradient nastavuje lineární přechod. Používá se u vlastností, které nastavují obrázek pozadí: background, background-image nebo obrázek ohraničení: border-image, background-image-source.

Syntaxe

cssselektor {
  background: linear-gradient([úhel nebo směr], barva1 velikost1, barva2 velikost2...);
}

Hodnoty

Příklad . Nejjednodušší varianta

Syntaxe:

cssselektor {
  background: linear-gradient(počáteční barva, koncová barva);
}

Podívejme se na příkladu:

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

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

Результат:

Příklad . Přidáme úhel

Syntaxe:

cssselektor {
  background: linear-gradient(úhel, počáteční barva, koncová barva);
}

Podívejme se na příkladu:

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

css#elem {
  background: linear-gradient(45deg, black, red);
  width: 200px;
  height: 200px;
}

Результат:

Příklad . Přidáme směr

Místo úhlu lze přidat směr top, left, right, bottom nebo jejich kombinaci: top left, top right Před směrem se píše slovo to.

Syntaxe:

cssselektor {
  background: linear-gradient(směr, počáteční barva, koncová barva);
}

Podívejme se na příkladu:

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

css#elem {
  background: linear-gradient(to left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

Příklad . Přidáme směr

Uveďme jiný směr:

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

css#elem {
  background: linear-gradient(to top left, black, red);
  width: 200px;
  height: 200px;
}

Результат:

Příklad . Přidáme velikost

Syntaxe:

cssselektor {
  background: linear-gradient(barva1 velikost1, barva2 velikost2);
}

V následujícím příkladu bude chování následující: čistá červená barva bude od 0px do 30px, od 30px do 50px bude přechod od červené k modré, a od 50px a do konce - čistá modrá:

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

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

Результат:

Příklad . Přidáme více než 2 barev

Syntaxe:

cssselektor {
  background: linear-gradient(barva1 velikost1, barva2 velikost2, barva3 velikost3...);
}

V následujícím příkladu bude chování následující: čistá červená barva bude od 0px do 30px, od 30px do 50px bude přechod od červené k modré, a od 50px a do 70px - přechod od modré k zelené, a po 70px - čistá zelená:

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

css#elem {
  background: linear-gradient(red 30px, blue 50px, green 70px);
  width: 200px;
  height: 200px;
}

Результат:

Příklad . Ostré přechody

V následujícím příkladu bude chování následující: čistá červená barva bude od 0px do 30px, čistá modrá - od 30px do 60px, čistá zelená - po 60px (red 0px lze i nepsat):

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

css#elem {
  background: linear-gradient(red 0px, red 30px, blue 30px, blue 60px, green 60px);
  width: 200px;
  height: 200px;
}

Результат:

Příklad . Velikosti lze zadávat i v procentech

V následujícím příkladu bude chování následující: čistá červená barva bude od 0% do 30%, čistá modrá - od 30% do 60%, čistá zelená - po 60% (red 0% lze i nepsat):

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

css#elem {
  background: linear-gradient(red 0%, red 30%, blue 30%, blue 60%, green 60%);
  width: 200px;
  height: 200px;
}

Результат:

Příklad . Kombinace s background-size

V následujícím příkladu bude chování následující: čistá červená barva bude od 0px do 30px, čistá modrá - od 30px do 60px, přičemž vše se bude opakovat po kouscích po 60px (kvůli background-size: 60px;):

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

css#elem {
  background: linear-gradient(to right, red 30px, blue 30px, blue 60px);
  background-size: 60px 60px;
  width: 200px;
  height: 200px;
}

Результат:

Viz také