Olá gatinhos, tudo bem? Sintam-se a vontade e sejam bem vindos ao meu cantinho, este bloguinho foi criado em julho de 2012 e até hoje é direcionado a área de html e css. E se desejarem algo não exitem e peçam pela ask! beijinhos, bye ♡

7.11.12

Sidebar com fundo hover

Oiee geléinhas de amora tudo bem?? Hoje vou ensinar para vocês como por efeito hover na sidebar igual aqui do blog. Vou mostrar como está os códigos da minha sidebar pelo html do meu modelo:

.sidebar h2{
background: #8B8989 url(http://static.tumblr.com/koam7dd/7wAmaylha/la__o_7.gif) no-repeat;
padding: 10px 0 10px 50px;
background-position: 7px 8px;
font-weight: 600;
margin-top: 9;
margin-bottom: 9px;
color: #FFF;
text-transform: uppercase;
font-size: 12px;
font-family: 'Lobster Two', cursive;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;     
}

Caso a de vocês não estiverem assim, estarão praticamente quase igual pois as vezes é uma coisa ou outra que muda nos códigos, independente de como está o código do corpo da sua sidebar, esse código hover funciona em quase todas as sidebar, até onde testei nas minhas, todas funcionaram. O código para fazer o efeito hover no fundo da sua sidebar é esse aqui:

.sidebar h2:hover {
background: #7FFFD4; ---/* cor do fundo ao passar o mouse */
color: #000; ---/* cor da fonte do título ao passar o mouse */
border-radius: 30px;
text-align: center;
border: 2px solid #696969; ---/* espressura, tipo e cor da bora */
color: #fff; ---/* cor da fonte do título */
-webkit-transition: 0.4s;
}

Aqui está as cores que eu uso na minha sidebar, mas vocês podem mudar as cores, o tamanho da borda em volta onde ficará o texto alinhado se é no meio, esquerda ou direita, cor da fonte e o tempo da transição do efeito. É isso meus amores, super fácil e com um efeito muito legal, eu vejo em outros blogs efeitos hovers nos títulos mas no fundo até agora não vi nenhum blog com esse efeito igual ao da minha sidebar. Beijos lindos e lindas espero que tenham gostado do tuto de hoje =)

16 comentários:

  1. Adorei o tutu, fica meuito lindo amei*OOOOO*

    ResponderExcluir
    Respostas
    1. Lindo neh? tbm acho super fofo esse efeito ;P

      Excluir
  2. Legal , vou utiliza-lo depois :)
    Pode seguir ?
    purpurinadelycadah.blogspot.com

    ResponderExcluir
  3. Adorei o tuto =)
    Muito bem explicadinho
    http://infinitoficticio.blogspot.com.br/

    ResponderExcluir
  4. Yo! Peço desculpas pela demora a responder, fiquei sem net por um tempo mais sim, eu aceito sim afiliação bems e ainda não decistiu pela demora t.t

    Ate de noitinha eu irei colocar lá na minha coluna. Fico feliz pela afiliação.

    ResponderExcluir
  5. Yo, já te cloquei lá nos meus afiliados

    ResponderExcluir
  6. Nyah amei o meu avatar *-*
    Hihi já estou seguindo e obrigada por seguir

    ResponderExcluir
  7. http://sonhosshoujos.blogspot.com.br/2012/11/selinho.html#comment-form

    ResponderExcluir
    Respostas
    1. Já respondi sobre seu selinho lindaaa obrigada <3

      Excluir
  8. Amei pode seguir???
    http://supervaidosa74.blogspot.com.br

    ResponderExcluir
  9. Eu estava louca atras desse tuto.Tentei fazer sozinha e a side ficou locona,mudou o back,desconfigurou toda!

    ~Seguindo
    cherrygo.blogspot.com

    ResponderExcluir
  10. Yoo
    Olá meu nome é Thais, bom já faz um bom tempo que ando tendo blogs mais fazer layout não sei muito bem, queria deixar um layout a meu gosto uma coisa minha mais não sei nada sobre o assunto queria saber se você fez algum tipo de curso o meu estilo de blog eu digo aparência é praticamente o mesmo gosto amei o blog muitoooooo , Adorei muito aqui e queria saber também como fazer um menu com imagens, e como fazer o slide que você fez ali em cima.
    Arigato Koh-chan!

    ResponderExcluir

Olá meus amores, os comentários devem ser direcionados somente ao blog e não a vida pessoal de ninguém! Qualquer dúvida peça pela Ask que responderei o mais rápido possível. Anônimo não adianta vir xingar pelos comentários que antes de mesmo de pensar em me ofender eles serão excluídos! Não gosto de tags, se quiser fazer fique a vontade mas não irei retribuir, não curto seguindo segue de volta =/ mas posso seguir se gostar realmente do blog, não julgo por layout ou por seguidores, avalio o blog e como disse se eu curtir é claro que sigo, afiliações? Peça nos comentários pois se pedir em outro lugar no caso páginas é bem provável que eu não veja! Então meus lindos espero que curtam cada cantinho do meu bloguinho e voltem sempre! kissus (*^3^)

LAYOUT E CODIFICAÇÃO POR ROH A. RAMOS OS DIREITOS ESTÃO RESERVADOS | Tecnologia do Blogger © 2017