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

Divergência entre Exercício e Prática do linear-gradient

Referente ao curso HTML5 e CSS3 II: Turbinando as suas páginas, no capítulo Gradientes e atividade As propriedades background-*

por Matheus Gomes
| 97.4k xp | 50 posts
Estudante de Gestão de TI

Olá.

Fiz a prática do exercício e notei uma significativa diferença entre a imagem exibida no enunciado e a imagem que obtive como resultado, levando em conta que utilizei basicamente o mesmo código.

Meu código:

min-height: 100%;
background-color: black;
background-image: linear-gradient(to bottom, black, #C00, black);
background-repeat: no-repeat;
background-size: 80% 5px;
background-position: 50% 50%;

Minha Imagem: https://drive.google.com/open?id=0B6nSv0JDMQPQZHdIMXMzT3FRNlk

Imagem do enunciado: https://drive.google.com/open?id=0B6nSv0JDMQPQeFVsWGpXQmx3Ylk

3 respostas
solução!
por Wagner Anghinoni Nardin
| 95.1k xp | 30 posts
Administrador

Vamo lá seu Matheus.

Entendi o seu CSS, e vejo um probleminha, olha só:

Você especificou o linear-gradient como ( to bottom ), neste caso, o gradiente vai começar do topo da página e vai até o final, ou seja as diferentes cores que você veria no gradiente vão trocando em linhas horizontais. E naquela linha de 5px que criamos podemos ver apenas uma cor, ja que ela também esta na horizontal.

A solução é você trocar o linear-gradient para ( to right ), onde o gradiente vai começar da esquerda para a direita, gerando a troca de cores em linhas verticais. E ficará bem visível.

Não sei se você colocou também uma medida para o width como 100%, e um position como absolute. Eles podem ajudar a formar a imagem.

por Dayane Soares da Silva
| 170.3k xp | 18 posts

Olá Wagner,

Obtive o mesmo resultado que o Matheus com o mesmo código que ele. Acrescentei o que você recomendou mas a tela fica toda black.

Não entendi porque não chegamos no resultado do exercício conforme mostrado. Por favor nos ajude! Valeu.

por Dayane Soares da Silva
| 170.3k xp | 18 posts

Prezados,

Tentei novamente o mesmo código e agora funcionou.

Obrigada