Apprendre Défi : Mise en œuvre d'effets décoratifs en CSS

Tâche

Exercice de mise en pratique pour améliorer l’aspect visuel de la page web. La tâche comprend :

Ajouter une ombre au composant div ayant la classe card. Les valeurs d’ombre spécifiées sont rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Ajouter une image d’arrière-plan au composant div ayant la classe card. Le lien de l’image est fourni : https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
Centrer l’image d’arrière-plan à l’intérieur de la carte.

index.html

index.css

Pour ajouter une ombre à un élément, utiliser la propriété box-shadow avec la valeur spécifiée. Dans ce cas, la valeur est rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Pour définir une image comme arrière-plan à l’aide de la propriété background-image, employer la syntaxe url("correct path"). Entre parenthèses, ouvrir les guillemets et indiquer le chemin de l’image. Dans cette tâche, le chemin correct est fourni : url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
Pour déterminer la position de l’image d’arrière-plan, utiliser la propriété background-position. Dans ce cas, définir la valeur center pour cette propriété.

index.html

index.css

Remarque

Vous avez terminé le cours « Fondamentaux du CSS » et maîtrisé les bases du style web. Poursuivez le perfectionnement de vos compétences en design avec « Techniques CSS avancées », ou commencez à coder l'interactivité avec « Introduction à JavaScript ». La progression en tant que développeur web continue !

1. Quelle propriété ajoute une ombre autour de la boîte d’un élément ?

2. Comment ajouter une image comme arrière-plan d’un élément ?

Tout était clair ?

Merci pour vos commentaires !

Section 5. Chapitre 6

Demandez à l'IA

Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion

Suggested prompts:

How do I write the CSS code to add the shadow and background image to the card?

Can you explain where to place the CSS code for the .card class?

What does the box-shadow property do in this context?

Awesome!

Completion rate improved to 2.56

Glissez pour afficher le menu

Tâche

Exercice de mise en pratique pour améliorer l’aspect visuel de la page web. La tâche comprend :

Ajouter une ombre au composant div ayant la classe card. Les valeurs d’ombre spécifiées sont rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Ajouter une image d’arrière-plan au composant div ayant la classe card. Le lien de l’image est fourni : https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
Centrer l’image d’arrière-plan à l’intérieur de la carte.

index.html

index.css

Pour ajouter une ombre à un élément, utiliser la propriété box-shadow avec la valeur spécifiée. Dans ce cas, la valeur est rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
Pour définir une image comme arrière-plan à l’aide de la propriété background-image, employer la syntaxe url("correct path"). Entre parenthèses, ouvrir les guillemets et indiquer le chemin de l’image. Dans cette tâche, le chemin correct est fourni : url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
Pour déterminer la position de l’image d’arrière-plan, utiliser la propriété background-position. Dans ce cas, définir la valeur center pour cette propriété.

index.html

index.css

Remarque

Vous avez terminé le cours « Fondamentaux du CSS » et maîtrisé les bases du style web. Poursuivez le perfectionnement de vos compétences en design avec « Techniques CSS avancées », ou commencez à coder l'interactivité avec « Introduction à JavaScript ». La progression en tant que développeur web continue !

1. Quelle propriété ajoute une ombre autour de la boîte d’un élément ?

2. Comment ajouter une image comme arrière-plan d’un élément ?

Tout était clair ?

Merci pour vos commentaires !

Section 5. Chapitre 6