clique aqui para ampliar.

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.

Não se desespere o “Mago do CSS”, o Mr. M lhe ajudará!

Vejam a mágica aqui

Parece simples as imagens estão com bordas arredondadas, mas não, veja aqui a foto que está salva, e agora Mr M como você fez isso?

Hahah brincadeiras a parte vamos revelar o segredo, é muito simples, aqui estou usando uma máscara, um arquivo PNG por cima da imagem, confiram o passo a passo.

1.Criando as máscaras

Bom aqui vamos criar a máscara, mas antes devemos saber qual o tamanho dos nossos arquivos miniaturas aqui eu estou usando o tamanho de 210×131, mas você pode usar como quiser, logo come esta largura e altura vou para o Fireworks (pode usar o Photoshop ou outro programa que achar melhor também) e crio um novo documento com as mesmas medidas.

Bom agora vou falar de como fazer a borda arredondada no Fireworks, tente assemelhar isso ao seu editor de imagens ok?  No Fireworks eu crio um quadrado com o mesmo tamanho deste documento (210×131) e por cima dele um “Rounded Rectangle”, que fica no painel de “Vector” como mostra a imagem abaixo:

Este retângulo com bordas eu faço ele menor do que o tamanho do palco, neste caso eu usei o tamanho de 203×126 e ficou assim:

Note que as linhas vermelhas denominam os dois elementos agora com os dois elementos selecionados e com suas bordas removidas, lá em cima no menu “Modify->Combine Parths->Punch’ você irá recortar o quadrado “vazando” o retângulo deixando ele assim:

Note que usei a cor verde só para que você possa enxergar melhor, agora com a mascara criada, volte ela para branco e salve-a como quiser eu dei o nome de “mascara_thumb.png”

Nota: Porque não usar o bom e velho GIF?? Bom o GIF perde muita qualidade, se estiver usando a curva será mais rígida e não terá muita suavidade, mais na frente irei falar mais e ajustar um bug do IE6 pra variar…

Bom agora com a máscara criada vamos ao CSS, agora sim Mr. M eu quero ver…

2.HTML e CSS
“Agora sim sem usar cordas”... bom vamos começar com um html simples para chamar as imagens, uma div com seu class para cada imagem e dentro deles um SPAN e uma div geral que marca o tamanho do documento… veja:

<div id="conteiner_galeria">
  <div class="thumb">
     <span></span>
     <img src="fotos/thumb_img7.jpg" />
    </div>
</div>

Bom nada de mais né a não ser pelo SPAN que não tem nada, por enquanto… agora vamos ao CSS, o terror dos programadores

body,td,th {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size: 11px;
   color: #333333;
   text-align:center;
 }
 div#conteiner_galeria{
   margin:auto;
   width:700px;
 }
   div#conteiner_galeria .thumb{
   position:relative;
   float:left;
   margin:7px;
   width:210px;
   height:132px;
 }
 div#conteiner_galeria .thumb img{
   border:0px;
 }
 div#conteiner_galeria .thumb span{
   position:absolute;
   width:210px;
   height:132px;
   background-image: url(imagens/mascara_thumb.png);
   background-repeat: no-repeat;
   background-position: left top;
}

Aqui serei breve na explicação, o mais importante é saber sobre alinhamentos de elementos com CSS, regra básica elementos absolutos se alinha aos elementos relativos, por exemplo aqui o elemento “div#conteiner_galeria .thumb” é relativo e o elemento “div#conteiner_galeria .thumb span” é alinhado absoluto ao elemento anteiro a ele no caos o “div#conteiner_galeria .thumb”.

Daí é só dar a ele o tamanho desejado com o fundo sendo a nossa máscara,é importante também deixar tudo em ordem, ou seja o SPAN vem antes da Imagem, mas Tio pode ser diferente, pode “desinfeliz” mas é preciso colocar um z-index maior para que possa ficar por cima da imagem, assim:

div#conteiner_galeria .thumb span{
   z-index:10;
}

Outro detalhe importante é que sua máscara deverá ter o mesmo fundo (no caso aqui a borda) da sua página neste exemplo ela é branca, se seu site fosse verde ela deveria ser verde.

Prontinho, nãããooo… ainda tem mais Mr. M, no caso do Explorer 6 ele coloca um preenchimento azul (deve vir da tela azul da morte) nos lugares onde tem transparência em PNG, “ha tá, deposi deste trabalhão que você me diz isso?!”

3.Corrigindo Bug do IE
Calma para tudo tem um jeitinho, vamos lá para solucionar seu problema lhe apresento  o IE PNG Fix, este componente faz uma doideira para remover este bug, veja a documentação completa no site, mas para adiantar seu lado usaremos apenas dois dos arquivos baixados no site:

iepngfix.htc
blank.gif

Coloque estes dois arquivos na raiz de sua aplicação basta acrescentar no CSS esta linha de código:

div#conteiner_galeria .thumb span{
   behavior: url("iepngfix.htc");
}

Agora sim! Está pronto e sem bug se quiser baixar os arquivos simples aqui e com um toque de chefe com um Ligthbox oferecido pela Colorbox.

É isso ai até a próxima, dúvidas postem ai!

Vamos lá então para começar abra o fireworks e crie um documento com o tamanho de 4x4Pixel, e amplie até  uns 6400% (usando a tecla de atalho crtl++), agora com a ferramenta Rectange Tool (que faz quadrado) desenho um quadro de 2x1pixel no canto superior esquerdo, agora copie-o e cole no canto superior direito.

Selecione os dois, copie e cole abaixo deles, em seguida repita o procedimento colando abaixo novamente, assim ficará tudo preenchido, vamos ao trabalho das cores, se você agrupou algum retângulo, desagrupe e siga o esquema de cores abaixo:

Paleta de cores fibra da carbono

Depois de seguir esta paleta de cor,  salve  seu arquivo como queira e onde quiser, mas lembre-se de onde e qual o nome rss..

Agora abra um novo documento do fireworks bem maior como por exemplo 550×440 insira um quadrado grande e selecione-o, agora na abra Properties (Propriedades) vá no “Baldinho” e selecione o tipo de preenchimento “Patthern” e vá até o fnal e escolha a opção “Other” (outros)

Selecione Pattern - Outher..

E nesta tela que vai abrir selecione seu arquivo e veja o resultado! Agora use sua criatividade e divirta-se!