25/01/2013

Tutorial: Sidebar com bordas Hover

||

Yo! Minhas panquecas ohh panquecas...rs Hoje eu trago um tutu que meio que me virei em arrumar, então se usarem creditem ok? Eu acabei estraguei o novo layout tentando arrumar esse bagulho doido, então por isso da demora em arrumar o blog, mas consegui criar uma sidebar em efeito hover!!! Weeeee Caso queiram saber como se faz  basta continuar lendo a postagem.
Vá ate seu HTML então use o atalho Ctrl+F para procura esse trechinho:

/* Widgets

Abaixo dele vai aparecer esse codigo:

.sidebar .widget {

Então abaixo dele adicione esse codigo, detalhe se você já tiver uma sidebar personalizada remova ela antes e então coloque esse codigo:

background: #CorDoFundo;
font-family: calibri; /*FONTE*/
font-size: 10px; /*Tamanho da fonte*/
color: #CorDaFonte;padding: 10px; /*Não modifique aqui*/
border: 10px solid #CorDaBorda; /*BORDA*/border-radius: 5px 50px 5px 50px; /*Bordas arredondadas*/ -webkit-transition-duration: 1.50s; /*duração da transição*/ }

.sidebar .widget:hover {background:#FUNDO HOVER;border: 10px solid #BORDA HOVER ;border-radius: 50px 5px 50px  5px; /*Bordas arredondadas*/}

Agora se quiser uma sidebar mais personalizada igual a minha, use esse codigo e altere as cores, eu não arrumei o título apenas personalizei a sidebar:

background: #fff;font-family: calibri; /*FONTE*/
color: #fff;
padding: 10px; /*Não modifique aqui*/
border-top: 5px solid #COR DA BORDA NORMAL;
border-bottom: 5px solid #COR DA BORDA NORMAL;
box-shadow: inset 0 0 15px #E3E3E6, 0 0 3px #ccc;
-webkit-transition-duration: 1.50s; /*duração da transição*/ }

.sidebar .widget:hover {
background:#fff;
border-top: 5px solid #COR DA BORDA HOVER;
border-bottom: 5px solid #COR DA BORDA NORMAL HOVER;
box-shadow: inset 0 0 15px #D2D2D2, 0 0 3px #ccc;
}

13 comentários:

  1. Bem legal esse efeito, eu quero fazer no próximo lay, tomara q eu consiga, parece bem fácil!
    Beijokass
    Fer--> RetardadasDaNet.blogspot.com
    Twitter: @RetardadasDaNet

    ResponderExcluir
  2. awwwwwwwwwwwwwwwwwwwwwwwwwn
    amei o tutorial, e adorei seu layout *-*
    seguindo ~
    Almost 18

    ResponderExcluir
    Respostas
    1. Fico contente que tenha gostado ^^
      E obrigada por seguir

      Excluir
  3. O primeiro , ás vezes funciona , outras não :( , vai entender , né ? Bem legal !

    ResponderExcluir
    Respostas
    1. Yo Ammy, isso aconteseu varias vezes quando estava arrumando depois fui observa que tinha pequenos erros no meu layout, por isso conselho a colocar ele primeiro antes de criar todo layout

      Excluir
  4. More, como faço para colocar em cima e embaixo da area de comentarios?

    ResponderExcluir
    Respostas
    1. Yo Julia você quis dizer area das postagens? Se for é facil bom se seus codigos forem em .main-inner.column-center-inner { arrume normalmente e então depois abaixo crie um em hover começando com .main-inner .column-center-inner:hover { coloque os mesmos codigos do anterios só mudando as cores e bordinhas.

      Excluir
  5. Amei o tuto... Fica super legal e deu certo vlw :*
    minhas-cofissoes-2012.blogspot.com

    ResponderExcluir
    Respostas
    1. Que bom, fico contente que tenha dado certo. Beijos linda

      Excluir
  6. Achei muito lindo *--*

    ResponderExcluir
  7. Obrigada pelo tuto, me ajudou muito.
    http://mythings2.blogspot.com.br/

    ResponderExcluir

Hi guys!!!!
Hey aqui é Wendy, blogueira desde 2010! Viciada em animes, amante de livros e adora ver séries! Criei esse cantinho na intenção de ajudar na criação e personalização de blogs e sites.
Wattpad Facebook Tumblr Instagram