Bruk av bakgrunnsfarger

Bakgrunnsfargen på et nettsted spiller en avgjørende rolle i å sette tonen og atmosfæren for siden. Det er et av de viktigste visuelle elementene brukerne ser når de besøker nettstedet ditt, og det kan i stor grad påvirke det generelle utseendet og følelsen av nettsiden.

background-color

Vi kan angi bakgrunnsfarge for et element ved hjelp av denne egenskapen. Verdien kan være i hvilket som helst format: hex, rgb, rgba eller reservert ord.

background-color: value;

Statisk vs Gradient Farge

Statisk farge refererer til en enkelt fargeverdi som brukes jevnt på et element, for eksempel red eller #0000FF. På den andre siden innebærer gradient farge å blande to eller flere farger sammen for å skape en jevn overgang mellom dem.

Med gradient farge kan vi lage mer visuelt tiltalende og dynamiske design enn med statisk farge. La oss se på ulike måter å deklarere gradienter på.

Jevn linear-gradient

For å angi en lineær gradient bakgrunnsfarge bruker vi:

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

Vi kan også angi prosentandel for fargene i gradienten.

Ensfarget linear-gradient

Vi får stripete bakgrunnsfarge hvis vi angir samme prosentandel for tilstøtende farger. Kjør eksempelet for å se forskjellen.

radial-gradient

Radial gradient fungerer på samme måte som lineær. Den eneste forskjellen er at fargen starter i midten og sprer seg utover.