Udfordring: Opret en Moderne Kortkomponent
Stryg for at vise menuen
Øv dig og forbedr det visuelle udtryk på websiden. Opgaven omfatter:
- Tilføj en skygge til
div-elementet med klassenavnetcard. 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 klassenavnetcard. Billedlinket er angivet:
https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png
- Centrer 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ærdienrgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px. - For at sætte et billede som baggrund ved hjælp af
background-image-egenskaben, benyt syntaksenurl("correct path"). Indsæt stien til billedet i anførselstegn inde i parentesen. 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 tilcenterfor egenskaben.
index.html
index.css
Hvad du har bygget
Du har stylet websider ved hjælp af CSS og tilføjet farver, afstand, layout og visuelle komponenter.
Hvad der mangler
Dine sider ser gode ud, men de er stadig statiske. Brugere kan ikke interagere med dem.
Hvad er det næste
For at tilføje funktionalitet og interaktivitet skal du bruge JavaScript. Næste skridt er at arbejde med JavaScript og gøre dine sider dynamiske.
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 1. Kapitel 22
Spørg AI
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
Sektion 1. Kapitel 22