• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

9 de dezembro de 2012

Blockquote Hover

Yo ~!
Antes de tudo,quero pedir desculpas por não ter postado esses dias,mais é que eu estou muito ocupada
e ainda por cima com muitas coisas para fazer,então,me desculpem mesmo.

Trouxe um tutorial de como deixar seu blockquote em hover,quero das os créditos para o Vodka e Coca.
vejam como vai ficar com o efeito hover 
Bora para o tutorial?
Vá em modelo  editar html  e procure por ]]></b:skin>  depois coloque esse codigo acima:
blockquote { -moz-border-radius: 4px; /* Borda arredondada */ -webkit-border-radius: 4px; /* Borda arredondada */ border: 3px solid #COR; /* Cor e tamanho da borda colorida */ -webkit-transition: 0s linear; -webkit-transition: opacity 0.6s linear; -webkit-transition: all 0.1s linear; /* Velocidade da transição */ -webkit-transition: all 0.1s linear; /* Velocidade da transição */ -moz-transition: all 0.1s linear; /* Velocidade da transição */ transition: all 0.1s linear; /* Velocidade da transição */ padding: 5px; /* tamanho do blockquote */ background: #COR; /* Background */color: #000000; /* Cor da fonte */font-family:century gothic;font-size: 13px; /* tamanho da fonte */ text-align: justify; /* alinhamento do texto */ } blockquote:hover {  -webkit-transform: scale(1.01); /* efeito "scale" */ -moz-transform: scale(1.01); /* efeito "scale" */ border: 3px solid #COR; /* Cor e tamanho da borda colorida hover */ padding: 7px; /* tamanho do blockquote hover */ background: # COR; /* Background em hover */ }
Já está tudo no codigo,quando vocês mudarem as cores podem salvar ;3 

27 comentários:

  1. tuto muito util, obrigada por disponibilizar ele :)
    beijoo
    iam-a-broken-rose.blogspot.pt

    ResponderExcluir
  2. Tuto muito lindo e perfeito né? Adorei, que pena :c o que anda acontecendo? Eu ultimamente venho faltando inspirações kkkk

    jovenclube(.blogspot.com.br)

    ResponderExcluir
  3. Acho esse tutorial muito útil na hora de fazer um layout, é muito lindo. Beijos ^^

    the-kawaii-smile (visita?)

    ResponderExcluir
  4. Ótimo tutorial, vim avisar que o questão de opinião está de novo design! Já que o A.N é um dos afiliados

    ResponderExcluir
  5. lindo esse blockquote !!
    bjjs
    noisconectados.blogspot.com.br

    ResponderExcluir
  6. Põe kawaii nisso ^^
    Bem interessante este tutorial, hehe

    Abraços,
    Revolução Nerd

    ResponderExcluir
  7. Fica super lindo.

    overdosedeloucura.blogspot.com

    ResponderExcluir
  8. Olá gatona =) Tudo bem ?

    Nossa adorei o tuto!! fofo!

    http://quero-ser-ryca.blogspot.com.br

    e Obrigada pela visita! adorei! volte sempre tá!?

    bjãoooooo

    ResponderExcluir
  9. Que coisa mais doce seu blog!! Não sei como caí nessa pagina, mas adorei. Parabéns lindona.
    Beijocas estaladas.

    ResponderExcluir
  10. Nossa amei o tutorial e com certeza vou usar !
    Amei seu blog fofa , cai aqui sem querer ( que sorte ashuashu ) seu blog é perfeito amei demais , lindãão ele beijoos fofa seguindo


    lorhannyschneider|blogspot.com

    ResponderExcluir
  11. Adorei o tuto, muito legal *-*

    help-adolecentro.blogspot.com.br/

    ResponderExcluir
  12. Vejo esse blockquote em muitos blogs e é lindo! Adoro aplicar esse efeito "shadow-inset" no meu *.*

    Beijos ♥ Quinze Dilemas

    ResponderExcluir
  13. Oi anjo! Que blog divo, amo aqui demais! O JPT está reabrindo novas vagas para afiliação e eu gostaria muito se seu blog estivesse participando... Se quiser participar confira o post e se inscreva viu! Quero ver seu blog lá ok? Beijos

    http://japassoudotempo.blogspot.com.br/2012/12/aviso-das-afiliacoes-importante.html#more

    ResponderExcluir