22 de fev de 2013

Tutorial: Sidebar com Bordas Hover


Oláá pessoal!
Tudo bom?

Bem, hoje eu trouxe um tutorial de como deixar as bordas da sidebar hover. Hoje é dia de bases ou buttons, mas não consegui segurar até segunda pra postar... Vocês podem ver como fica passando o mouse na sidebar alí no lado>> 

É o mesmo efeito lá do Kawaii World. Eu aprendi esse tutorial lá no Farry Teen. Mas a dona excluíu o blog. Que pena, pois eu adorava o blog. Tinha tutoriais muito bons. Bem, se vocês gostaram, e querem deixar o blog de vocês mais fofinho, usem esse tutorial, mas claro, não vale fazer igualzinho a sidebar aqui do blog, e a sidebar do Kawaii World.

Vamos ver??



Bom, procure por 
/* Widgets

Agora, em baixo dessa linhazinha aqui: 
----------------------------------------------- */
cole:

.sidebar .widget {
background: #ffffff; /* Fundo da sidebar */
box-shadow: inset 0 0 5px #e0dfdf, 0 0 4px #ccc; /* Sombra interna */
-webkit-transition-duration: .50s;
border-top: 6px solid #XXX; /* Cor da borda de cima */
border-bottom: 6px solid #XXX; /* Cor da borda de baixo */
}
.sidebar .widget:hover {
background: #ffffff; /* Cor da sidebar hover */
box-shadow: inset 0 0 30px #e4e2e2, 0 0 4px #ccc; /* Sombra interna hover */
border-top: 5px solid #XXX; /* Cor da borda de cima hover */
border-bottom: 5px solid #XXX; /* Cor da borda hover de baixo */
-webkit-transition-duration: .50s;

Gostaram??
Bem, que eu tenha visto, não tem nenhum blog que tem esse tutorial. 
Utilize a vontade!!

Beijos,
~Pâm

3 comentários:

  1. Nossa, bem legal ..
    Gostei , no próximo layout que vou tentar fazer, eu vou colocar isso :: então.. onde você faz o seu cabeçalho??

    ResponderExcluir
    Respostas
    1. Obrigada ^^
      Eu faço no Photoshop. É muito melhor do que no Photofiltre e no Photoscape.

      Excluir
  2. Muito obrigada pelo tuto amore!
    Me ajudou demais!
    minhas-confissoes-2012.bologspot.com

    ResponderExcluir

Informações Básicas de Comentários(IBC):
-Ler não mata, então leia o post antes de comentar
- Não serão aceitos comentários ofensivos.
- Aceito pedidos para seguir, se estiver seguindo o blog...
- Respondo e retribuo todos os comentários.


Obrigada por Comentar!!