Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Qual é a diferença entre esses códigos

Olá, gostaria de saber qual é a diferença entre o código proposto como resposta do exercício e o código mais abaixo, já que, aparentemente o resultado visual é o mesmo:

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);              
    background-size: 20px 20px;
    background-attachment: fixed;

E esse código:

background: linear-gradient(135deg,
                transparent 14px,
                rgba(0, 0, 0, 0.1) 14px,
                transparent 15px);
background-size: 20px 20px;
background-attachment: fixed;
4 respostas
solução!

A diferença basicamente é como está sendo chamada a propriedade linear-gradient, uma que é como background-image (não necessário visto que você não informou nenhuma url pra alguma imagem) e a outra no background.

A sintaxe da propriedade linear-gradient é a seguinte:

background: linear-gradient(direction, color-stop1, color-stop2, ...);

Logo a diferença na chamada das duas mencionadas está diferente, em uma tem mais transparência adicionada no gradiente (primeiro css) e na outra podemos ver linhas mais sólidas (segundo css).

Como não sou especialista no assunto, vou deixar aqui um link que explica muita coisa sobre o linear-gradient:

http://tableless.com.br/como-usar-gradient-no-css-de-forma-consciente/

Guilherme, conseguiu tirar suas dúvidas?

Entendi. Valeu pessoal!