Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Aprende Desafío: Implementar Efectos Decorativos en CSS | Agregar Efectos Decorativos con CSS
Fundamentos de CSS

bookDesafío: Implementar Efectos Decorativos en CSS

Tarea

Práctica y mejora del 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 es: 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.html

index.css

index.css

copy
  • Para añadir una sombra a un elemento, utiliza 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, emplea la sintaxis url("correct path"). Dentro de los paréntesis, abre comillas y especifica 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, utiliza la propiedad background-position. En este caso, establece el valor center para la propiedad.
index.html

index.html

index.css

index.css

copy

1. ¿Qué propiedad añade sombra alrededor del cuadro de un elemento?

2. ¿Cómo se puede añadir una imagen como fondo de un elemento?

question mark

¿Qué propiedad añade sombra alrededor del cuadro de un elemento?

Select the correct answer

question mark

¿Cómo se puede añadir una imagen como fondo de un elemento?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 5. Capítulo 6

Pregunte a AI

expand

Pregunte a AI

ChatGPT

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

bookDesafío: Implementar Efectos Decorativos en CSS

Desliza para mostrar el menú

Tarea

Práctica y mejora del 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 es: 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.html

index.css

index.css

copy
  • Para añadir una sombra a un elemento, utiliza 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, emplea la sintaxis url("correct path"). Dentro de los paréntesis, abre comillas y especifica 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, utiliza la propiedad background-position. En este caso, establece el valor center para la propiedad.
index.html

index.html

index.css

index.css

copy

1. ¿Qué propiedad añade sombra alrededor del cuadro de un elemento?

2. ¿Cómo se puede añadir una imagen como fondo de un elemento?

question mark

¿Qué propiedad añade sombra alrededor del cuadro de un elemento?

Select the correct answer

question mark

¿Cómo se puede añadir una imagen como fondo de un elemento?

Select the correct answer

¿Todo estuvo claro?

¿Cómo podemos mejorarlo?

¡Gracias por tus comentarios!

Sección 5. Capítulo 6
some-alt