Aprenda Desafio: Implementar Efeitos Decorativos em CSS | Adicionando Efeitos Decorativos com 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.css

Para adicionar uma sombra a um elemento, utilizar 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 utilizando a propriedade background-image, empregar a sintaxe url("correct path"). Dentro dos parênteses, abrir aspas e especificar 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, utilizar a propriedade background-position. Neste cenário, definir o valor como center para a propriedade.

index.html

index.css

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 5. Capítulo 6

Pergunte à IA

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

Suggested prompts:

Can you show me the CSS code for the `.card` class?

What other decorative effects can I add to the card?

Can you explain how the `box-shadow` property works?

Deslize para mostrar o menu

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.css

Para adicionar uma sombra a um elemento, utilizar 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 utilizando a propriedade background-image, empregar a sintaxe url("correct path"). Dentro dos parênteses, abrir aspas e especificar 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, utilizar a propriedade background-position. Neste cenário, definir o valor como center para a propriedade.

index.html

index.css

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 5. Capítulo 6