Desafío: Implementar Efectos Decorativos en CSS
Tarea
Practique y mejore el atractivo visual de la página web. La tarea incluye:
- Añadir una sombra al elemento
divcon el nombre de clasecard. Los valores de sombra especificados sonrgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px. - Añadir una imagen de fondo al elemento
divcon el nombre de clasecard. El enlace de la imagen se proporciona:https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png. - Centrar la imagen de fondo dentro de la tarjeta.
index.html
index.css
- Para añadir una sombra a un elemento, utilice la propiedad
box-shadowcon el valor especificado. En este caso, el valor esrgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px. - Para establecer una imagen como fondo usando la propiedad
background-image, emplee la sintaxisurl("correct path"). Dentro de los paréntesis, abra comillas y especifique la ruta de la imagen. En esta tarea, la ruta correcta es:url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png"). - Para determinar la posición de la imagen de fondo, utilice la propiedad
background-position. En este caso, establezca el valorcenterpara la propiedad.
index.html
index.css
Nota
Has completado el curso de "Fundamentos de CSS" y dominado los conceptos básicos del estilo web. Ahora, eleva tus habilidades de diseño con "Técnicas Avanzadas de CSS", o comienza a programar interactividad en "Introducción a JavaScript". ¡Tu camino como desarrollador web continúa!
1. ¿Qué propiedad añade sombra alrededor del cuadro de un elemento?
2. ¿Cómo se puede agregar una imagen como fondo de un elemento?
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
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.56Desafío: Implementar Efectos Decorativos en CSS
Desliza para mostrar el menú
Tarea
Practique y mejore el atractivo visual de la página web. La tarea incluye:
- Añadir una sombra al elemento
divcon el nombre de clasecard. Los valores de sombra especificados sonrgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px. - Añadir una imagen de fondo al elemento
divcon el nombre de clasecard. El enlace de la imagen se proporciona:https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png. - Centrar la imagen de fondo dentro de la tarjeta.
index.html
index.css
- Para añadir una sombra a un elemento, utilice la propiedad
box-shadowcon el valor especificado. En este caso, el valor esrgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px. - Para establecer una imagen como fondo usando la propiedad
background-image, emplee la sintaxisurl("correct path"). Dentro de los paréntesis, abra comillas y especifique la ruta de la imagen. En esta tarea, la ruta correcta es:url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png"). - Para determinar la posición de la imagen de fondo, utilice la propiedad
background-position. En este caso, establezca el valorcenterpara la propiedad.
index.html
index.css
Nota
Has completado el curso de "Fundamentos de CSS" y dominado los conceptos básicos del estilo web. Ahora, eleva tus habilidades de diseño con "Técnicas Avanzadas de CSS", o comienza a programar interactividad en "Introducción a JavaScript". ¡Tu camino como desarrollador web continúa!
1. ¿Qué propiedad añade sombra alrededor del cuadro de un elemento?
2. ¿Cómo se puede agregar una imagen como fondo de un elemento?
¡Gracias por tus comentarios!
