Aprende Desafío: Implementar Efectos Decorativos en CSS | Agregar Efectos Decorativos con CSS

Tarea

Practique y mejore el atractivo visual de la página web. La tarea incluye:

Añadir una sombra al elemento div con el nombre de clase card. Los valores de sombra especificados son rgba(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 div con el nombre de clase card. 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-shadow con el valor especificado. En este caso, el valor es rgba(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 sintaxis url("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 valor center para 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?

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 5. Capítulo 6

Pregunte a AI

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Awesome!

Completion rate improved to 2.56

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 div con el nombre de clase card. Los valores de sombra especificados son rgba(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 div con el nombre de clase card. 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-shadow con el valor especificado. En este caso, el valor es rgba(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 sintaxis url("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 valor center para 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?

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 5. Capítulo 6