Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Udfordring: Implementering af Dekorative Effekter i CSS | Tilføjelse af Dekorative Effekter med CSS
CSS-Grundlæggende

bookUdfordring: Implementering af Dekorative Effekter i CSS

Opgave

Øv dig i at forbedre det visuelle udtryk på websiden. Opgaven omfatter:

  • Tilføj en skygge til div-elementet med klassenavnet card. De angivne skyggeværdier er rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
  • Tilføj et baggrundsbillede til div-elementet med klassenavnet card. Billedlinket er angivet: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
  • Centrér baggrundsbilledet i kortet.
index.html

index.html

index.css

index.css

copy
  • For at tilføje en skygge til et element anvendes box-shadow-egenskaben med den angivne værdi. I dette tilfælde er værdien rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
  • For at angive et billede som baggrund ved hjælp af background-image-egenskaben, benyttes syntaksen url("correct path"). Indsæt stien til billedet i anførselstegnene. I denne opgave er den korrekte sti angivet: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
  • For at bestemme placeringen af baggrundsbilledet anvendes background-position-egenskaben. I dette tilfælde sættes værdien til center for egenskaben.
index.html

index.html

index.css

index.css

copy

Bemærk

Du har gennemført kurset "CSS Fundamentals" og har mestret grundlæggende web-styling. Tag dine designfærdigheder til næste niveau med "Advanced CSS Techniques", eller begynd at kode interaktivitet i "Introduction to JavaScript". Din rejse som webudvikler fortsætter!

1. Hvilken egenskab tilføjer skygge omkring et elements boks?

2. Hvordan kan du tilføje et billede som baggrund på et element?

question mark

Hvilken egenskab tilføjer skygge omkring et elements boks?

Select the correct answer

question mark

Hvordan kan du tilføje et billede som baggrund på et element?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 5. Kapitel 6

Spørg AI

expand

Spørg AI

ChatGPT

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

Awesome!

Completion rate improved to 2.56

bookUdfordring: Implementering af Dekorative Effekter i CSS

Stryg for at vise menuen

Opgave

Øv dig i at forbedre det visuelle udtryk på websiden. Opgaven omfatter:

  • Tilføj en skygge til div-elementet med klassenavnet card. De angivne skyggeværdier er rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
  • Tilføj et baggrundsbillede til div-elementet med klassenavnet card. Billedlinket er angivet: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
  • Centrér baggrundsbilledet i kortet.
index.html

index.html

index.css

index.css

copy
  • For at tilføje en skygge til et element anvendes box-shadow-egenskaben med den angivne værdi. I dette tilfælde er værdien rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
  • For at angive et billede som baggrund ved hjælp af background-image-egenskaben, benyttes syntaksen url("correct path"). Indsæt stien til billedet i anførselstegnene. I denne opgave er den korrekte sti angivet: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
  • For at bestemme placeringen af baggrundsbilledet anvendes background-position-egenskaben. I dette tilfælde sættes værdien til center for egenskaben.
index.html

index.html

index.css

index.css

copy

Bemærk

Du har gennemført kurset "CSS Fundamentals" og har mestret grundlæggende web-styling. Tag dine designfærdigheder til næste niveau med "Advanced CSS Techniques", eller begynd at kode interaktivitet i "Introduction to JavaScript". Din rejse som webudvikler fortsætter!

1. Hvilken egenskab tilføjer skygge omkring et elements boks?

2. Hvordan kan du tilføje et billede som baggrund på et element?

question mark

Hvilken egenskab tilføjer skygge omkring et elements boks?

Select the correct answer

question mark

Hvordan kan du tilføje et billede som baggrund på et element?

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 5. Kapitel 6
some-alt