25/11/2012

Tutorial: Colocando bordas no blog

||

Ohayooo queridos bunnie's, como estão? Decidi atualizar essa postagem, devido a má explicação. Foi pulicada originalmente em 2012, e atualizei em 2017. Abaixo você encontrará a brevia das bordas, espero que gostem até a próxima!


O código principal:  border: 1px solid #D683DE;

Então para aplica, vá em seu HTML e procure por:

.main-inner .column-center-inner {

Depois que achar abaixo dele coloque o código abaixo:

border: 1px solid #D683DE;

Você pode mudar a parte em vermelho pela qual você achar que fica melhor:

border-bottom - Coloca borda apenas na parte de baixo.
border-top - Coloca borda apenas na parte de cima.
border-left - Coloca borda apenas na esquerda.
border-right - Coloca borda apenas na direita.

(1px) Expresura da borda
(#D683DE) Cor da borda
(solid) Estilo de borda

A onde esta em itálico e onde iremos mudar o estilo da borda, que agora mostrarei abaixo quais são:

Borda Dashed

Borda Dotted

Borda Solid

Borda Double

Borda Groove

Borda Ridge

Borda Inset

Borda Outset



Os mesmo estilos aplicados em imagens:

Solid - E a mais conhecida de todas, ela e uma linha sólida, sem efeitos ou seja simples.


Dashed - É uma linha feita com trações, onde a linha sólida original fica com efeito de partida". Eu aconselho usar em 1px.
Dotted -  É uma linha formada por pontos, o bacana e usa-la com alguma fonte que os pontos tenham efeito.


Groove - Essa borda possui um relevo mais escuro do que a cor que você escolheu 
Ridge - A mesma coisa que o de cima, só que as cores trocam de lugar.

Também a inset e a outset, que é relevo para dentro e para fora.

12 comentários:

  1. Muito útil ! A minha favorita é a Goove , mas não funciona em tudo !

    ResponderExcluir
    Respostas
    1. Verdade eu acho uma pena...

      Excluir
    2. Está errado a escrita , não é "Goove" é "Groove" , faltou o "R" , depois do "G"

      Excluir
    3. Thanks por me alerta irei corrigir isso ^^

      Excluir
  2. Muito obrigada! Pesquisei muito sobre esse assunto. Parabéns pelo blog :)

    ResponderExcluir
    Respostas
    1. De nada, fico grata por ajudar.
      Obrigada ^^

      Excluir
  3. Obrigada ;3 Usei duas dessas, hahaha 8-* Meu primeiro Layout

    ResponderExcluir
    Respostas
    1. Jura primeiro layout? Ficara muito bonito então Nessa ^^

      Excluir
  4. No meu blogger, não esta achando! :(

    ResponderExcluir
    Respostas
    1. Oi Lets esse tutorial só ensinada como arrumar as bordas e o tipo que são. As bordas você adiciona em menus, imagens ou partes do blog que deseja. Para isso você precisa saber a onde quer colocar e qual código é essa parte.

      Excluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram