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

Meu gradiente não está funcionando

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

por Paulo Santos
| 45.2k xp | 15 posts

Eu segui toda a explicação e fiz toda a codificação pedido pelo exercício, mas o efeito gradiente não está aparecendo. Não sei qual é o motivo. Alguém pode me ajudar para eu identificar o problema. Segue o meu código.

---- index.html 
<section class="secao-inicio trabalhos">
            <h2 class="trabalhos">Trabalhos</h2>
            <ul>
                <li><img src="imagens/bmw.png" alt="Site da BMW"></li>
                <li><img src="imagens/ibm.png" alt="Site da IBM"></li>
                <li><img src="imagens/uol.png" alt="Site da UOL"></li>
            </ul>
            <a class="botao-index" href="portfolio.html">Veja mais</a>
        </section>

------ index.css
.trabalhos {
    background-color: #3C1D3D;
    border-top: .5em solid #000;
    border-bottom: .5empx solid #000;
    background-image: linear-gradient(135deg, transparent, transparent 14px, rgba(0, 0, 0, .1) 14px, rgba(0, 0, 0, .1) 15px, transparente 15px, transparent);
    background-size: 20px 20px;
    background-attachment: fixed;
}
3 respostas
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Paulo, tudo bem?

Você poderia tirar a classe trabalhos do h2 . Deixando ela assim:

<h2>Trabalhos</h2>

Testa e me fala se deu certo. Mas caso queira que verique com mais precisão, posta teu código no GitHub.

Aguardo :}

solução!
por Paulo Santos
| 45.2k xp | 15 posts
Eu já tirei a classe trabalhos.
<h2>Trabalhos</h2>
Eu já descobri onde estava os erros, quando com o botão direito pedi para inspecionar os elementos, estavam com o triângulo em amarelo, quando eu posicionava neles, dava  a mensagem: "Invalid Property Value". Os

insira seu código aqui

comandos abaixo estavam errados. Agora está fazendo o Gradiente perfeitamente. Obrigado pela ajuda. 

1.  Estava errado: 
      border-bottom: .5empx solid #000; 
      O Correto é: border-bottom: .5em solid #000;

2.  No Penúltimo escrevi errado: transparente e o correto é transparent.

background-image: linear-gradient(135deg, 
                                            transparent, 
                                            transparent 14px, 
                                            rgba(0, 0, 0, .1) 14px, 
                                            rgba(0, 0, 0, .1) 15px, 
                                               transparente 15px,      
                                                                               transparent);
por Laís Cavalcanti
| 2577.8k xp | 4815 posts
Instrutor

Oi, Paulo, que bom que deu tudo certo!

Bons estudos!