duvida no linear gradient.

Fala Eduardo,

Tranquilo?

Então, precisamos entender o que a propriedade linear-gradient recebe como parâmetro:

linear-gradient(direction, color-stop1, color-stop2, ...)

Ou seja, o primeiro parâmetro é a direção do gradiente, neste caso 135deg, deg são graus, ou seja, seu gradiente ficará em uma direção de 135º.

Os outros parâmetros, e por causa do ... informa que são quantos a gente quiser, definem as cores finais do gradiente, neste caso:

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

Ou seja, ela começa sendo transparente, daí ela tem mais 14px sendo transparente, dai ela vai de transparente para rgba(0,0,0,.1) em 14 px, e assim por diante...

Confesso que haveria outras formas de termos um gradiente semelhante com menos parâmetros, mas foi a escolha do professor fazer desta forma.

Fonte: CSS Gradients W3Schools

Espero ter ajudado!

Abraços!

Vlw Luiz, entendi como funciona a propriedade.

Só por curiosidade, pode mostrar como ficaria esse efeito da forma mais simples como comentou?

E ae Eduardo, existe uma forma muito mais simples de se fazer as linhas.

Você pode utilizar valores relativos para encurtar a quantidade de código e ficar mais fácil de entender, exemplo:

background-image: linear-gradient(135deg, transparent 47%, rgba(0, 0, 0, 0.2), transparent 53%);

No exemplo acima o gradiente começa transparente até chegar a 47% da tamanho do background (transparent 47%) depois ele fica preto (rgba(0, 0, 0, 0.2)) e por último ele volta a ficar transparente a partir de 53% até fechar os 100%.

Se você reparar, a linha terá 6% de largura (53% - 47%), relativa ao tamanho do background-image que você definir.