28 de mar. de 2013

Tutorial Efeito Shadow + Aviso

|| || ||
Atualizado, pois esqueci do aviso.

Oi, galera do barulho, como vocês estão? Espero que muito bem. To muito feliz amanhã é pascoa! Gloria; Espero que a pascoa de vocês seja muito boa e cheias de ovos.
Mas vamos deixar de papo furado  e vamos pro que interessa? Que mesmo? então me segue ou melhor segue as instruções Ah e se quiser visualizar como fica clica aqui. Para terminar de ler Clica em Leia mais!
Gente só para alertar o tuto foi produzido pelo We ♥ Html e Preview também
Bem pessoal o primeiro passo vocês já sabem. Abra o seu lindo e velho amigo Html. Mas como faz isso sou novato? É simples vá em Modelo > e depois Editar Html. Fácil né?
Depois de ter aberto o Html procure pela Tag ]]. Achou? que bom! Acima dela cole o código abaixo;
.view {
width: 50px;
height: 50px;

margin: 10px;
float: left;
border: 5px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
box-shadow: 0px 0px 5px #aaa;
cursor: default;
}
.view .mask, .view .content {
width: 160px;
height: 160px;

position: absolute;
overflow: hidden;
top: 0;
left: 0;
}
.view img {
display: block;
position: relative;
}
.oefeito img {
opacity:0.2;
transition-duration: 60s; -webkit-transition-duration: .60s;
}
.oefeito .mask {
cursor:pointer;
opacity:1;
visibility:visible;
border: 80px solid rgba(0,0,0,0.7);
box-sizing:border-box;
transition-duration: 60s; -webkit-transition-duration: .60s;
}
.oefeito:hover .mask {
border:0px double rgba(0,0,0,0.7);
opacity:0;
visibility:hidden;
}
.oefeito:hover img {
opacity:1;
 }

Lembrando que, os códigos de cor verde você pode altera-los a vontade.

Agora cole o código onde você que o efeito apareça ( ele é melhor para afiliados ou elite) o codigo aqui em baixo.
<div class="view oefeito">
<a href="Link"><img src="LINK DA IMAGEM" /></a>
<div class="mask"></div>
</div>
<div class="view oefeito">
<a href="Link"><img src="LINK DA IMAGEM" /></a>
<div class="mask"></div>
</div>
<div class="view oefeito">
<a href="Link"><img src="LINK DA IMAGEM" /></a>
<div class="mask"></div>
</div>

Agora os avisos, só queria dizer que durante 1 ano estarei fazendo Layout free, claro uns 8 por mês mais para isso preciso de mais ou menos 30 seguidores. ok? Já já posto mais informações.

Por hoje é só isso. Gostou? Que mais? comenta ai!
Creditos: We ♥ Html


Nenhum comentário:

Postar um comentário