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

Uppgift

Öva på att förbättra webbplatsens visuella utseende. Uppgiften omfattar:

Lägg till en skugga på div-elementet med klassen 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 klassen 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 center för egenskapen.

index.html

index.css

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:

Can you show me the CSS code for the `.card` class?

What other decorative effects can I add to the card?

Can you explain how the `box-shadow` property works?

Svep för att visa menyn

Öva på att förbättra webbplatsens visuella utseende. Uppgiften omfattar:

Lägg till en skugga på div-elementet med klassen 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 klassen 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 center för egenskapen.

index.html

index.css

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 5. Kapitel 6