Css Patterns: Backgrounds feitos com CSS (sem imagem)

Um plano de fundo ou background pode ser definido em css como cores, padrões(patterns) ou imagens para decorar desde a área geral do blog até alguma parte dele que deseja diferenciar, por exemplo, títulos de widgets da sidebar, postagens, menus... E isso é feito usando a propriedade background; basicamente, a gente geralmente usa um código mais ou menos assim: background: #nomedeumacor; ou background: url(linkdeumaimagemdefundo) repeat; ou background: #nomedacor url(linkdeumaimagem) no-repeat top center;... acrescentando estilos de acordo com a forma que você queira que o plano de fundo seja posicionado, repetido e etc. Aqui no blog já postei sobre como usar mais de 1 background no template, blend-mode, entre outras coisas para se fazer com backs em html.

Dando uma olhadela pela web, encontrei que é possível usar padrões feitos com css ao invés de imagens, o que facilita muito porque significa que você não precisará hospedar uma imagem para obter link, mas apenas mudar o código css do pattern para deixá-lo do jeitinho que você quiser! Veja esses abaixo, todos feitos com css:

Viu só? Para usar é muito fácil:

1. Encontre o trecho background:... dentro de uma class de alguma coisa que queira personalizar e substitua pelos códigos do background em css, ou apenas acrescente. Por exemplo, eu vou mudar o plano de fundo geral de um template padrão do Blogger, modelo Simple, que antes estava todo branco, assim:

2. Geralmente, basta procurar por body {, logo no início do template, e você encontrará a parte referente ao background, mas, nesse modelo, essa área fica em .main-outer.

3. Vou acrescentar um background em css; apenas colei um dos códigos que vocês verão a seguir:

E aí aparece o plano de fundo como se fosse uma imagem:

4. Dando uma organizada na área de postagem, fica assim:

Outro exemplo: vamos criar um círculo e preencher com um background em css. Antes de /b:skin ou entre <style> e </style>:

.bolota{

width: 300px;

height: 300px;

border-radius: 100%;

background:radial-gradient(#f9b 2px, transparent 3px),

radial-gradient(#f9b 2px, transparent 3px), #fee;

background-position: 0 0, 20px 20px;

background-size: 40px 40px;

}

E onde quero que o círculo apareça:

Mais um exemplo: folha de caderno com recado do Walt Disney...

<style>

.folha{

width: 500px;

height: 200px

background-color: #fff;

background-image: linear-gradient(90deg, transparent 79px, #fcc 79px, #fcc 81px, transparent 81px),

linear-gradient(#fee .1em, transparent .1em);

background-size: 100% 1.2em;

color: pink;

font-family: Grand hotel, cursive;

font-size: 22px;

padding: 3px 10px;

text-align: center;

}

</style>

<div class='folha'>Se você pode sonhar, pode realizar ;)</div>

Se você pode sonhar, pode realizar ;)

Ok? Então agora sim, os códigos:

1. Bolinha (Polkadot)

background:

radial-gradient(#f9b 2px, transparent 3px),

#fee;

background-position: 0 0, 20px 20px;

background-size: 40px 40px;

2. Folha de caderno

background-color: #fff;

background-image:

linear-gradient(90deg, transparent 79px, #fcc 79px, #fcc 81px, transparent 81px),

linear-gradient(#fee .1em, transparent .1em);

background-size: 100% 1.2em;

3. Gingham

background-image: linear-gradient(90deg, rgba(235, 198, 245, 0.5) 50%, transparent 50%),

linear-gradient(rgba(235, 198, 245, 0.5) 50%, transparent 50%);

background-size:50px 50px;

4. Linha diagonal

background-color: lightblue;

background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);

5. Linha vertical

background-color: pink;

background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%);

background-size: 50px 50px;

6. Linha horizontal

background-color: mistyrose;

background-image: linear-gradient(transparent 50%, rgba(255,255,255,.5) 50%);

background-size: 50px 50px;

7. Borda de ondinha

background: linear-gradient(#8c7676 50%, rgba(205,235,215,0) 0) 0 0,

radial-gradient(circle closest-side, #8c7676 53%, rgba(205,235,215,0) 0) 0 0,

radial-gradient(circle closest-side, #8c7676 50%, rgba(205,235,215,0) 0) 55px 0 #f3eeda;

background-size:110px 200px;

background-repeat:repeat-x;

8. Madras

background-color: hsl(34, 53%, 82%);

background-image: repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,

hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,

hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,

hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,

hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,

hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px

repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,

hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,

hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,

hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,

hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,

hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px

);

9. Xadrez (ou losangos)

background-color: #cfeae3;

background-image: linear-gradient(45deg, aliceblue 25%, transparent 25%, transparent 75%, aliceblue 75%, aliceblue),

linear-gradient(-45deg, aliceblue 25%, transparent 25%, transparent 75%, aliceblue 75%, aliceblue);

background-size:60px 60px;

10. Brilhinho + bolinha

background-color: #faedfb;

background-image: radial-gradient(#faedfb 15%, transparent 0%), radial-gradient(#efd0f1 85%, transparent 0%);

background-size: 100px 100px, 100px 100px;

background-position: 50px -50px, 50px -50px;

11. Com blend-mode 'blendado' :)

background: repeating-linear-gradient(-45deg, transparent, transparent 1em, rgba(127, 215, 245, 0.4) 0, rgba(127, 215, 245, 0.1) 2em, transparent 0, transparent 1em, rgba(127, 215, 245, 0.3) 0, rgba(127, 215, 245, 0.2) 4em, transparent 0, transparent 1em, rgba(192, 235, 250, 0.6) 0, rgba(192, 235, 250, 0.2) 2em), repeating-linear-gradient(45deg, transparent, transparent 1em, rgba(127, 215, 245, 0.4) 0, rgba(127, 215, 245, 0.1) 2em, transparent 0, transparent 1em, rgba(127, 215, 245, 0.3) 0, rgba(127, 215, 245, 0.2) 4em, transparent 0, transparent 1em, rgba(192, 235, 250, 0.4) 0, rgba(192, 235, 250, 0.1) 2em), #FFF;

background-blend-mode: multiply;

12. Listras (parece textura de madeira)

background-image: linear-gradient(to bottom, #c0bfa9 0.4571489685%, #b8b9a9 0.4571489685%, #b8b9a9 0.8883947959%, #c0bfa9 0.8883947959%, #c0bfa9 1.98070584%, #b8b9a9 1.98070584%, #b8b9a9 3.0130672537%, #c0bfa9 3.0130672537%, #c0bfa9 3.0147116294%, #b8b9a9 3.0147116294%, #b8b9a9 4.6701266926%, #c0bfa9 4.6701266926%, #c0bfa9 5.2862152891%, #b8b9a9 5.2862152891%, #b8b9a9 6.5646584192%, #c0bfa9 6.5646584192%, #c0bfa9 7.1270159769%, #b8b9a9 7.1270159769%, #b8b9a9 8.7520322731%, #c0bfa9 8.7520322731%, #c0bfa9 10.4563790872%, #b8b9a9 10.4563790872%, #b8b9a9 12.0167132363%, #c0bfa9 12.0167132363%, #c0bfa9 12.7328890949%, #b8b9a9 12.7328890949%, #b8b9a9 13.6890286982%, #c0bfa9 13.6890286982%, #c0bfa9 14.6565552527%, #b8b9a9 14.6565552527%, #b8b9a9 15.0995905188%, #c0bfa9 15.0995905188%, #c0bfa9 15.2472073952%, #b8b9a9 15.2472073952%, #b8b9a9 15.3900690988%, #c0bfa9 15.3900690988%, #c0bfa9 16.3124734464%, #b8b9a9 16.3124734464%, #b8b9a9 17.354547693%, #c0bfa9 17.354547693%, #c0bfa9 18.3048623185%, #b8b9a9 18.3048623185%, #b8b9a9 20.098474333%, #c0bfa9 20.098474333%, #c0bfa9 21.0486137989%, #b8b9a9 21.0486137989%, #b8b9a9 21.4176388434%, #c0bfa9 21.4176388434%, #c0bfa9 21.5431373903%, #b8b9a9 21.5431373903%, #b8b9a9 23.1714709001%, #c0bfa9 23.1714709001%, #c0bfa9 24.7048821657%, #b8b9a9 24.7048821657%, #b8b9a9 26.3200523937%, #c0bfa9 26.3200523937%, #c0bfa9 26.7846573925%, #b8b9a9 26.7846573925%, #b8b9a9 27.5890885249%, #c0bfa9 27.5890885249%, #c0bfa9 28.2125431169%, #b8b9a9 28.2125431169%, #b8b9a9 29.9973898993%, #c0bfa9 29.9973898993%, #c0bfa9 30.2358472951%, #b8b9a9 30.2358472951%, #b8b9a9 31.5512069664%, #c0bfa9 31.5512069664%, #c0bfa9 32.268265584%, #b8b9a9 32.268265584%, #b8b9a9 34.2297322967%, #c0bfa9 34.2297322967%, #c0bfa9 34.3062564826%, #b8b9a9 34.3062564826%, #b8b9a9 35.5346054428%, #c0bfa9 35.5346054428%, #c0bfa9 37.0439793929%, #b8b9a9 37.0439793929%, #b8b9a9 38.2372717679%, #c0bfa9 38.2372717679%, #c0bfa9 39.1368966117%, #b8b9a9 39.1368966117%, #b8b9a9 39.3907852365%, #c0bfa9 39.3907852365%, #c0bfa9 41.2608822237%, #b8b9a9 41.2608822237%, #b8b9a9 42.4042945394%, #c0bfa9 42.4042945394%, #c0bfa9 43.3649057818%, #b8b9a9 43.3649057818%, #b8b9a9 44.1740805741%, #c0bfa9 44.1740805741%, #c0bfa9 45.0769133316%, #b8b9a9 45.0769133316%, #b8b9a9 46.7413593435%, #c0bfa9 46.7413593435%, #c0bfa9 47.07741085%, #b8b9a9 47.07741085%, #b8b9a9 48.0993455587%, #c0bfa9 48.0993455587%, #c0bfa9 49.0385300321%, #b8b9a9 49.0385300321%, #b8b9a9 49.7378683796%, #c0bfa9 49.7378683796%, #c0bfa9 51.5077170467%, #b8b9a9 51.5077170467%, #b8b9a9 51.7955670194%, #c0bfa9 51.7955670194%, #c0bfa9 52.0756225544%, #b8b9a9 52.0756225544%, #b8b9a9 52.8497568234%, #c0bfa9 52.8497568234%, #c0bfa9 53.7794939436%, #b8b9a9 53.7794939436%, #b8b9a9 55.6833741253%, #c0bfa9 55.6833741253%, #c0bfa9 57.1914449764%, #b8b9a9 57.1914449764%, #b8b9a9 58.2116918023%, #c0bfa9 58.2116918023%, #c0bfa9 58.3865822615%, #b8b9a9 58.3865822615%, #b8b9a9 58.7824796219%, #c0bfa9 58.7824796219%, #c0bfa9 59.5773006849%, #b8b9a9 59.5773006849%, #b8b9a9 59.7427917896%, #c0bfa9 59.7427917896%, #c0bfa9 59.9930681439%, #b8b9a9 59.9930681439%, #b8b9a9 61.0015675204%, #c0bfa9 61.0015675204%, #c0bfa9 62.7129708687%, #b8b9a9 62.7129708687%, #b8b9a9 62.8683212375%, #c0bfa9 62.8683212375%, #c0bfa9 63.5682600909%, #b8b9a9 63.5682600909%, #b8b9a9 64.7677084327%, #c0bfa9 64.7677084327%, #c0bfa9 65.1754197204%, #b8b9a9 65.1754197204%, #b8b9a9 65.5165438371%, #c0bfa9 65.5165438371%, #c0bfa9 66.7723966392%, #b8b9a9 66.7723966392%, #b8b9a9 67.921176348%, #c0bfa9 67.921176348%, #c0bfa9 68.4241100697%, #b8b9a9 68.4241100697%, #b8b9a9 69.201582542%, #c0bfa9 69.201582542%, #c0bfa9 69.5777716302%, #b8b9a9 69.5777716302%, #b8b9a9 70.0825776024%, #c0bfa9 70.0825776024%, #c0bfa9 70.8848909419%, #b8b9a9 70.8848909419%, #b8b9a9 72.4912914846%, #c0bfa9 72.4912914846%, #c0bfa9 74.4164564795%, #b8b9a9 74.4164564795%, #b8b9a9 74.4843981286%, #c0bfa9 74.4843981286%, #c0bfa9 75.1220942301%, #b8b9a9 75.1220942301%, #b8b9a9 75.6066403932%, #c0bfa9 75.6066403932%, #c0bfa9 76.4052848281%, #b8b9a9 76.4052848281%, #b8b9a9 76.5835411271%, #c0bfa9 76.5835411271%, #c0bfa9 78.1367667834%, #b8b9a9 78.1367667834%, #b8b9a9 79.0619697657%, #c0bfa9 79.0619697657%, #c0bfa9 81.0153422158%, #b8b9a9 81.0153422158%, #b8b9a9 82.9300195084%, #c0bfa9 82.9300195084%, #c0bfa9 84.0172694942%, #b8b9a9 84.0172694942%, #b8b9a9 84.690065516%, #c0bfa9 84.690065516%, #c0bfa9 85.0502101454%, #b8b9a9 85.0502101454%, #b8b9a9 85.0533659235%, #c0bfa9 85.0533659235%, #c0bfa9 86.5579798808%, #b8b9a9 86.5579798808%, #b8b9a9 87.9376636384%, #c0bfa9 87.9376636384%, #c0bfa9 89.8989234878%, #b8b9a9 89.8989234878%, #b8b9a9 91.1433640225%, #c0bfa9 91.1433640225%, #c0bfa9 91.5161791994%, #b8b9a9 91.5161791994%, #b8b9a9 91.9020443522%, #c0bfa9 91.9020443522%, #c0bfa9 93.4116925235%, #b8b9a9 93.4116925235%, #b8b9a9 93.8134792077%, #c0bfa9 93.8134792077%, #c0bfa9 94.3501577199%, #b8b9a9 94.3501577199%, #b8b9a9 96.1574403963%, #c0bfa9 96.1574403963%, #c0bfa9 97.9497669857%, #b8b9a9 97.9497669857%, #b8b9a9 99.2101013768%, #c0bfa9 99.2101013768%, #c0bfa9 100.0580909051%, #b8b9a9 100.0580909051%);

Mude os códigos ou nome das cores para os que preferir; alguns valores podem ser mudados para posicionar as formas geométricas (círculos, linhas...) ou aumentar e diminuir os tamanhos.

Créditos:

Esses códigos foram encontrados no Codepen e no Codier de:

Jeremy Misavage, Fabien, Stefan Görsch, Mariiinda e Valentin Dzhankhotov.

ヾ(＾∇＾) ☆

8 Comentários

Nigohyu17 setembro
gente, só quero saber os limites do html kkk

acho muito bom, pois todo background que eu uso, por mais que seja em 4k, fica um pouco pixalizado dependendo da resolução de cada pc. Acho que irei começar a usar isso. Obrigado!♥♥
ResponderExcluir
Respostas
Danimel23 maio
Oi amada!
Esse fundo de florzinhas lindíssimo, como vc fez?
Estou encantada!
ResponderExcluir
Respostas
Danimel23 maio
Olá flor!

Eu enviei um comentário mais cedo, mas, não sei se saiu identificado, e por isso, me desculpe.

Gostaria de saber como fez esse efeito de chuva de corações no banner de sua página e tbm como faz esse pattner lindo de florzinha.

Desde já agradeço sua ajuda! Beijos!
ResponderExcluir
Respostas

Adicionar comentário

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

Reino Kawaii