Lære Utfordring: Implementere Dekorative Effekter i CSS | Legge til Dekorative Effekter med CSS

Oppgave

Øv på å forbedre det visuelle uttrykket til nettsiden. Oppgaven inkluderer:

Legg til en skygge på div-elementet med klassenavnet card. De spesifiserte skyggeverdi er rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Legg til et bakgrunnsbilde på div-elementet med klassenavnet card. Bildelenken er: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
Sentrer bakgrunnsbildet i kortet.

index.html

index.css

For å legge til en skygge på et element, bruk box-shadow-egenskapen med den angitte verdien. I dette tilfellet er verdien rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
For å sette et bilde som bakgrunn ved å bruke background-image-egenskapen, benytt syntaksen url("correct path"). Inne i parentesene åpnes anførselstegn og stien til bildet spesifiseres. I denne oppgaven er korrekt sti: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
For å bestemme posisjonen til bakgrunnsbildet, bruk background-position-egenskapen. I dette tilfellet settes verdien til center for egenskapen.

index.html

index.css

Merk

Du har fullført kurset "CSS Fundamentals" og behersker nå det grunnleggende innen web-styling. Ta designferdighetene dine til neste nivå med "Advanced CSS Techniques", eller begynn å kode interaktivitet i "Introduction to JavaScript". Din reise som webutvikler fortsetter!

1. Hvilken egenskap legger til skygge rundt en elements boks?

2. Hvordan kan du legge til et bilde som bakgrunn på et element?

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 5. Kapittel 6

Spør AI

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

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

Sveip for å vise menyen

Oppgave

Øv på å forbedre det visuelle uttrykket til nettsiden. Oppgaven inkluderer:

Legg til en skygge på div-elementet med klassenavnet card. De spesifiserte skyggeverdi er rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Legg til et bakgrunnsbilde på div-elementet med klassenavnet card. Bildelenken er: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
Sentrer bakgrunnsbildet i kortet.

index.html

index.css

For å legge til en skygge på et element, bruk box-shadow-egenskapen med den angitte verdien. I dette tilfellet er verdien rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
For å sette et bilde som bakgrunn ved å bruke background-image-egenskapen, benytt syntaksen url("correct path"). Inne i parentesene åpnes anførselstegn og stien til bildet spesifiseres. I denne oppgaven er korrekt sti: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
For å bestemme posisjonen til bakgrunnsbildet, bruk background-position-egenskapen. I dette tilfellet settes verdien til center for egenskapen.

index.html

index.css

Merk

Du har fullført kurset "CSS Fundamentals" og behersker nå det grunnleggende innen web-styling. Ta designferdighetene dine til neste nivå med "Advanced CSS Techniques", eller begynn å kode interaktivitet i "Introduction to JavaScript". Din reise som webutvikler fortsetter!

1. Hvilken egenskap legger til skygge rundt en elements boks?

2. Hvordan kan du legge til et bilde som bakgrunn på et element?

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 5. Kapittel 6