Padṛo de Repeti̤̣o РBolinhas

• Home-
• CSS, Fireworks/
• autor: Adriano Meira /
• publicado em: 16/05/2010

Um dia desses uma amiga aqui no serviço estava procurando um padrão de repetição para o fundo do site da mão dela, onde seria preto com bolinhas brancas como aqueles vestidos antigos (lembra da música “era um biquíni de bolinha…” ), daí procurei e achei uma solução bacana que quero compartilhar com vocês e falar um pouco sobre padrões de repetição.

Para o caso da minha amiga vejamos o modelo era um vestido preto de bolinha branca veja a foto abaixo:

Note que o vestido tem um padrão de bolinhas não retilíneos, ou seja, eles se intercalam, daí pensamos em fazer uma do lado da outra, outra forma uma em cima da outra e do lado a outro e nada, então pensei um pouco fora “da caixa” e porque não se fosse metades?

Isso mesmo para que as bolinhas se repetissem como na foto acima precisei fazer algo assim veja:

Note que na área em vermelho são quatro bolinhas e depois é só cortar o quadrado, assim basta cortar ao redor do quadrado e colocar no backgound no seu site.

Por isso se desejar fazer um padrão de repetição mais suave e real outro exemplo você pode ver neste site.

---

Tweet