7

Eu gostaria de criar um patter para o meu background de forma a simular a textura de fibra de carbono. Tipo essa imagem, ou algo próximo dela.

inserir a descrição da imagem aqui

O que tenho até o momento é isso... Não precisa ser exatamente igual a imagem, mate tem que parecer que é a textura da fibra de carbono, tem que ter um mínimo de similaridade.

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    background: linear-gradient(rgba(255, 255, 255, 0.25) 0px, transparent 10px);
    background-color: #131313;
    background-size: 20px 20px;
}

2

2 Respostas 2

2

Viva!

Penso que seja isto que está a procurar:

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
background: 
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,
linear-gradient(90deg, #1b1b1b 10px, transparent 10px),
linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424);
background-color: #131313;
background-size: 20px 20px;
}

Pequena explicação para cada linear-gradient

/* Um degradê inclinado de 27 graus, com uma metade inferior esquerda #151515 e uma metade superior direita transparente */ 
linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px,
/* Um degradê inclinado de 207 graus, com uma metade inferior esquerda transparente e uma metade superior direita #151515 */
linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px,
/* Um degradê inclinado de 27 graus, com uma metade inferior esquerda #222 e uma metade superior direita transparente */
linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px,
/* Um degradê inclinado de 207 graus, com uma metade inferior esquerda transparente e uma metade superior direita #222 */
linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px,

Fonte de Informação: https://leaverou.github.io/css3patterns/#

2
  • 2
    Consegue explicar na resposta pelo que cada linear-gradiente é responsável? E por que nessa ordem? E o que é cada uma dessas dimensões que colocou em px? Eu consigo reproduzir esse padrão para "quadrados" maiores?
    – Woss
    Commented 28/02/2019 às 14:47
  • 2
    Bom complexo isso ai, na verdade não entendi nada rss. Se a textura me parece reta, pq os gradientes estão com 207deg ou 90deg ?? Seria legal vc complementar com mais algumas informações para ajudar que quiser adaptar para outros formatos, cores etc.
    – hugocsl
    Commented 28/02/2019 às 14:52
1

Acho que pode ser isso que você quer, nota que todos os gradientes são voltados para 45º... o RGBA está definindo a opacidade para fazer o efeito degradê no mesmo. Você pode checar alguns detalhes a mais de onde eu tirei esta informação

segue o Link

body {
  background-color: rgb(32, 32, 32);
  background-image: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0) 20%, rgba(0,0,0,0) 80%, rgba(0,0,0,1)), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, 8), rgb(32, 32, 32));
  background-size: 100% 100%, 10px 10px, 10px 10px, 10px 5px;
  background-position: 0px 0px, 0px 0px, 5px 5px, 0px 0px;
}
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .