Lære Udfordring: Implementering af Dekorative Effekter i CSS | Tilføjelse af Dekorative Effekter med CSS

Opgave

Øv dig og forbedr 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.css

For at tilføje en skygge til et element, anvend 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, benyt 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, brug egenskaben background-position. I dette tilfælde skal værdien sættes til center for egenskaben.

index.html

index.css

Bemærk

Du har gennemført kurset "CSS Fundamentals" og har opnået grundlæggende færdigheder i web-styling. Tag dine designkompetencer 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?

Var alt klart?

Tak for dine kommentarer!

Sektion 5. Kapitel 6

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

Suggested prompts:

How do I write the CSS code to add the shadow and background image to the card?

Can you explain where to place the CSS code for the .card class?

What does the box-shadow property do in this context?

Awesome!

Completion rate improved to 2.56

Stryg for at vise menuen

Opgave

Øv dig og forbedr 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.css

For at tilføje en skygge til et element, anvend 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, benyt 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, brug egenskaben background-position. I dette tilfælde skal værdien sættes til center for egenskaben.

index.html

index.css

Bemærk

Du har gennemført kurset "CSS Fundamentals" og har opnået grundlæggende færdigheder i web-styling. Tag dine designkompetencer 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?

Var alt klart?

Tak for dine kommentarer!

Sektion 5. Kapitel 6