22/11/2012

Bordas coloridas nas imagens do seu blog!

Tumblr_mdwxm3x0p71rhb1sgo1_500_large

Hello! Tudo bem com vocês? Eu estou muito bem, e um dos motivos é que as aulas estão acabando! Aqui pelo menos sim, e ai eu vou ter mais tempo para me dedicar no blog! Mas enfim, como prometido, hoje eu trouxe um tutorial em homenagem ao vencedor da enquete, o tutorial o/ É de como por bordas nas imagens do seu blogPeguei lá no KW, então créditos! Vamos ver?


O Tutorial é daquelas bordinhas que são colocadas ao redor da foto em alguns blogs... O próprio Kawaii World é um exemplo que usa, então se não sabem qual é vejam lá ^.^
Elas são feitas pelo html e não no Photoshop.

Vá até em editar HTML do seu blog, e em seguida pesquise por ]]></b:skin> . Acima dessa tag você vai colar este código:

.main img {
border: 3px solid  #f17c9d;
-webkit-transition-duration: .50s;
}
.main img:hover {
border: 3px solid #c8a2d4;
-webkit-transition-duration: .50s;
}

Ajustes: 3px refere-se ao tamanho, solid ao tipo de borda e #f17c9d ao código da cor. É só trocar pelo que desejar. A primeira parte do código é o que aparece sem passar o mouse e a segunda com o mouse sobre a imagem (hover). Edite e depois salve. 
É só isso, fácil não? Espero que tenham gostado!

2 comentários:

  1. Legal esse tuto, mas as imagens do post já tem efeito, então nem usaria!
    Estou seguindo, pode seguir de volta?
    teenage-dreams2

    ResponderExcluir
  2. Adorei o tuto,quando bate aquela preguiça de fazer na propria imagem a borda esse tuto é a salvação né? ASHUAUHSHUSHUAS

    Tu participou do game do blog né? então vá nele Sabado pois irá ter o resultado
    #bezos~> meusegredo-oficial.blogspot.com

    ResponderExcluir