Solucionado
Não entendi como funciona o código abaixo a respeito de gradientes.
.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);
}
Boa tarde, Márcia! Tudo bem? =)
O linear-gradient recebe ao menos três informações:
A primeira sempre, é o ângulo, ou direção do gradiente, ou seja, se ele vai da direita para esquerda, de cima para baixo, ou numa angulação diferente. Nesse caso, estamos usando 135 graus (135deg).
As segunda e terceira informações correspondem às cores do gradiente.
Para exemplificar, pense no seguinte gradiente:
linear-gradient(135deg, white, black);O que ele vai fazer é criar um gradiente com angulação de 135 graus, começando em branco e terminando no preto, então ele vai ter tons de cinza no meio.
Mas e no caso em que você apresentou? Repare que há mais de uma cor sendo informada:
transparent.transparent 14px.rgba(0, 0, 0, 0.1) 14px.rgba(0, 0, 0, 0.1) 15px.transparent 15px.transparent.Esse gradiente começa em transparente e, depois de 14px começa "outro" transparente. Mais 14px depois é aplicada uma cor preta com opacidade de 10%, repetindo isso depois de 15px. Mais 15px e começa o transparente, indo até o final.
Você pode dar uma olhada no MDN para ver algumas explicações e exemplos de linear-gradient.= )
Conseguiu entender, agora? =)
Espero ter ajudado, mas qualquer dúvida não deixe de postar aqui!
Abraço e bons estudos,
Fábio