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.
?~é 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;}
Ou em um widget específico:
#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>
.
Gostei da dica ;) e ja personalizei e vou usar kkkk
ResponderExcluir+Emy-Lee Cosplay+