Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Lære Utfordring: Implementere dekorative effekter i CSS | Legge til Dekorative Effekter med CSS
CSS-Grunnleggende

bookUtfordring: Implementere dekorative effekter i 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.html

index.css

index.css

copy
  • 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.html

index.css

index.css

copy

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

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

question mark

Hvilken egenskap legger til skygge rundt en elements boks?

Select the correct answer

question mark

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

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 5. Kapittel 6

Spør AI

expand

Spør AI

ChatGPT

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

bookUtfordring: Implementere dekorative effekter i CSS

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.html

index.css

index.css

copy
  • 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.html

index.css

index.css

copy

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

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

question mark

Hvilken egenskap legger til skygge rundt en elements boks?

Select the correct answer

question mark

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

Select the correct answer

Alt var klart?

Hvordan kan vi forbedre det?

Takk for tilbakemeldingene dine!

Seksjon 5. Kapittel 6
some-alt