Pozadí a přechody

Pozadí a přechody v jazyce HTML a CSS, především na webu

Lineární přechod

Pozadí ve stylu lineárního přechodu vypadá následovně:

background: linear-gradient(to top right, orange 40%, cyan);

Příklad nahoře ukazuje jednoduchou použitelnost ve stylování CSS s pozadím elementu section. Rozeberu jednotlivá nastavení:

linear-gradientlineární stupňující se průběh
to top rightPřechod jde do horního pravého rohu
orange 40% oranžová barva se 40% přechodem
cyanmodrá barva v rozsahu 40%

Radiální přechod

Pozadí ve stylu kruhového přechodu vypadá následovně:

background: radial-gradient(red, cyan);
Jednotlivé elementy můžeme libovolně stylovat přímo a nebo v CSS soboru. Viz. tento odstavec a průhledné rgb. <section style="background: linear-gradient(to top right, rgb(255, 255, 255, 0), rgb(50, 150, 100, 0.8));"></section>