Lära Utmaning: Implementera dekorativa effekter i CSS | Lägga till Dekorativa Effekter med CSS

Uppgift

Öva och förbättra webbplatsens visuella utseende. Uppgiften omfattar:

Lägg till en skugga på div-elementet med klassnamnet card. De angivna skuggvärdena är rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Lägg till en bakgrundsbild på div-elementet med klassnamnet card. Bildlänken är: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
Centrera bakgrundsbilden i kortet.

index.html

index.css

För att lägga till en skugga på ett element, använd egenskapen box-shadow med det angivna värdet. I detta fall är värdet rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
För att ange en bild som bakgrund med egenskapen background-image, använd syntaxen url("correct path"). Inom parenteserna, öppna citattecken och ange sökvägen till bilden. I denna uppgift är den korrekta sökvägen: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
För att bestämma bakgrundsbildens position, använd egenskapen background-position. I detta fall, ange värdet till center för egenskapen.

index.html

index.css

Obs

Du har slutfört kursen "CSS Fundamentals" och behärskar grunderna i webbdesign. Höj nu dina designkunskaper med "Advanced CSS Techniques", eller börja koda interaktivitet i "Introduction to JavaScript". Din resa som webbutvecklare fortsätter!

1. Vilken egenskap lägger till skugga runt en elements box?

2. Hur kan du lägga till en bild som bakgrund på ett element?

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 5. Kapitel 6

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Suggested prompts:

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

Can you explain how the box-shadow and background properties work together?

What other properties can I use to further style the card?

Awesome!

Completion rate improved to 2.56

Svep för att visa menyn

Uppgift

Öva och förbättra webbplatsens visuella utseende. Uppgiften omfattar:

Lägg till en skugga på div-elementet med klassnamnet card. De angivna skuggvärdena är rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Lägg till en bakgrundsbild på div-elementet med klassnamnet card. Bildlänken är: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
Centrera bakgrundsbilden i kortet.

index.html

index.css

För att lägga till en skugga på ett element, använd egenskapen box-shadow med det angivna värdet. I detta fall är värdet rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
För att ange en bild som bakgrund med egenskapen background-image, använd syntaxen url("correct path"). Inom parenteserna, öppna citattecken och ange sökvägen till bilden. I denna uppgift är den korrekta sökvägen: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
För att bestämma bakgrundsbildens position, använd egenskapen background-position. I detta fall, ange värdet till center för egenskapen.

index.html

index.css

Obs

Du har slutfört kursen "CSS Fundamentals" och behärskar grunderna i webbdesign. Höj nu dina designkunskaper med "Advanced CSS Techniques", eller börja koda interaktivitet i "Introduction to JavaScript". Din resa som webbutvecklare fortsätter!

1. Vilken egenskap lägger till skugga runt en elements box?

2. Hur kan du lägga till en bild som bakgrund på ett element?

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 5. Kapitel 6