Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Exemplo de código(CSS) está errado! Aula 06 - Atividade 09

No final da aula são apresentados dois exemplos de código, para criar um gradiente no fundo das divisões de "trabalhos" e "blog" da página "index.html".

Fundo da divisão "trabalhos":

.trabalhos {
    background-image: linear-gradient(135deg,
                        transparent,
                        transparent 14px,
                        rgba(0, 0, 0, 0.1) 14px,
                        rgba(0, 0, 0, 0.1) 15px,
                        transparent 15px,
                        transparent);
    background-size: 20px 20px;
    background-attachment: fixed;
}

Esse exemplo esta ok! Ele cria o efeito do fundo "se mexendo com o scrool", e desenha as faixas na diagonal! (fazendo o degrade em várias caixinhas de 20px por 20px repetidas).

Agora vem o exemplo de código da divisão "Blog":

.blog {
    background-image: linear-gradient(45deg,
                        transparent,
                        transparent 14px,
                        rgba(255, 255, 255, 0.1) 14px,
                        rgba(255, 255, 255, 0.1) 15px,
                        transparent 15px,
                        transparent);
    background-size: 20px 20px;
    background-attachment: fixed;
}

Esse código não cria nada, deixa o fundo todo branco! Sendo que no enunciado pedia pra gente fazer as diagonais em direções contrárias! O correto na minha sugestão, seria apenas a mudança de angulo! (135deg do primeiro exemplo, para 45deg no segundo).

Ai inventaram de mudar o valor das cores tambem, e ao meu ver colocaram um código errado! Alterei os valores das cores do segundo exemplo, para ficarem iguais as do primeiro e obtive o efeito desejado e proposto pelo enunciado da atividade.

Por favor, alguém me mostre como esse código pode estar certo. Refiz, copiei, olhei os outros posts aqui do forum, reiniciei meu Brackets, reinicicei navegador, etc etc e nada. Se me mostrarem onde está o erro e eu conseguir reproduzir ele aqui, peço desculpas pelo post. Mas do contrário, esse post alem de dúvida, é uma reclamação. Pois colocar código errado em Aula, mata o fluxo/ritmo de aprendizado. Pois tenho que perder tempo caçando "bugs" no meu código ou no meu ambiente que não existem! Tenho que ficar correndo post por post no forum pra ver se alguém teve a solução disso. É muito chato, na hora de corrigir a atividade que eu fiz, pegar um código duvidoso. Ta ficando difícil de confiar nos exemplos de código das aulas, não é a primeira vez que geram mais dúvidas e perda de tempo, do que facilitam o aprendizado.

Em um dos posts do forum vi alguem dizendo que a diferença é muito sutil, ou a cor é muito sútil, de um exemplo para o outro. Se for pra criar dúvida (e esta criando pois minha dúvida não foi a primeira). Corrijam o exemplo, pra ficar com a mesma cor do primeiro, e não atrapalhar ou perder o tempo de mais gente.

5 respostas

Olá Rodolfo,

Poderia me mandar o link desta lição para eu dar uma olhada?

No canto superior direito de cada lição há uma opção de você sugerir uma alteração/melhoria. Lá você pode fazer as alterações corretas manualmente e após a equipe verificar, se for aceita você é avisado!

Abçs!

solução!

Olá, Rodolfo!

Realizei testes com os códigos fornecidos pelo exercício e por você. Obtive êxito com ambos.

No entanto, há um detalhe na sua pergunta que me chamou a atenção: "[...] deixa o fundo todo branco!". Para que o gradiente da seção blog seja exibido corretamente, é necessário que esta possua uma cor escura definida para a propriedade background-color. Do contrário, por ser uma cor praticamente transparente (0.1 para o canal alfa), é muito difícil visualizá-lo.

Peço, por gentileza, que você verifique no seu código se a seção .blog está com um background-color definido (no código do projeto, a cor é #999).

Veja abaixo os resultados que obtive:

gradiente-com-background-color.png

(Removendo o background-color) gradiente-sem-background-color.png

Hey, Rodolfo! Conseguiu resolver sua questão com o gradiente e dar sequência no curso?

Consegui sim obrigado pessoal e desculpem pelo desabafo rsrsrs

Estava fazendo os testes e obtive o resultado desejado com ambos os códigos. Porém, fiquei curioso com uma alteração que fiz.

No código:

background-image: linear-gradient(to bottom right, 
transparent,
transparent 14px,
rgba(0, 0, 0, 0.1) 14px, 
rgba(0, 0, 0, 0.1) 15px,
transparent 15px,
transparent);
background-size: 20px 20px;
background-attachment: fixed;

eu removi a primeira e última cor transparente. Ficou assim:

background-image: linear-gradient(to bottom right, 
transparent 14px,
rgba(0, 0, 0, 0.1) 14px, 
rgba(0, 0, 0, 0.1) 15px,
transparent 15px);
background-size: 20px 20px;
background-attachment: fixed;

Notei que o resultado é o mesmo. Não alterou nada. Porquê? Ou to ficando cego e não percebi (o que é bem possível).