Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Desafio: Implementar Efeitos Decorativos em CSS | Adicionando Efeitos Decorativos com CSS
Fundamentos de CSS

bookDesafio: Implementar Efeitos Decorativos em CSS

Tarefa

Prática de aprimoramento visual da página web. A tarefa inclui:

  • Adicionar uma sombra ao elemento div com o nome de classe card. Os valores especificados para a sombra são rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
  • Adicionar uma imagem de fundo ao elemento div com o nome de classe card. O link da imagem é fornecido: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
  • Centralizar a imagem de fundo dentro do card.
index.html

index.html

index.css

index.css

copy
  • Para adicionar uma sombra a um elemento, utilize a propriedade box-shadow com o valor especificado. Neste caso, o valor é rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
  • Para definir uma imagem como fundo usando a propriedade background-image, utilize a sintaxe url("correct path"). Dentro dos parênteses, abra aspas e especifique o caminho da imagem. Nesta tarefa, o caminho correto é fornecido: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
  • Para determinar a posição da imagem de fundo, utilize a propriedade background-position. Neste cenário, defina o valor como center para a propriedade.
index.html

index.html

index.css

index.css

copy

Nota

Você concluiu o curso "Fundamentos de CSS" e dominou os conceitos básicos de estilização web. Agora, eleve suas habilidades de design com "Técnicas Avançadas de CSS", ou comece a programar interatividade em "Introdução ao JavaScript". Sua jornada como desenvolvedor web continua!

1. Qual propriedade adiciona sombra ao redor da caixa de um elemento?

2. Como adicionar uma imagem como plano de fundo de um elemento?

question mark

Qual propriedade adiciona sombra ao redor da caixa de um elemento?

Select the correct answer

question mark

Como adicionar uma imagem como plano de fundo de um elemento?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 5. Capítulo 6

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Awesome!

Completion rate improved to 2.56

bookDesafio: Implementar Efeitos Decorativos em CSS

Deslize para mostrar o menu

Tarefa

Prática de aprimoramento visual da página web. A tarefa inclui:

  • Adicionar uma sombra ao elemento div com o nome de classe card. Os valores especificados para a sombra são rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
  • Adicionar uma imagem de fundo ao elemento div com o nome de classe card. O link da imagem é fornecido: https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png.
  • Centralizar a imagem de fundo dentro do card.
index.html

index.html

index.css

index.css

copy
  • Para adicionar uma sombra a um elemento, utilize a propriedade box-shadow com o valor especificado. Neste caso, o valor é rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px.
  • Para definir uma imagem como fundo usando a propriedade background-image, utilize a sintaxe url("correct path"). Dentro dos parênteses, abra aspas e especifique o caminho da imagem. Nesta tarefa, o caminho correto é fornecido: url("https://codefinity-content-media.s3.eu-west-1.amazonaws.com/code-1/css-fundamentals/decorative-effects/challenge-background.png").
  • Para determinar a posição da imagem de fundo, utilize a propriedade background-position. Neste cenário, defina o valor como center para a propriedade.
index.html

index.html

index.css

index.css

copy

Nota

Você concluiu o curso "Fundamentos de CSS" e dominou os conceitos básicos de estilização web. Agora, eleve suas habilidades de design com "Técnicas Avançadas de CSS", ou comece a programar interatividade em "Introdução ao JavaScript". Sua jornada como desenvolvedor web continua!

1. Qual propriedade adiciona sombra ao redor da caixa de um elemento?

2. Como adicionar uma imagem como plano de fundo de um elemento?

question mark

Qual propriedade adiciona sombra ao redor da caixa de um elemento?

Select the correct answer

question mark

Como adicionar uma imagem como plano de fundo de um elemento?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 5. Capítulo 6
some-alt