26/06/2015

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:

Códigos
.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:

Códigos
<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

Bem Vindos
Hi! Meu nome é Andréa Alark, mas conhecida como Wendy dona do blog Bunny Crazy. O blog foi criado em 2010 na intenção de ajudar a criação e desenvolvimento do seu blog. Aqui encontrará tutoriais e dicas de HTML, layouts gratuitos e muito mais.
Friends
Bunny Crazy by Wendy ❀
Bunny Crazy ★
Bunny Crazy ★
12345