Změny barev na pozadí

Velmi jednoduchým zpestřením stránek je změna barvy na pozadí stránky. Samozřejmě je to možné vytvořit i pomocí “slideshow” přímo v elementu, ale kód bude méně zatěžovat načítání stránek a je to také i méně pracné. Přičemž zůstává možnost pestrosti nastavení.

Je možné použít několik způsobů, my si zde ukážeme asi ten nejjednodušší.

Návod opět je možné použít i na jiné redakční systémy. Vlastně je to jen stylování v CSS. Nejste omezeni jen na Elementor, ale můžete jej použít přímo do Vašeho programovaného projektu, anebo například ve WordPressu apod.

Opět je možné u funkcí mezi značkami /* dělat různé úpravy a nastavení dle Vašich představ*/, které následně doporučuji vymazat!

V krátkosti si popíšeme klíčové funkce:

background-size: 200% 200%; zajišťuje, že přechodové barvy pokrývají větší plochu, což umožňuje plynulý přechod.
background-position se animuje z 0% 0% přes 100% 100% a zpět na 0% 0%, což vytváří plynulý efekt přechodu barev.

Nezapomeňte si dále nastavit název ID kontejneru pro správnou funkčnost, nebo možnost použít v projektu více nastavení. Pokud má náš kontejner ID #muj_01, kód by vypadal takto:

Pokud si chcete vložit tento kód do Vašeho projektu, musíme si ještě upřesnit několik detailů.

Při kopírování a vložení do “custom CSS” je možné udělat ještě několik základních úprav.

Postupujte prosím takto:

Zkopírujte kód CSS, který je vložen hned pod obrázkem. Doporučuji využít funkci, která se objeví při najetí myši v pravém horním roku na obrazovce “Copy”.
Kod vložte pod záložkou “Pokročilé”, a je použitelný téměř u všech elementů, které má své pozadí, do sekce pro úpravu krátkého kódu – “custom CSS”.
Upravte si hodnoty podle svých představ, například:
- background: Je samotné pozadí a určujeme zde tvar, nebo spíše lépe bychom to měli nazvat jako “typ” přechodu. Níže je uvedeno několik dalších typů i se samotným kódem. Podle této funkce se nastavuje i barevné pojetí.
- background-size: Kde máme nastavenu hodnotu na 200%, jak už výše uvádím pro plynulé překrytí barev. I tento atribut je možné si nastavit podle vašich potřeb.
- animation: Zde se opět nastaví délka animace, v našem případě například 8s. Samozřejmě si můžete upravit délku podle svých představ.
- keaframes: Nastavení snímků/políček.

Pro větší přehled jsem Vám přidal popisky k funkcím k nastavení funkcí přímo na řádky do/za kód. Poznámky si následně, jak jsem již zmiňoval, vymažte.

Další úpravy a nastavení již nechám na Vaší fantazii.

Nejčastěji použijeme animaci pozadí přímo na celé pozadí stránek, tedy pak přímo na kontejner, celou sekci. To podle toho, v čem Váš projekt připravujete.

CSS ID je takové, jaké uvádíte na začátku kódu, v našem případě jsem použil přivlastňovací zájmeno v kombinaci s číslem, a níže pak v kombinaci s funkcí.

CSS kód je ke zkopírování níže.

Připravený CSS kód s animací s ID "muj_01"

"muj_ 136 "

				
					#muj_01 {  /* Označení ID CSS pro případ vícero nastavení na stránce */
  background: radial-gradient(circle, #00008B, #8B0000, #4B0082);  /* Tvar a barevné pojetí pozadí */
  background-size: 200% 200%;  /* Nastavení větší plochy pokrytí pro hladší přechod */
  animation: backgroundAnimation 8s ease infinite;  /* Nastavení délky animace */
}

@keyframes backgroundAnimation {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

Druhý způsob animování, zde tedy musí toto CSS ID korespondovat s použitým kódem.

CSS kód je tady:

Připravený CSS kód s animací s ID "muj_02"

"muj_ 136 "

				
					#muj_02 { /* Označení ID CSS pro případ vícero nastavení na stránce */
  background: radial-gradient(circle, #808080, #A9A9A9, #D3D3D3); /* Tvar a barevné pojetí pozadí */
  background-size: 200% 200%; /* Nastavení větší plochy pokrytí pro hladší přechod */
  animation: greyBackgroundAnimation 8s ease infinite; /* Nastavení délky animace */
}

@keyframes greyBackgroundAnimation {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

Připravené typy přechodů

V CSS můžete použít různé tvary a typy přechodů pro pozadí, a to nejen radiální (kruh), ale také lineární přechody a další tvary definované pomocí klíčových slov, nebo kombinací více přechodů.

Níže je seznam různých přechodů a tvarů, které můžete použít:

#1 | Linear Gradient (Lineární přechod)

				
					background: linear-gradient(to right, #808080, #A9A9A9, #D3D3D3);

#2 | Radial Gradient (Radiální přechod)

				
					background: radial-gradient(circle, #808080, #A9A9A9, #D3D3D3);

#3 | Conic Gradient (Kuželový přechod)

				
					background: conic-gradient(#808080, #A9A9A9, #D3D3D3);

Příklady ke tvarům

#1 | Linear Gradient (Lineární přechod)

				
					#muj_linear {
  background: linear-gradient(to right, #808080, #A669A9, #D3D3D3);
  background-size: 200% 200%;
  animation: greyBackgroundAnimation 12s ease infinite;
}

@keyframes greyBackgroundAnimation {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

Výsledek Linear Gradient

#2 | Conic Gradient (Kuželový přechod)

				
					#muj_conic {
  background: conic-gradient(#808080, #A9A9A9, #D3D3D3);
  background-size: 200% 200%;
  animation: greyBackgroundAnimation 8s ease infinite;
}

@keyframes greyBackgroundAnimation {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

Výsledek Conic Gradient

#3 | Combining Multiple Gradients (Kombinace více přechodů)

				
					#muj_combining {
  background: 
    radial-gradient(circle, #808080, #3339A9, #D3D3D3),
    linear-gradient(to right, rgba(255,255,255,0.3), rgba(255,255,255,0.3));
  background-blend-mode: overlay;
  background-size: 200% 200%;
  animation: greyBackgroundAnimation 20s ease infinite;
}

@keyframes greyBackgroundAnimation {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

Výsledek Combining Multiple Gradients

Praktický příklad pozadí pod tlačítkem

Přímé použití na pozadí pod element “Tlačítko”.

U prvního příkladu je použito CSS ID s názvem “muj_02”
U druhého příkladu je použito CSS ID s názvem “muj_combining”
U třetího příkladu je použito CSS ID s názvem “muj_conic”

V záložce “Pokročilé” si nastavíte vnější okraj. Zde jsem zvolil 15px především kvůli tomu, aby příklad byl dobře čitelný.

Je to o tom, jaký design stránek tvoříte a pokud uděláte užší odstup vnějšího okraje, bude efekt decentnější.

Je to opravdu jen o tom, jaký design se Vám nejvíce hodí.

Každý z těchto příkladů Vám vytvoří jiný vizuální efekt, který můžete použít podle toho, co nejlépe vyhovuje vašim designovým požadavkům. Ujistěte se, že ID vašeho kontejneru je skutečně #muj_xxxx a že jste kód správně vložili do sekce vlastních CSS stylů v Elementoru.