5.1.14

Efeito mixture


Oyahou, minna-san, agora trago um efeito para imagens, criado por mim, como normalmente. No entanto, não tem nada assim de especial, pois consiste em juntar partes de vários efeitos ~dái o nome mixture. Só posto aqui para o caso voltar a precisar, eu achei que ficou fofo, pouco chamativo, e é provável que use em vários layouts. Neste momento até está na imagem de welcome do blog, mas vejam a preview em baixo ;)

Preview
  • nota1» entre as duas imagens, à rotação; 
  • nota2» o fundo não vem incluído;
  • Podem ver melhor aqui (www).

sem hover
com hover

Fazendo:

Vá ao seu HTML e antes de /b:skin, escreva:

.efeitomix {
border: 1px dotted #D2691E;
padding: 1px;
border-radius: 5px;
opacity:0.82;
-webkit-transition-duration: .50s;
}
.efeitomix:hover {
border: 1px solid #CD0000;
border-radius: 0px;
box-shadow: 1px 0px 4px #FF4500;
opacity:1.0;
-webkit-transform: rotate(360deg);
-webkit-transition-duration: .50s;
}

Você já sabe como aplicar efeitos, não? Na classe da imagem, dentro do gadget. De qualquer modo, aplique assim:
<img src="URLDAIMAGEM" class="efeitomix" />

Ja nee :3



Sem comentários:

Enviar um comentário