Efeito evaporar

Bonjour :)

Não, não pretendo fazer um post em francês. Sim, dei um nome estranho ao efeito. Evaporar? Yap ^^ Escolhi esse nome porque, no efeito, eu jogo um bocado com as sombras, passando-as do interior para o exterior, com um padding generoso e cantos arredondados. Aparentemente, isso não teria nada a ver com evaporar, mas eu aprendi em Biologia que os planetas gasosos, se se aproximassem demasiado do sol, por serem constituídos de elementos leves, vaporizariam e seriam empurrados para a periferia pelos ventos solares. Eu tentei dar outro nome, mas esse fenómeno não saía da minha cabeça, portanto ficou >.<

Vamos ver?

Prévia:

Vejam melhor aqui, na imagem: www

P.S: Não se deixem enganar, a sombra é preta, só que na prévia não aprece porque o fundo em si é escuro.

Código:

Com Ctrl+F, procure por:

/b:skin

Acrescente em cima:

.vapor {
padding: 8px;
border-radius: 40px;
box-shadow: inset 0px 0px 30px #cccccc, 0px 0px 0px #cccccc;
-webkit-transition-duration: .60s;
}
.vapor:hover {
box-shadow: inset 0px 0px 0px #cccccc, 0px 0px 10px #cccccc;
-webkit-transition-duration: .60s;
}

Pronto, podem mudar as cores. Para aplicar, como de costume, escreva em algum gadget:

<img src="URLDAIMAGEM" class="vapor" />

Só isto por agora, em breve pretendo trazer tutos mais básicos e importantes, tá?