Bordas de Rendas em Css

Oie... descansei um pouquinho do trabalho e enfim pude escrever um post! E esse é um daqueles tutoriais para decorar seu blog de um jeitinho kawaii; se tem uma coisa que acho lindo são as rendas, tecidos delicados que vão bem em tudo, roupas, sapatos, acessórios, no blog... é; em algum detalhe de nossos blogs podemos usá-las também; pela internet vc encontra muitas imagens de decoração com renda, mas nós vamos ver como se faz bordas de renda 'costuradas' com css e html. Encontrei esses códigos no Codepen da Marina e separei os 4 que gostei mais.

1. Primeiro você precisa dar a aparência à sua bordinha rendada; o legal é que rendas formam lindos padrões e aqui vamos fazer quase igual... de acordo com um dos modelos abaixo, copie e cole um dos códigos (que estão guardados aqui) antes de /b:skin no Blogger, ou entre <style> e </style> caso precise da renda em apenas um gadget html/javascript ou em qualquer área que aceite html.



Renda 1


Renda 2


Renda 3

Renda 4

Não há muito o que editar, a não ser a cor; coloquei todas brancas, como white ou #fff, que são os trechos do código que recomendo mudar se preferir. Para quem curte personalizar códigos, vc pode mudar o tamanho das rendas em background-size e a altura em height, por exemplo.

2. Agora, no lugar em que deseja que a renda apareça, cole isso:
<div class='renda1'></div>

Mudando renda1 para renda2, renda3, renda4, de acordo com a que preferir.

Por exemplo, vamos colocar uma borda no topo do blog. Depois de colar um dos estilos de renda antes de /b:skin, procure por <body expr:class= ou <body>. Assim que encontrar, cole depois deles se quiser que apareça ACIMA do cabeçalho; ou ainda depois de </header> se quiser que apareça ABAIXO do cabeçalho, mas recomendo que seja acima:
<div class='renda4'></div> <= porque vou usar o 4º modelo.

Talvez seja necessário especificar ainda um estilo que posicione direitinho a borda, separando do conteúdo ou definindo uma altura máxima para ela alcançar; aí voltamos antes de /b:skin e colamos algo como:
.lace {
height: 70px;
background: código ou nome de uma cor ou link de uma imagem ou none para ficar transparente;
        margin-bottom: 10px;/* distancia da margem inferior para separar do conteudo*/
}
A altura de 70px vai 'empurrar' o cabeçalho para baixo, enquanto que margin-bottom vai separar a área da borda do conteúdo; o background pode ser uma cor, uma imagem, por exemplo, de um cabeçalho ou outro plano de fundo diferente do padrão ou nenhum (none). E alteramos lá no outro código depois de body assim:
<div class='lace renda4'></div>
Salve e veja como ficou; aqui tive esses resultados testando em um modelo padrão Simple do Blogger:


E é isso; agora vou descansar mais um pouco porque amanhã vou trabalhar cedinho. Que DEUS abençoe mais essa nossa semana e todas as outras! Até logoヾ(^∇^) ☆






Postar um comentário

4 Comentários

  1. html cade teus limites?
    adorei, coisa mais fofa!

    ResponderExcluir
  2. Hey Ro, olha eu aqui haha que fofinha as rendinhas. Mas tô em busca de outra coisa, tubos extremamente necessários pra um blog que todos deveriam usar. Recomenda algo?

    Bjs

    ResponderExcluir
  3. Hey Ro, olha eu aqui hihi tudo bem?
    Adorei essas rendas...mas tô em busca de outra coisa, tutos que todos deveriam usar em seuseus blogs, recomenda algo?

    Beijos

    https://teckafanfics22.blogspot.com/

    ResponderExcluir
    Respostas
    1. Oi :3
      Conheço algumas coisinhas... depois compartilho links assim que puder ^-^ Bjus

      Excluir

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