Máscara em galeria de imagens

Aprenda a estilizar uma galeria com um quadro transparente

Já houve um momento em que você precisou fazer via Css uma borda personalizada e ainda por cima redonda? Onde abaixo desta borda haveria uma imagem com uma descrição administrada por um editor de notícias ou algo semelhante?

Bom, levando em consideração que temos o objetivo de não salvar o Jpg com a borda e a descrição , mas sim produzir uma máscara via Css, criei um tutorial para mostrar como é simples fazer isso.

Então teremos 3 elementos:

1
2
3
4
5
6
7
8
9

<div class="box">
 
     <span class="mascara">
             Descrição da Imagem
     </span>
 
     <img class="img_dinamica" src="imagem.jpg" alt="Imagem" />
 
</div>

-Div (Box);
-Span (Máscara e descrição);
-Imagem (Dinâmica).

1º Passo

O primeiro elemento é a DIV (box) pai, ela comportará os filhos span e imagem, sendo a referência quando usarmos a propriedade “position:absolute”. Para criar uma falsa “máscara”, usaremos um span, porque ele contém a informação de texto de descrição da imagem e também será aproveitado como máscara. Então teremos as propriedades da div de class = “box”.

.box {
        position:relative;
	float:left;
}

2º Passo

Logo depois teremos o span de class = “mascara”, que conterá um background transparente. Inicialmente usaremos um gif para mostrar como funciona o conceito. Se você desejar, pode trabalhar com png e seu fix para o ie6, como já vimos no post destinado ao ie6pngfix. No span, além da propriedade background, faremos uso do position relative para habilitar o z-index, que é uma propriedade para trabalharmos com camadas, ao setar z-index=”1?, assim estou induzindo o css colocar esta imagem na camada de número 1, ou seja, à frente das demais. Os paddings e color servem para alinhar o texto de descrição que estará dentro do span de class = “máscara” e adicionar cor a ele.

.mascara {
	background:url(mascara.gif);
	width:184px;
	height:174px;
	display:block;
	z-index:1;
	position:relative;
	color:#fff;
	padding-left:12px;
	padding-top:5px;
}

3º Passo

Por último, utilizaremos a imagem que seja dinâmica, no sentido de ser uma imagem qualquer. Nela, adicionaremos duas propriedades básicas , o position absolute, que vai buscar referência que é a div com o position relative, e irá “flutuar” no ponto de top = 0.

.img_dinamica {
	position:absolute;
	top:0;
}

4 Comentários

Assine o Feed RSS dos comentários deste post | URL de TrackBack

1. 

   Bill Szilagyi Comentário por 20 de novembro de 2008 @ 18:41

   Guilherme, o blog está muito bom!
   Claro, limpo e objetivo! Muito bom mesmo!

   Parabéns!

2. 

   Igor Vieira Comentário por 29 de novembro de 2008 @ 12:33

   Opa, beleza rapaz?
   Parabéns pelo blog, está muito bonito.

   Ah, já joguei o blog que te falei pro ar, dei um gás no layout, e adicionei as técnicas de SEO encinadas na oficina…
   hehehe….só espero que o google indexe ele direitinho

3. 

   Adriano Comentário por 1 de dezembro de 2008 @ 18:07

   Eae Guilherme!

   Nos falamos lá no ‘encontro de TI’. Gostei do teu blog cara!

   Abraço

4. 

   rmaia Comentário por 18 de setembro de 2009 @ 12:46

   Simples , rápido e rasteiro! Valeu Guilherme, show de bola!

Deixe um comentário