Změna barvy v nadpisu

Zajímavou animací, která může působit elegantně je změna barvy nadpisu.

Kód níže vám stím může pomoci.

Atributy písma si nastavíte v elementu “Nadpis”.

Takže font, velikost, zarovnání a pokud se nám, jako v tomto případě jedná o nadpis nejvyšší úrovně, nastavíme HTML Značku na H1.

Řádek 1) Nastavení úrovně nadpisu (musí být shodné s nastavením v elementu “Nadpis”)
Řádek 2) Nastavuje délku animace změn barev
Řádek 7) Nám určuje výchozí barvu
Řádek 10) Nám ukazuje barvu, do které se má barevný přechod dostat v polovině animace (viz řádek 9, který je definován na 50%)
Řádek 13) Je cílová barva, jako na začátku. Pokud bychom zde zadali jinou barvu, byla by již třetí v pořadí. Přechod by nebyl v pořádku.

Tip! – pokud si rozdělíte animaci na více sekvencí v procentech, můžete si zadat postupně tolik druhů barev, kolik si přejete.

Takto měníme barvu nadpisu

				
					
selector h1 {
  animation: color-change 15s infinite;
}

@keyframes color-change {
  0% {
    color: #5191B4;
  }
  50% {
    color: #60B819;
  }
  100% {
    color: #5191B4;
  }
}

TIP! – Kód pouze zkopírujte (nejlépe použitím aktivního odkazu vpravo nahoře s označením “Copy”) a vložte do objektu, na který jej chcete použít.

V Elementoru zvolte element “Nadpis”.

Napistě si text a upravte atributy podle vašich představ.

Kód korespondující s úrovní nadpisu (v tomto případě H1) vložte v záložce nastavení označené “Pokročilé” do poslední funkce v seznamu s označením “Custom CSS”, nebo “Upravit CSS”.

Místo pro zvědavé medvědy

Změna barvy v nadpisu

Takto měníme barvu nadpisu