Oppiskele Haaste: Koristeellisten Tehosteiden Toteuttaminen CSS:llä | Koristeellisten Tehosteiden Lisääminen CSS:llä

Tehtävä

Harjoitellaan ja parannetaan verkkosivun visuaalista ilmettä. Tehtävään kuuluu:

Lisää varjo div-elementtiin, jonka luokan nimi on card. Määritellyt varjoarvot ovat rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Lisää taustakuva div-elementtiin, jonka luokan nimi on card. Kuvan linkki on annettu: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
Keskitä taustakuva kortin sisällä.

index.html

index.css

Lisääksesi varjon elementtiin, käytä box-shadow-ominaisuutta määritetyllä arvolla. Tässä tapauksessa arvo on rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Kun asetat kuvan taustaksi käyttämällä background-image-ominaisuutta, käytä syntaksia url("correct path"). Sulkujen sisällä avaa lainausmerkit ja määritä kuvan polku. Tässä tehtävässä oikea polku on annettu: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
Määrittääksesi taustakuvan sijainnin, käytä background-position-ominaisuutta. Tässä tapauksessa aseta arvoksi center tälle ominaisuudelle.

index.html

index.css

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 5. Luku 6

Kysy tekoälyä

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

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?

Pyyhkäise näyttääksesi valikon

Harjoitellaan ja parannetaan verkkosivun visuaalista ilmettä. Tehtävään kuuluu:

Lisää varjo div-elementtiin, jonka luokan nimi on card. Määritellyt varjoarvot ovat rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Lisää taustakuva div-elementtiin, jonka luokan nimi on card. Kuvan linkki on annettu: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
Keskitä taustakuva kortin sisällä.

index.html

index.css

Lisääksesi varjon elementtiin, käytä box-shadow-ominaisuutta määritetyllä arvolla. Tässä tapauksessa arvo on rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Kun asetat kuvan taustaksi käyttämällä background-image-ominaisuutta, käytä syntaksia url("correct path"). Sulkujen sisällä avaa lainausmerkit ja määritä kuvan polku. Tässä tehtävässä oikea polku on annettu: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
Määrittääksesi taustakuvan sijainnin, käytä background-position-ominaisuutta. Tässä tapauksessa aseta arvoksi center tälle ominaisuudelle.

index.html

index.css

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 5. Luku 6