Efeito border ✤

Olá meus sorvetes de flocos =3 tudo bem? Estou aproveitando a postagem para dizer que este será meu último post até eu voltar de férias da praia u.u, mas não se preocupem, daqui quatro dias eu estarei novamente pois sou pobre e não posso ficar de pernas pro ar como a maioria irá ficar, então tenho que me contentar com os 4 dias mesmo fazer o que, prometo que tentarei responder os comentários pendentes pelo tablet ou pelo celular, tipo é bem chato e bem demorado pois dependendo do wifi da praia demora um pouco mesmo ok? E sem contar que odeio demais mexer em tablets, notebooks e afins, prefiro mesmo meu pc que tenho tudo o quero e preciso mas enfim...

Agora falando sobre o efeito eu queria postar algo bem legal sobre bordas mas sempre é bem singular os efeitos e muitos criam efeitos de bordas bem parecidos fazendo que muitos fujam deste tipo de decoração por ser muito usado e com isso fica algo bem enjoativo, por isso criei um efeito de bordas sim, mas bem fofo e um pouco diferente dos atuais acredito que a maioria irá curtir, é muito simples não tem segredos para quem quer mudar um pouco ele poderão mexer nas cores, nas bordas e nas sombras dentro das caixas, mas prestem atenção pois tem um código no efeito hover que dá toda uma graça no modelo e o código é este aqui: -webkit-box-shadow: inset 50px 30px 0px 30px #D5CDDA; não mexam nos valores, podem mudar a cor da caixa de sombra mas os valores deixem como estão ok? Recadinho dado u.u

LIVE PREVIEW  ✤

Para usar o efeito copiem os códigos abaixo e colem acima de ]]skin;

/** Efeito bordas by gnmh **/
.border {opacity: 0.9; transition-duration: 1s;-moz-transition-duration: 1s;-webkit-transition-duration: 1s;-o-transition-duration: 1s; -ms-transition-duration:1s; background:#9A86A4; border: solid 2px #8B7A96; padding:3px; box-shadow: inset 0 0 6px #CFDFE2, 0px 1px 1px #fff;}
.border:hover {-webkit-box-shadow: inset 50px 30px 0px 30px #D5CDDA; -webkit-transition-duration: .80s; -webkit-transition:All 3s ease; -moz-transition:All 3s ease; -o-transition:All 3s ease;background:#D5CDDA;border: solid 2px #9A86A4;}

E para o efeito funcionar colem o código abaixo dentro de um gadget:

<a href="LINK"target="blank" title="NOME"><img src="LINK IMAGEM"width="50" height="50" class = "border" /></a> 

Beijocas meu amores e até semana que vem, um feliz ano novo a todos e que todos tenham uma virada com muita paz e muito amor ok? ;)