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, utiliser 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éfinir la position de l’image d’arrière-plan, utiliser la propriété background-position. Dans ce cas, attribuer la valeur center à la 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 développement de vos compétences en design avec « Techniques CSS avancées », ou commencez à coder l’interactivité avec « Introduction à JavaScript ». Votre parcours de développeur web continue !

1. Quelle propriété ajoute une ombre autour du cadre d’un élément ?

2. Comment ajouter une image en tant qu'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 how the box-shadow and background properties work together?

What other properties can I use to further style the card?

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, utiliser 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éfinir la position de l’image d’arrière-plan, utiliser la propriété background-position. Dans ce cas, attribuer la valeur center à la 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 développement de vos compétences en design avec « Techniques CSS avancées », ou commencez à coder l’interactivité avec « Introduction à JavaScript ». Votre parcours de développeur web continue !

1. Quelle propriété ajoute une ombre autour du cadre d’un élément ?

2. Comment ajouter une image en tant qu'arrière-plan d'un élément ?

Tout était clair ?

Merci pour vos commentaires !

Section 5. Chapitre 6