Bordas Kawaii Coloridas com CSS

Olá! E FELIZ PÁSCOA!!!! Ganharam muitos ovinhos? Eu ganhei três: um big ovo em forma de coração da minha mãe, e dois ovos normais da minha avó e do meu tio; todos vieram com muitos bombons dentro, só falta a metade do coração para que eu devore, o que levaria cerca de daqui a 5 minutos :D
Bom, nesse post vou mostrar para vocês como usar quatro cores nas bordas de imagens, gadgets, blockquotes, ou o que quiser, criando uma moldura bem kawaii e simples, já que usaremos apenas CSS. Super fácil! Veja como fica aqui no blog de testes: Laboratório Kawaii.
1. Sobre Bordas...

Com CSS podemos criar bordas em tudo quanto é lugar de um layout. Para isso, se usa basicamente algo como isso:
border: espessurapx tipo #cor;
Border é onde se adicionam os estilos; espessura é expressa por números; quanto maior, mais grossa, e a cor é em HTML e para isso será preciso obter códigos de tabelas de cores. O tipo pode ser:
Solid = reta; Dotted = pontilhada; Dashed = tracinhos; Double = dupla, Ridge e Groove = parecem  molduras, Outset e Inset = apresentam relevo e Hidden = oculta.
Digamos então que eu queira criar alguma coisa com borda grossa, em forma de moldura e na cor rosa:

Precisaria de um código assim: border: 5px ridge #fcc;

Legal não é? Mas vamos deixar cada borda de uma cor? Sim! Esse é o objetivo desse tutorial :3
Como vocês viram, um elemento sempre terá 4 bordas: a da direita, a da esquerda, a do topo e a de baixo. Para que cada uma ganhe um estilo, temos que definir...
Esquerda = border-left
Direita = border-right
Topo = border-top
Rodapé = border-bottom
2. Bordas Coloridas em Imagens
Adicione o código acima de ]]></b:skin> ou encontre post img de seu template, acrescentando a partir de border-left...até 20px;:
.post img{/* Aplicar efeitos nas imagens do post */
border-left: 3px solid #D5BACB;
border-right: 3px solid #DEEEFE;
border-top: 3px solid #D1F5C7;
border-bottom: 3px solid #F2BFC8;
border-radius: 20px;/* opcional deixa as bordas de todas as imagens de seus posts arredondadas */
}
.post img:hover{/* opcional daqui para baixo porque sao estilos para quando se passa o mouse nas imagens */
border-top: 3px solid #D5BACB;
border-left: 3px solid #DEEEFE;
border-bottom: 3px solid #D1F5C7;
border-right: 3px solid #F2BFC8;
border-radius: 10px;/* arredondado */
}

3. Usar em um Gadget ou Áreas Específicas:
Adicione o código acima de ]]></b:skin>:
.bordas{
border-left: 3px solid #D5BACB;
border-right: 3px solid #DEEEFE;
border-top: 3px solid #D1F5C7;
border-bottom: 3px solid #F2BFC8;
}
Para que apareça em algum lugar, use:
<div class="bordas">
Conteúdo Aqui
</div>

Se quiser estabelecer medidas para a distância entre conteúdo e bordas use padding, antes da última } do código .bordas, por exemplo:
padding: 4px; = toda área terá uma distância de 4px das bordas;
padding-bottom: 4px; = haverá uma distância de 4px apenas na parte inferior;
padding-left: 4px; = = haverá uma distância de 4px apenas na esquerda;

Isso é tudo pessoal ^-^ Agora é só usar a criatividade e criar vários efeitos com bordinhas lindas!!!
Aplique em blockquotes, área de posts, cabeçalho, sidebar, todo o blog...só localizar a área que quer. Em outros posts mostrarei algumas áreas legais para aplicar.
Agora vou comer mais chocolate =^.^= Beijus <3

4 Comments

  1. Gabi31 março

    Que bacana! Thanks diva u_u'

    ResponderExcluir
  2. Suh Lima31 março

    Fico muito fofinho, amei.
    Eu também amei o novo layout, muito lindo

    ~Yuizinha~

    ResponderExcluir
  3. ✖~ Nakashita Beel31 março

    hege, bacana o efeito, adorei *o*
    kissus ;33

    ResponderExcluir
  4. Hilary Kaiak13 abril

    Oii gostei do blog e o tutorial foi bem útil ..... Segue e eu sigo de volta? Bjos

    http://sweetworldplace.blogspot.com.br

    ResponderExcluir

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