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

Tehtävä

Harjoitellaan ja parannetaan verkkosivun visuaalista ilmettä. Tehtävä sisältää:

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

Varjon lisäämiseksi 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.
Kuvan asettamiseksi taustaksi käytä background-image-ominaisuutta ja url("correct path") -syntaksia. Sulkuihin avataan lainausmerkit ja määritetään 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").
Taustakuvan sijainnin määrittämiseksi käytä background-position-ominaisuutta. Tässä tapauksessa aseta ominaisuuden arvoksi center.

index.html

index.css

Huomio

Olet suorittanut "CSS Fundamentals" -kurssin ja hallitset verkkosivujen tyylittelyn perusteet. Seuraavaksi kehitä suunnittelutaitojasi "Advanced CSS Techniques" -kurssilla tai aloita vuorovaikutteisuuden ohjelmointi "Introduction to JavaScript" -kurssilla. Matkasi web-kehittäjänä jatkuu!

1. Mikä ominaisuus lisää varjon elementin laatikon ympärille?

2. Miten voit lisätä kuvan elementin taustaksi?

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 5. Luku 6

Kysy tekoälyä

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

Awesome!

Completion rate improved to 2.56

Pyyhkäise näyttääksesi valikon

Tehtävä

Harjoitellaan ja parannetaan verkkosivun visuaalista ilmettä. Tehtävä sisältää:

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

Varjon lisäämiseksi 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.
Kuvan asettamiseksi taustaksi käytä background-image-ominaisuutta ja url("correct path") -syntaksia. Sulkuihin avataan lainausmerkit ja määritetään 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").
Taustakuvan sijainnin määrittämiseksi käytä background-position-ominaisuutta. Tässä tapauksessa aseta ominaisuuden arvoksi center.

index.html

index.css

Huomio

Olet suorittanut "CSS Fundamentals" -kurssin ja hallitset verkkosivujen tyylittelyn perusteet. Seuraavaksi kehitä suunnittelutaitojasi "Advanced CSS Techniques" -kurssilla tai aloita vuorovaikutteisuuden ohjelmointi "Introduction to JavaScript" -kurssilla. Matkasi web-kehittäjänä jatkuu!

1. Mikä ominaisuus lisää varjon elementin laatikon ympärille?

2. Miten voit lisätä kuvan elementin taustaksi?

Oliko kaikki selvää?

Kiitos palautteestasi!

Osio 5. Luku 6