26 de jan de 2013

Borda Hover na Sidebar


Hey!

Só aqui os blogs tão demorando séculos pra carregar? TT_TT
Isso tá dificultando um pouco o teste das coisas, masok.

Eu to muito feliz porque acabei de criar um tutorial muito fera, e acho que vocês vão gostar também! Sabe a sidebar do Kawaii World, que quando você passa o mouse a borda muda de cor e a sombra interna fica maior? Então, ela não postou um tutorial no blog dela de como fazer isso, mas eu acabei descobrindo! ~feel like a boss~


Primeiro, vá no HTML do seu blog e procure por ".sidebar .widget {". Você deve achar um trecho mais ou menos como esse: 

/* Widgets
----------------------------------------------- */
.sidebar .widget {
width:100% !important;
background:#fff;
border-bottom:5px #c9dbfd solid;
border-top:5px #c9dbfd solid;
margin:15px 0 !important;
border-radius:0 0 0 0;
padding:10px;
box-shadow: inset 0 0 16px #eee, 0 0 5px #ccc;
-webkit-transition-duration: .50s;
overflow:hidden
}

Após ele, coloque esse código:


.sidebar .widget:hover {
width:100% !important;
background:#fff;
border-bottom:5px #fdc9dd solid;
border-top:5px #c9dbfd solid;
margin:15px 0 !important;
border-radius:0 0 0 0;
padding:10px;
box-shadow: inset 0 0 16px #eee, 0 0 5px #ccc;
-webkit-transition-duration: .50s;
overflow:hidden
}

As duas primeiras partes que estão negritadas, é a cor que vai aparecer na borda ao passar o mouse em cima dela. E as duas últimas são cor que a sombra vai assumir ao passar o mouse. E o resto você descobre! ^^

Eu sou muito ruim pra explicar, qualquer dúvida pode perguntar na ask.
Pode repassar, mas dê os devidos créditos!
Espero que tenham gostado, kissus! \o


2 comentários:

• REGRAS DOS COMENTÁRIOS •

Nada de "Seguindo! Segue de volta?" ou "Legal. Visite o meu blog". Faça isso, e estará me convidando a NÃO ver o seu blog!
→ Deixe o link do seu blog para ter a visita retribuída, mas não abuse!
→ NÃO façam requests pelos comentários. Utilize a Ask.
→ Comente apenas sobre a postagem!
→ Sugestões e críticas construtivas são bem vindas, ofensas não.