Bordas Personalizadas com Imagens


Algumas vezes tentei adicionar bordas diferentes a algumas áreas dos layouts (como nas postagens) que usei aqui no blog e, para isso, personalizava planos de fundo no Photoshop para inserir no HTML depois, como mostrei aqui e aqui.
Dando uma olhada no Codepen, encontrei que existe uma forma de se fazer isso de maneira mais rápida e fácil, só que sem chance de ficar tortinho, como acontecia algumas vezes comigo...
Isso porque existe uma propriedade (?~é assim que se diz) para adicionar aos estilos (CSS) de um template/layout chamada border-image. Ela permite que você insira um código no seu HTML em que no lugar da borda em forma de linha, pontilhados ou pontinhos como normalmente a gente vê por aí, irá aparecer uma imagem e o navegador vai mostrar essa imagem como uma borda, daí você pode decorar quase toda área que quiser com bordas em forma de ondas, serrilhadinhos, rendas... usando imagens como gifs e pngs, por exemplo, para deixar mais bonitinho. Testei no Firefox e Chrome e deu certim.
O resultado é que nem esse abaixo:

Exemplo com plano de fundo colorido. Adicione cor ao background.
Exemplo para usar com imagens png, sem plano de fundo, acho que fica mais bonito.
Ok. Agora, como usar? Só acrescentar border-image:url(url-da-imagem) 32 round round; ao código da área que deseja modificar, antes de /b:skin.

Aí vc escolhe onde quer que apareça :3 Por exemplo, na área de postagem (veja como personalizar essa área aqui):
 /**area da postagem**/
@import url('https://fonts.googleapis.com/css?family=Bad+Script');
.post{
font-family: 'Bad Script', cursive;
width: 600px;
color: #a1a1a1;
font-size: 12px;
text-shadow: 1px 2px 3px #eee;
text-align: justify;
border-image-width: 100px;
border: 32px solid transparent;
border-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-ts-MEx4Tp_weV5p8S6ypoCb2B1KmceXO4cVq7Dk_t43Eq8ttlbr4F3DBA3EHbywf7rdS3MWBVloxLI43G6HxqTWVDhoP0bNsTFKgvX7DsvotO-lgkGWLs9jy-Hsxgx1DOmndO6qFERc/s1600/lace.png') 38 round round;
padding-right:10px;
padding-left: 10px;
margin:10px 0;
} 
Ou como blockquote:
 blockquote {
    border: 32px solid transparent;
    border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-ts-MEx4Tp_weV5p8S6ypoCb2B1KmceXO4cVq7Dk_t43Eq8ttlbr4F3DBA3EHbywf7rdS3MWBVloxLI43G6HxqTWVDhoP0bNsTFKgvX7DsvotO-lgkGWLs9jy-Hsxgx1DOmndO6qFERc/s1600/lace.png') 50 round round;
    border-image-width: 100px;
    font-family: 'Bad Script', cursive;
    font-size: 20px;
    color: #cab0b2;
    margin: 0;
    padding: 5px;
    text-align: center;} 
 #ID-DO-WIDGET {
    border: 32px solid transparent;
    border-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-ts-MEx4Tp_weV5p8S6ypoCb2B1KmceXO4cVq7Dk_t43Eq8ttlbr4F3DBA3EHbywf7rdS3MWBVloxLI43G6HxqTWVDhoP0bNsTFKgvX7DsvotO-lgkGWLs9jy-Hsxgx1DOmndO6qFERc/s1600/lace.png) 32 round round;
    background: transparent !important;
    width: 350px;
 } 
Ou para decorar alguma coisa... vá no HTML de seu template/tema/modelo e cole esse código antes de /b:skin:
 @import url('https://fonts.googleapis.com/css?family=Bad+Script');
.divider {
  border: 32px solid transparent;
  border-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-ts-MEx4Tp_weV5p8S6ypoCb2B1KmceXO4cVq7Dk_t43Eq8ttlbr4F3DBA3EHbywf7rdS3MWBVloxLI43G6HxqTWVDhoP0bNsTFKgvX7DsvotO-lgkGWLs9jy-Hsxgx1DOmndO6qFERc/s1600/lace.png') 38 round round;
  background-color: #f3dbdc;
  font-family: 'Bad Script', cursive;
  font-size: 20px;
  color: #cab0b2;
  margin: 0;
  padding: 5px;
  text-align: justify;
} 
No código acima, aparece um background colorido, se quiser que fique só a borda com plano de fundo transparente, especifique um tamanho:
 @import url('https://fonts.googleapis.com/css?family=Bad+Script');
.divider {
    border: 32px solid transparent;
    border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-ts-MEx4Tp_weV5p8S6ypoCb2B1KmceXO4cVq7Dk_t43Eq8ttlbr4F3DBA3EHbywf7rdS3MWBVloxLI43G6HxqTWVDhoP0bNsTFKgvX7DsvotO-lgkGWLs9jy-Hsxgx1DOmndO6qFERc/s1600/lace.png') 50 round round;
    border-image-width: 100px;
    font-family: 'Bad Script', cursive;
    font-size: 20px;
    color: #cab0b2;
    margin: 0;
    padding: 5px;
    text-align: justify;} 
Você pode alterar os valores 32px, 100px, 38 e 50, mudando a borda conforme preferir. E onde quiser que apareça, cole isso:
 <div class='divider'>
Escreva Aqui
</div> 
E é isso!! Nesse site tem imagens fofas para usar: Asterism. Mas você mesmo pode criar suas próprias formas em programas de edição de imagem, dando um toque especial ao seu blog.
Imagem início do post: weheartit






Postar um comentário

1 Comentários

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Deviantart

up