Desafio: 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 classecard
. Os valores especificados para a sombra sãorgba(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 classecard
. 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, 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 sintaxeurl("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 comocenter
para a propriedade.
index.html
index.css
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?
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Awesome!
Completion rate improved to 2.56
Desafio: 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 classecard
. Os valores especificados para a sombra sãorgba(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 classecard
. 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, 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 sintaxeurl("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 comocenter
para a propriedade.
index.html
index.css
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?
Obrigado pelo seu feedback!