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:

Postar um comentário

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram