Haaste: Luo Moderni Korttikomponentti
Pyyhkäise näyttääksesi valikon
Harjoitellaan ja parannetaan verkkosivun visuaalista ilmettä. Tehtävänä on:
- Lisää varjo
div-elementtiin, jonka luokan nimi oncard. Määritetyt 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 oncard. 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 onrgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px. - Kun asetat kuvan taustaksi
background-image-ominaisuudella, käytä syntaksiaurl("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"). - Taustakuvan sijainnin määrittämiseen käytä
background-position-ominaisuutta. Tässä tapauksessa aseta arvoksicenter.
index.html
index.css
Mitä olet rakentanut
Olet muotoillut verkkosivuja CSS:llä lisäämällä värejä, välistyksiä, asettelua ja visuaalisia komponentteja.
Mitä puuttuu
Sivusi näyttävät hyviltä, mutta ne ovat edelleen staattisia. Käyttäjät eivät voi olla vuorovaikutuksessa niiden kanssa.
Mitä seuraavaksi
Lisätäksesi toiminnallisuutta ja vuorovaikutteisuutta tarvitset JavaScriptiä. Seuraavaksi alat työskennellä JavaScriptin parissa ja teet sivuistasi dynaamisia.
1. Mikä ominaisuus lisää varjon elementin laatikon ympärille?
2. Miten voit lisätä kuvan elementin taustaksi?
Oliko kaikki selvää?
Kiitos palautteestasi!
Osio 1. Luku 22
Kysy tekoälyä
Kysy tekoälyä
Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme
Osio 1. Luku 22