Borda Separada - CSS

Neol saranghandago malhaebeorilkka sipeo ireoke Maeil gaseumapa apa - Sojin, Female President (Girl's Day)

Hello, players! Hoje a gata do meu vizinho pulou aqui para casa. Ela pretinha dos olhos verdes, muito miúda & fofa. Peguei ela no colo uma mil e quinhentas vezes para dar carinho e chegou a me seguir pela casa enquanto estava no andar de baixo. Só quero ver quem vai correr mais quando minha cadela ver ela: Minha candela ou a gata AHSUASH' Vai ser bem engraçado. Enchendo linguiça.

Bem, como me foi pedidos na Ask, aqui estou para ensinar como por a borda separada nas imagens, também conhecida como padding. Para demonstrar o resultado, fiz dois exemplos no PS de uma imagem com fundo escuro e outra com fundo claro, só para terem um pequena ideia do efeito. No exemplo, coloquei fundo colorido, mas é a escolha é de vocês.

Aplicando em todas as imagens do post: Vá em Modelo > Editar HTML. Dê Ctrl F ou F3 e procure por ]]></b:skin>. Acima dessa tag, cole:

.post img {
background: #cor_do_fundo;
border: 1px solid #cor_da_borda;
padding: 3px;
}

Aplicando em uma imagem por ver: Vá em Modelo > Editar HTML. Dê Ctrl F ou F3 e procure por ]]</b:skin>. Acima dessa tag, cole:

.efeitinho {
background: #cor_do_fundo;
border: 1px solid #cor_da_borda;
padding: 3px;
}

 Modifique conforme é comandado e salve. Agora vá aonde quer colocar a foto com a borda e cole o seguinte código:

<img src="url_da_imagem" class="efeitinho"/>

Modifique e salve. Pronto lá vai estar sua imagem com borda <3 

8 comentários:

  1. Awnnnnnnn, como tu é diva >.<' Adorei o tutorial, pena que essa borda não coincide com o estilo dos meus posts ;c

    Beijinhos,

    Juu-Chan ;3 | Nescau com Nutella

    ResponderExcluir
  2. Borda Padding é fofa. Gatinha fofa, você sabe o que aconteceu com meu último UAHSUAHS. - não é engraçado, na11.

    Com carinho, Ammy | SEMPRE FUI ESTRANHA

    ResponderExcluir
    Respostas
    1. Também acho u3u Ainda sinto muito por isso, Ammy.

      Excluir
  3. Borda padding é vida <3 Ótimo tuto :3

    - HTML Secret

    ResponderExcluir
    Respostas
    1. É muito linda, nem tem para menos.

      ~ Obrigada <3

      Excluir
  4. Seu Blog é DIVO!! Super diferente dos outros!!
    ( o lay)
    Seguindo! ( Com prazer...)

    Panda Dream| Beijoks :*

    ResponderExcluir