footer ficou uma caixa com uma elipse. | HTML5 e CSS3 II: Turbinando as suas páginas

Solucionado (ver solução)

Solucionado
(ver solução)

2
respostas

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Gradientes e atividade Gradiente no footer

por eduardo rezende cruz

| 109.8k xp | 45 posts

Suporte atendimento 1

Estou quebrando a cabeça nesta parte e não consigo encontrar onde estou errando.

postei o arquivo completo no jsbin

https://jsbin.com/xozuyifamu/edit?html,css,output

abaixo segue só a parte do css do footer.

background-image: radial-gradient(ellipse at bottom left,rgba(60, 29, 61, 0.8)70%, black 25%);

background-image: radial-gradient(ellipse at bottom left,rgba(60, 29, 61, 0.8)70%, black 25%);

    background-repeat: no-repeat;
    color: #F2FFFC;
    padding: 10px;
    clear: both;
    position: fixed;
    bottom: 0;
    left: 0;
    box-sizing: border-box;

2 respostas

por Luiz Fernando Maehana

| 608.9k xp | 403 posts

Desenvolvedor Front-end

19/03/2018

Fala Eduardo...

Pelo que vi nos arquivos da aula o CSS ficou assim:


    background-repeat: no-repeat;
    background-image: radial-gradient(ellipse at left bottom,
        rgba(60, 29, 61, 0.8),
        rgba(60, 29, 61, 0.8) 65%,
        black 65%,
        black 70%,
        transparent 70%);
    background-size: 25% 100%;

Abraços!

solução!

por Wanderson Macêdo

| 3960.2k xp | 8086 posts

Instrutor Desenvolvedor

21/03/2018

Oi Eduardo, tudo bem? Acontece que a parte preta deveria ficar transparente, entende? Se você trocar o black no final do gradient por transparent, você vai ter o resultado esperado.

background-image: radial-gradient(ellipse at bottom left,rgba(60, 29, 61, 0.8)70%, transparent 25%);

Assim a parte dos 25% não será preenchida com cor alguma e veremos apenas o elipse. Entende?

Desculpa a demora a responder.