Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

a variável --azul-degrade, nem o linear gradiente funcionam

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Criando Header, Flexbox e @import e atividade Banner

por Pedro Ernesto Silva da Cunha
| 162.6k xp | 182 posts
.banner{
    background-color: black;
}

 <section class="banner">
        <h2 class="banner__titulo">Já sabe por onde começar?</h2>
        <p class="banner__texto">Encontre em nossa estante o que precisa para seu desenvolvimento!</p>
        <input type="search" class="banner__pesquisa" placeholder="Qual será sua próxima leitura?">
    </section>

Estes são os códigos, qualquer outro valor para o background-color funciona, menos --azul-degrade, nem o linear gradiente. Já tentei criar a variável de novo no arquivo banner.css, mas não resolveu.

3 respostas
por Pedro Ernesto Silva da Cunha
| 162.6k xp | 182 posts

Entendi o erro, mas fiquei ainda mais confuso. Ela usou background, e não background-color. Qual o motivo de usar um e não o outro.

solução!
por Sarah Ocy Sousa Medeiros
| 1837.4k xp | 3782 posts
Alura Scuba Team Monitora de Fórum Ops

Oi, Pedro! Tudo bem?

Usamos a propriedade background para um contexto mais amplo do que background-color , sendo background uma propriedade coringa que permite definir várias características do plano de fundo, como cor, imagem, repetição, posição, tamanho, entre outras, em uma única linha de código.

Enquanto isso, a propriedade background-color apenas é usada para definir a cor de fundo de um elemento HTML, não aceitando diretamente valores de gradiente ou outros valores dinâmicos, como imagens, já que é projetada especificamente para definir cores sólidas como plano de fundo.

Espero ter ajudado na compreensão do problema. Caso tenha ficado alguma dúvida, sinta-se à vontade em comunicar, estou à disposição!

Um forte abraço e bons estudos!

Caso este post tenha te ajudado, por favor, marcar como solucionado ✓
por Mariana Vieira
| 28.5k xp | 3 posts

Tente usar isso, no local de background-color: black;, no caso tu só substitui o que tá dentro de var pela variável que tu colocou o teu azul degradê.

   background-image: repeating-linear-gradient(var(--blue));