Blog do Adriano Meira - Uma ajudinha para desenvolvedores e web designers. Uma ajudinha para desenvolvedores e web designers.

Máscara de imagens – Borda Arredondada

Imagine que você criou aquele layout com borda arredondada pra tudo que é lado, todo espertinho usou o plugin do jQuery Corner, mas ai a galeria de imagens (ou fotos) do seu cliente é dinâmica, vem de um banco de dados, como colocar as bordas arredondadas??

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!




Adriano Meira é o criador do blog, trabalha desde 2012 como Webdesigner e hoje formado em design gráfico trabalho para a Brasil na Web e como free-lancer nas áreas de Design para Web (Webdesigner), Design Gráfico, Impressos e criação de marcas.

Comente este artigo você também!

Publicidade e outros

Marcadores de Página Magnético

 

Leia e Liberte pelo BookCrossing.com ...