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. - Gebruik voor het instellen van een afbeelding als achtergrond de eigenschap
background-imagemet 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
1. Welke eigenschap voegt een schaduw toe rond de box van een element?
2. Hoe kun je een afbeelding als achtergrond van een element toevoegen?
Was alles duidelijk?
Bedankt voor je feedback!
Sectie 5. Hoofdstuk 6
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
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?
Geweldig!
Completion tarief verbeterd naar 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. - Gebruik voor het instellen van een afbeelding als achtergrond de eigenschap
background-imagemet 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
1. Welke eigenschap voegt een schaduw toe rond de box van een element?
2. Hoe kun je een afbeelding als achtergrond van een element toevoegen?
Was alles duidelijk?
Bedankt voor je feedback!
Sectie 5. Hoofdstuk 6
