Uitdaging: Decoratieve Effecten Implementeren in CSS
Taak
Oefen en verbeter de visuele aantrekkingskracht van de webpagina. De opdracht omvat:
- Voeg een schaduw toe aan het
div-element met de classnaamcard. De opgegeven schaduwwaarden zijnrgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px. - Voeg een achtergrondafbeelding toe aan het
div-element met de classnaamcard. De afbeeldingslink is:https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png. - Centreer de achtergrondafbeelding binnen de kaart.
index.html
index.css
- Gebruik de eigenschap
box-shadowmet de opgegeven waarde om een schaduw aan een element toe te voegen. In dit geval is de waardergba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px. - Voor het instellen van een afbeelding als achtergrond met de eigenschap
background-image, gebruik de syntaxisurl("correct path"). Plaats het pad naar de afbeelding tussen aanhalingstekens binnen de haakjes. In deze opdracht is het juiste pad:url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png"). - Gebruik de eigenschap
background-positionom de positie van de achtergrondafbeelding te bepalen. Stel in dit geval de waarde in opcentervoor deze eigenschap.
index.html
index.css
Opmerking
U heeft de cursus "CSS Fundamentals" voltooid en beheerst de basisprincipes van webopmaak. Verhoog uw ontwerpvaardigheden met "Geavanceerde CSS-technieken", of begin met het coderen van interactiviteit in "Inleiding tot JavaScript". Uw reis als webontwikkelaar gaat verder!
1. Welke eigenschap voegt een schaduw toe rond het vak van een element?
2. Hoe kun je een afbeelding als achtergrond van een element toevoegen?
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
Awesome!
Completion rate improved to 2.56Uitdaging: Decoratieve Effecten Implementeren in CSS
Veeg om het menu te tonen
Taak
Oefen en verbeter de visuele aantrekkingskracht van de webpagina. De opdracht omvat:
- Voeg een schaduw toe aan het
div-element met de classnaamcard. De opgegeven schaduwwaarden zijnrgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px. - Voeg een achtergrondafbeelding toe aan het
div-element met de classnaamcard. De afbeeldingslink is:https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png. - Centreer de achtergrondafbeelding binnen de kaart.
index.html
index.css
- Gebruik de eigenschap
box-shadowmet de opgegeven waarde om een schaduw aan een element toe te voegen. In dit geval is de waardergba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px. - Voor het instellen van een afbeelding als achtergrond met de eigenschap
background-image, gebruik de syntaxisurl("correct path"). Plaats het pad naar de afbeelding tussen aanhalingstekens binnen de haakjes. In deze opdracht is het juiste pad:url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png"). - Gebruik de eigenschap
background-positionom de positie van de achtergrondafbeelding te bepalen. Stel in dit geval de waarde in opcentervoor deze eigenschap.
index.html
index.css
Opmerking
U heeft de cursus "CSS Fundamentals" voltooid en beheerst de basisprincipes van webopmaak. Verhoog uw ontwerpvaardigheden met "Geavanceerde CSS-technieken", of begin met het coderen van interactiviteit in "Inleiding tot JavaScript". Uw reis als webontwikkelaar gaat verder!
1. Welke eigenschap voegt een schaduw toe rond het vak van een element?
2. Hoe kun je een afbeelding als achtergrond van een element toevoegen?
Bedankt voor je feedback!
