06/09/13
 |
| www |
Okaeri, minna-chan. Hoje vim ensinar outro efeito que eu mesma inventei, onde as imagens parecem ser inseridas num botão que fica pressionado ao passar o rato - daí o nome, né? Você pode fazer com ou sem texto, sendo que o texto deverá fazer parte da imagem. Com texto é mais complicado, mas mesmo assim não faz parte do efeito da imagem, isso irá depender do que colocar no gadget. O efeito em si é bem simples, o resultado será este:
Procure por:
/b:skinAcima acrescente:
.pressionado {
background: #FFEBCD;
color: transparent;
width: auto;
height: 30px;
border: 1px solid #F4A460;
box-shadow: 2px 2px 2px #CD5C5C;
padding: 5px;
overflow: hidden;
text-align: center;
font-family: silkscreen;
font-size: 12px;
-webkit-transition-duration: .90s;
}
.pressionado:hover {
background: #CD5C5C;
border: 0px solid #cccccc;
box-shadow: 0px 0px 0px #cccccc;
color: #cccccc;
filter: alpha(opacity=60);
-moz-opacity: 0.60;
opacity: 0.60;
-webkit-transition-duration: .90s;
}
Eu só indico que mude as cores, mas se perceber bem de HTML, também pode mudar a opacidade, a sombra, as bordas... Relembro que explico para que serve cada coisa aqui» www
Se quiser que apareça texto, ele terá de aparecer em imagem. Ou seja, guarde a mesma imagem com e sem texto, e quando for colocar no gadget, em vez de:
<img src="URL DA IMAGEM" class="pressionado">
Coloque:
<img src="URL DA IMAGEM" onmouseover="this.src='URL DA IMAGEM EM HOVER'" onmouseout="this.src='URL DA IMAGEM'" class="pressionado">
E pronto, já está ^^
