Contenido del Curso
CSS Fundamentals
CSS Fundamentals
Challenge: Decorative Effects
Task
Let's practice and enhance the visual appeal of the webpage. The task includes:
- Add a shadow to the
div
element with the class namecard
. The specified shadow values arergba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px
. - Add a background image to the
div
element with the class namecard
. The image link is provided:https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png
. - Center the background image within the card.
index
index
index
- To add a shadow to an element, utilize the
box-shadow
property with the specified value. In this case, the value isrgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px
. - For setting an image as a background using the
background-image
property, employ theurl("correct path")
syntax. Inside the brackets, open quotes and specify the path to the image. In this task, the correct path is provided:url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png")
. - To determine the position of the background image, use the
background-position
property. In this scenario, set the value tocenter
for the property.
index
index
index
¿Todo estuvo claro?
¡Gracias por tus comentarios!
Sección 5. Capítulo 6