Solucionado
Fiquei com uma dúvida sobre a sintaxe do gradiente.
background-image: linear-gradient(135deg,transparent,transparent 14px,rgba(0,0,0,.1)14px, rgba(0,0,0,.1)15px, transparent 15px, transparent);Pq eu tenho que repetir o transparent diversas vezes? E esse 135 deg, qual função dele?
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:
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.