Como fazer isso?

[Carlos Henrique A. 7]

Olá!

Vendo esse site na internet, http://lumihost.com.br/site/, percebi que o fundo é uma imagem normal, porém, eu percebi que existe alguma estilização feita, talvez posso chamar de grid? que fica em cima da imagem. Porque, a imagem por si só ela é normal, agora me parece que existe um grid por cima que talvez foi estilizado por css?

 

Como fazer isso? tentei dar uma olhada no código mas não achei nada.. achei interessante!

[L. Henrique 179]

Carlos,

Achou isso do Marcello Ruopolo né? hahahaha

O grid que você fala são as informações que passam na frente das imagens, correto? Ou do efeito de parecer ter um milhão de micro-quadradinhos pretos? - Creio que é a imagem acima da outra.

Se realmente for isso: Essa layer é na verdade um pseudo-elemento com seu background: url. Veja um exemplo:

.elemento {
   background: url('suaimagem.jpg') no-repeat center center;
   background-size: cover;
}
   .elemento::after {
      background: url('imagemdoponto.jpg') top left;
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
   }

A ideia é que você não precise criar uma imagem gigante com vários pontos. Você só precisa de um ponto com 1 pixel e um espaço de um pixel a direita e abaixo se preferir. O CSS será o responsável por dar repeat nisso até preencher 100vw e 100vh.

 

Se forem os elementos de texto:

Isso é bem simples, na verdade são só elementos do HTML comuns alinhados com o CSS.

Abraços!

[Carlos Henrique A. 7]

Fala henrique, acho que achei dele sim.. Rs

Interessante, eu achei que era algum propriedade de css diferente que eu nao tinha conhecimento... Valeu pela dica!