Boa noite!
Gostaria de saber como chegaram nesse valor do "background-size" pra ficar as linhas todas certinhas. Seria puramente por tentativa e erro?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Boa noite!
Gostaria de saber como chegaram nesse valor do "background-size" pra ficar as linhas todas certinhas. Seria puramente por tentativa e erro?
Alguém? :(
Oi André, desculpa, mas poderia ser mais claro com sua pergunta?
Olá André,
Esse valor na verdade é uma sacada a primeira vista um pouco complexa, mas uma vez que você entende é bem interessante.
A idéia aí é fazer um background que seja uma linha exata com curvatura de 45º, e que repetí-lo na tela crie esse feito de listrado.
Para isso, é feito uma linha de gradiente de 28px (14px + 14px) visto aqui:
linear-gradient(45deg, transparent, transparent 14px, rgba(255,255,255,.1) 14px, rgba(255,255,255,.1) 15px, transparent 15px, transparent)Depois disso, deixamos o css repetir esse gradiente por toda a tela (é só não setar a propriedade background-repeat). A sacada, é que para essa linha diagonal de 28px caber no espaço do background, precisamos calcular exatamente o background-size.
Um dos jeitos mais simples de calcular isso por exemplo, é o teorema de pitágoras (para futuras referências: https://pt.wikipedia.org/wiki/Teorema_de_Pit%C3%A1goras ) onde no nosso caso, a linha diagonal tem tamanho 28, então podemos calcular usando o teorema:
28ˆ2 = bˆ2 + cˆ2Porém, no nosso caso, nosso background é um quadrado, logo b e c tem o mesmo tamanho. Se você resolver a equação
28ˆ2 = 2*bˆ2vai chegar em algo próxima a 20. daí o valor.
Se você quiser experimentar se realmente entendeu, experimenta mudar o valor do gradiente pra algo menor, por exemplo 15, e recalcular o tamanho necessário pra dar o efeito de listrado novamente.
Espero ter ajudado, depois me diz se você conseguiu.
^^
Esclarecido, Fernando!
Muito obrigado!
calculando no excel, usem essa formula e arredondem sempre o resultado para cima.
=(RAIZ(((A1*2)^2)*2))/2
Eu ainda vou pelo olhômetro, pra ver que esta em 45 graus. Vocês fizeram formula em excel e no outro post ali usaram teorema de pitagoras, parabéns pela complicação kkkk!