7 de dez de 2013

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.


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".

12 comentários:

  1. Fiquei toda animada pensando que seria a borda da área de postagem e é para afiliados :( Por favor, ensine para dentro da postagem, como no seu. Enfim, quero ver suas fotos na formatura, e tomara que dê tudo certo <3 Boa sorte.

    etcforme.blogspot.com

    ResponderExcluir
    Respostas
    1. É o mesmo código, só que usa na área de postagens, ficando assim:

      .post-outer {
      código da sua personalização +
      outline-offset: -10px;
      outline: 1px solid #d976a3;
      }

      Obrigada! Eu posto as fotos aqui se der ^^

      Excluir
    2. Obrigada <3 E poste mesmo, vou ficar brava se não postar.

      Excluir
    3. suahusahu' fica brava não, eu posto!

      Excluir
  2. Que tutorial perfeito, acho que vou usar no próximo lay, gostei muito *u*

    htmlandresources.blogspot.com

    ResponderExcluir
  3. Que borda linda <3 já marquei nos favoritos e vou usar
    candytendy.blogspot.com

    ResponderExcluir
    Respostas
    1. Eu me apaixonei por ela desde que vi *--*

      Excluir
  4. Dashed e depois solid *o*~ ficou muito linda essa borda! Com dotted também ficaria muito fofo!

    interesses-sutis.blogspot.com

    ResponderExcluir
    Respostas
    1. Eu nem testei dotted, mas acho que ficaria lindo também!

      Excluir
  5. awn fica muito fofo <<3

    kissu ~* || louca-por-html.blogspot.com.br || bom domingo !!

    ResponderExcluir

Seja educado, não use palavras ofensivas ou de baixo calão;
Comente algo relacionado ao post, para outros assuntos use a ask;
Obrigada e volte sempre!