clique aqui


BLOGS QUE ADMIRO ACIMA E OUTROS LINKS ABAIXO

26/06/2015

Tutorial: Efeito Candy


Hey! Hoje é dia de efeito em bordas! E venho trazer uma borda para quem ama layouts coloridos, por isso já aviso cuidado com a demasia para não se tornar "tosco" ou desconfortável para quem vê. O efeito candy é uma borda colorida em degrade. Os créditos vão para o blog Chá com Anjos, espero que gostem do tutorial.


1) Escolha o blog qual deseja aplicar, e vá ate seu HTML. Chegando lá ative a pesquisa cm o atalho Ctrl+U e pesquise por ]]></b:skin>, acima dele cole:
.candy{
transition:All 1s ease-in;
-webkit-transition:All 1s ease-in;
-moz-transition:All 1s ease-in;
-o-transition:All 1s ease-in;
transform: rotate(0deg) scale(1) skew(0deg) translate(2px);
-webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(2px);
-moz-transform: rotate(0deg) scale(1) skew(0deg) translate(2px);
-o-transform: rotate(0deg) scale(1) skew(0deg) translate(2px);
-ms-transform: rotate(0deg) scale(1) skew(0deg) translate(2px);
background:-webkit-gradient(linear, 58% 100%, 0% 4%, from(#8FA8FF), to(#FF366E));
padding:5px;
}
.candy:hover{
transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
-webkit-transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
-moz-transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
-o-transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
-ms-transform: rotate(360deg) scale(1) skew(0deg) translate(0px);
background:-webkit-gradient(linear, 58% 100%, 0% 4%, from(#8FA8FF), to(#FF366E));
padding:5px;
}
Salve!

2) Agora vá ate Layout e abra um novo gadget/javascrit, dentro dele cole:
<a href="URL DA IMAGEM"><img border="0" class="candy" src="URL DA IMAGEM" /></a>
<a href="URL DA IMAGEM"><img border="0" class="candy" src="URL DA IMAGEM" /></a>
<a href="URL DA IMAGEM"><img border="0" class="candy" src="URL DA IMAGEM" /></a>

Salve e prontinho!

Nenhum comentário:

Antes de sair, não esqueça de comentar!