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

Tâche

Mettre en pratique et améliorer l’attrait visuel de la page web. La tâche comprend :

Ajouter une ombre à l’élément div avec le nom de 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 de fond à l’élément div avec le nom de 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 de fond à 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 fond à l’aide de la propriété background-image, employer la syntaxe url("correct path"). À l’intérieur des parenthèses, ouvrir les guillemets et spécifier 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 de fond, utiliser la propriété background-position. Dans ce cas, définir la valeur sur center pour la propriété.

index.html

index.css

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:

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?

Glissez pour afficher le menu

Mettre en pratique et améliorer l’attrait visuel de la page web. La tâche comprend :

Ajouter une ombre à l’élément div avec le nom de 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 de fond à l’élément div avec le nom de 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 de fond à 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 fond à l’aide de la propriété background-image, employer la syntaxe url("correct path"). À l’intérieur des parenthèses, ouvrir les guillemets et spécifier 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 de fond, utiliser la propriété background-position. Dans ce cas, définir la valeur sur center pour la propriété.

index.html

index.css

Tout était clair ?

Merci pour vos commentaires !

Section 5. Chapitre 6