2012/11/24

EFEITO STUNNING


Morecos de Rêe vim trazer um efeito bem legal que eu achei no Land Of Designs como ainda não postei nenhum efeito de imagem esse será o primeiro creditem o Land Of Designs
okay vamos ao tutorial:

1. Vá até editar HTML e procure por ]]></b:skin>. Acima da tag, cole o seguinte:

.qitem{width:160px;height:160px;border:2px solid #222;margin:5px 5px 5px 5px;background:#372925; overflow:hidden;position:relative;float:left;cursor:hand;cursor:pointer;} .qitem img{border:0;position:absolute;z-index:200;} .qitem .caption{position:absolute;z-index:0;color:#ffffff;display:block; width: 160px; margin-top: 30%; text-align: center;} .qitem .caption h4{ font-family: yanone kaffeesatz; font-size:18px;padding:5px;margin-top:0%;color:#ffffff; } .qitem .caption p{ font-family: yanone kaffeesatz; padding-top:-20px ;margin-top:-10px; font-size:12px;} .topleft,.topright,.bottomleft,.bottomright{position:absolute;background-repeat:no-repeat;float:left;} .topleft{background-position:top left;} .topright{background-position:top right;} .bottomleft{background-position:bottom left;} .bottomright{background-position:bottom right;} .clear{clear:both;}
2. no html Onde quizer que apareça o efeito cole o seguinte codigo
<div class="qitem"> <a href="link"> <img src="imagem"></a> <span class="caption"><h4>nome</h4> <p>frase</p></span> </div>
Explicando o codigo: 

Riscado-você coloca o tamanho da sua iamgem no width e no height. no width você coloca o mesmo do width que vc colocou no de cima,porque esse é o valr no caption,ou seja,da escrita

Negrito - no width você coloca o mesmo do width que vc colocou no de cima,porque esse é o valr no caption,ou seja,da escrita

Subliniado- é a escrita grande.

Italic- é a escrita pequena


Um comentário: