Borda interna pelo CSS

Olá pessoal! Amanhã tenho uma prova de vestibular para fazer e acho que não vou conseguir postar, por isso vou adiantando o post para hoje, porque sei que segunda vai me dar preguiça e eu não quero ficar muito ausente. Na verdade acho que vou começar a ficar muito ausente a partir de hoje (ou sei lá quando), porque estou atolada de coisas para fazer e pensar, uma vez que minha formatura vai ser logo. Se querem um conselho, que tenho certeza que muita gente já deu a vocês, estudem bastante, prestem atenção nas aulas, leiam e treinem muito a escrita, porque depois fica tudo muito mais fácil (e rezem para seus pais ganharem na loteria também).

Hoje trouxe o código de borda interna pelo CSS, que é esse que uso na área de posts, porque achei interessante ensinar a vocês. Fiz um efeito só para não deixar a postagem "vazia", onde as imagens estão com uma bordinha por dentro, e quando você passa o mouse elas se juntam no centro. O efeito é  só  para dar um  exemplo de  como funciona o  código,  mas vocês podem usá-lo na elite se quiser.

Veja um preview aqui.

1- No HTML do seu blog, procure por ]]></b:skin> Acima, cole:

.interna {
outline-offset: -5px;
outline: 1px dashed #fff;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;
}
.interna:hover {
outline-offset: -10px;
outline: 1px solid #d976a3;
-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;}

2- Em um Gadget de HTML/JavaScript, cole:

<a  href="LINK DO BLOG" title="NOME DO BLOG"><img src="URL DA IMAGEM" class="interna"></a>

Entendendo:

outline-offset: -5px;

Espaçamento da borda. -5px é o número de pixels que a linha fica para dentro. No hover (quando passa o mouse), esse número aumenta para -10, o que faz a borda ficar mais "dentro" da imagem.

outline: 1px dashed #fff;

Tamanho da borda, estilo e cor. Em normal a borda é branca e tracejada, quando passa o mouse fica sólida e muda de branco para rosa.

-webkit-transition:All 1s ease;
-moz-transition:All 1s ease;
-o-transition:All 1s ease;

Se refere a transição, ou seja, o tempo que demora para o efeito acontecer. Não mude.

Espero que gostem e que entendam o código. Essa borda interna pode ser usada em qualquer lugar, não só em imagens, basta usar os códigos com "outline".

Meus querides! Caso vocês gostem desse blog e queiram continuar me acompanhando, eu ainda escrevo, mas em outro blog. Não posto apenas tutoriais, mas continuo escrevendo e falando de vários assuntos, inclusive a blogosfera. Caso queira visitar (sério ótimo uma visita): clique aqui para ir ao blog Serenar