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 hjelp av background-image-egenskapen, bruk 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 plasseringen av bakgrunnsbildet, bruk background-position-egenskapen. I dette tilfellet settes verdien til center for egenskapen.

index.html

index.css

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:

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?

Sveip for å vise menyen

Ø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 hjelp av background-image-egenskapen, bruk 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 plasseringen av bakgrunnsbildet, bruk background-position-egenskapen. I dette tilfellet settes verdien til center for egenskapen.

index.html

index.css

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 5. Kapittel 6