Lære Brug af Baggrundsfarver til Design | Tilføjelse af Dekorative Effekter med CSS

Baggrundsfarven på et website spiller en afgørende rolle i at fastsætte sidens tone og atmosfære. Det er et af de primære visuelle elementer, som brugerne ser, når de besøger din side, og det kan have stor indflydelse på det overordnede udseende og fornemmelse af websitet.

background-color

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

background-color: value;

index.html

index.css

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 imellem dem.

index.html

index.css

Med gradientfarve kan der skabes mere visuelt tiltalende og dynamiske designs end med statisk farve. Overvej 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", ...);

index.html

index.css

Det er også muligt at angive farveprocenten i gradientfarven.

index.html

index.css

Ensartet linear-gradient

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

index.html

index.css

radial-gradient

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

index.html

index.css

1. Hvad er den primære forskel mellem statisk farve og gradientfarve i CSS?

2. Hvad er forskellen mellem lineær gradient og radial gradient i CSS?

Var alt klart?

Tak for dine kommentarer!

Sektion 5. Kapitel 1

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Stryg for at vise menuen

background-color

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

background-color: value;

index.html

index.css

Statisk vs Gradient Farve

index.html

index.css

Med gradientfarve kan der skabes mere visuelt tiltalende og dynamiske designs end med statisk farve. Overvej 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", ...);

index.html

index.css

Det er også muligt at angive farveprocenten i gradientfarven.

index.html

index.css

Ensartet linear-gradient

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

index.html

index.css

radial-gradient

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

index.html

index.css

1. Hvad er den primære forskel mellem statisk farve og gradientfarve i CSS?

2. Hvad er forskellen mellem lineær gradient og radial gradient i CSS?

Var alt klart?

Tak for dine kommentarer!

Sektion 5. Kapitel 1