Oi amores, eu tava passando pelo blog Garota no mundo html e achei esse efeito para afiliados perfeito, e decidi posta-lo para vocês, então vocês já sabem de quem são os crédito né GNMH.
Vá em editar html e procure por ]]></b:skin>
acima dele cole:
/** Efeito outline por gnmh **/
.outline {-moz-transition:all 2s;opacity: 0.8; -webkit-transition: all 2s ease; -moz-transition: all 2s ease; -o-transition: all 2s ease; transition: all 2s ease;-o-transition:all 1s;outline: 2px solid #E6D6EB;outline-offset: -13px; -webkit-transition:all 1s; background:#D4E3E8;border: solid 3px #BECEDC;box-shadow: inset 0 0 6px #DFC7E6, 0px 1px 1px #D7BCE0; }
.outline:hover {opacity:0.5; filter: contrast(50%); -webkit-filter: contrast(50%); -moz-filter: contrast (50%); -o-filter: contrast(50%); -ms-filter: contrast(50%); -webkit-transition-duration: .50s; -webkit-transition:All 1s ease; -moz-transition:All 1s ease; -o-transition:All 1s ease;outline: 2px solid #E6D6EB; outline-offset: -5px;background:#D9CEE3;border: solid 3px #CAB9DA;box-shadow: inset 0 0 6px #D4E3E8, 0px 1px 1px #D4E3E8; }
Salve. Em seguida vá em layout e crie um gadget html/javascript e cole
<a href="Link"target="blank" title="NOME"><img src="IMAGEM"width="50" height="50" class = "outline" /></a>
Obs: onde está marcado de verde, é o tamanho da imagem, você pode altera-lo (se quiser).
Nenhum comentário:
Postar um comentário