Brug af baggrundsfarver

Baggrundsfarven på et website spiller en afgørende rolle i at sætte tonen og stemningen for siden. Det er et af de primære visuelle elementer, som brugerne ser, når de besøger dit site, og det kan have stor indflydelse på det overordnede udseende og fornemmelsen af websitet.

background-color

Vi kan angive baggrundsfarven for et element ved hjælp af denne egenskab. Værdien kan være i ethvert format: hex, rgb, rgba eller reserveret ord.

background-color: value;

Statisk vs Gradient Farve

Statisk farve henviser til en enkelt farveværdi, der anvendes ensartet på et element, såsom red eller #0000FF. Omvendt indebærer gradientfarve en blanding af to eller flere farver for at skabe en glidende overgang mellem dem.

Med gradientfarver kan der skabes mere visuelt tiltalende og dynamiske designs end med statiske farver. Lad os se på forskellige måder at deklarere gradients på.

Glat linear-gradient

For at angive en lineær gradient som baggrundsfarve anvendes:

background-image: linear-gradient("direction", "color1", "color2", ...);

Det er også muligt at angive farveprocenten i gradientfarven.

Ensfarvet linear-gradient

Vi får en stribet baggrundsfarve, hvis vi angiver den samme procentdel for tilstødende farver. Lad os køre eksemplet for at se forskellen.

radial-gradient

Radial gradient fungerer på samme måde som linear. Den eneste forskel er, at farven starter i midten og spreder sig udad.