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

Linear-gradient

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

por Nicolas Barcellos
| 71.9k xp | 14 posts
    background-color: #3C1D3D;
    border-top: .5em solid #000;
    border-bottom: .5em solid #000;
    background-image: linear-gradient(135deg, transparent, transparent 14px, 
    rgba(0,0,0,.1) 14px, rgba(0,0,0,.1) 15px, transparent 15px, transparent);
    background-size: 20px 20px;
    background-attachment: fixed;

Não entendi a lógica desse linear-gradient , alguém ajuda?

2 respostas
solução!
por ricardoaugusto21k
| 284.5k xp | 226 posts

A inclinação dele é definida em graus ou direção (left, right, up, down)

135deg

Os vários transparent a seguir dizem que o gradiente será transparente.

Em seguida você tem uma linha preta com 10% de alpha e 1px de largura definida por:

rgba(0,0,0,.1) 14px, rgba(0,0,0,.1) 15px

Note a diferença entre 14 e 15. Se quiser deixar mais grossa aumente o 15.

Em seguida o gradiente volta pra transparent.

Parece que estão desenhando um canto diagonal superior esquerdo (ou inferior direito) de um div.

Faça experimentos aqui: https://www.w3schools.com/css/tryit.asp?filename=trycss3_gradient-linear

por ricardoaugusto21k
| 284.5k xp | 226 posts

Minha resposta te ajudou? Dá um retorno ou marca como solução? Obrigado!