• - ChapStique -

    - ChapStique -

  • - Crouton -

    - Crouton -

  • - Nadaddy -

    - Nadaddy -

  • - Fatty -

    - Fatty -

  • - Hollywood -

    - Hollywood -

28 de janeiro de 2013

Blockquote com Efeito Hover


Oi de novo!

Bem, será que não tem nada para postar além de tutoriais? Agora vou ensinar a colocar
aquela paradinha que nunca vou conseguir escrever o nome sem copiar e colar um blockquote
com efeito hover, que você pode personalizar facilmente, e também é muito fácil de colocar.
Preview dele aqui, mas se colocarem no blog e personalizarem, 
garanto que não vão se arrepender! Não lembro onde eu vi esse tutorial. Se for do 
seu blog, comente! Então, chega de papo e vamos ao tutorial!

1 - Procure por:
]]></b:skin>
2 -  Em cima desse código cole o código abaixo:
blockquote {
 border-right: 10px solid #A020F0;
border-left: 10px solid #A020F0;
background-color: #f5f2f3;
padding: 10px; font-size: 12px;
color: #000;
text-align: center;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #d2d1d3;
}
blockquote:hover {
 border-right: 30px solid #00BFFF;
border-left: 30px solid #00BFFF;
color: #000;
box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #d2d1d3;
Vamos entender o código para se você quiser fazer mudanças:

Código da borda á direita:
border-right: 10px solid #A020F0; 
 Código da borda á esquerda:
border-left: 10px solid #A020F0;  
Código do fundo:
background-color: #f5f2f3; 
Código da fonte:
color: #000; 
Código da cor da fonte e da borda quando passa o mouse:
box-shadow: inset 0 0 15px #ecebeb, 0 0 5px #d2d1d3; 
Espero que tenham gostado de mais esse tutorial!




16 comentários:

  1. Oi, você aceita TAGs? Tem uma pra vc lá no meu blog:
    http://sorrisomet4lico.blogspot.com.br/2013/01/tag-recebida-do-world-of-teens.html
    Beijos :)

    ResponderExcluir
    Respostas
    1. Eu acho que o blog aceita sim! =)

      Excluir
    2. Aceitamos claro :) já estou lá no seu blog para ver :3

      Excluir
  2. Adorei o tutorial!

    Beijos!
    http://productions-ofdreams.blogspot.com.br/

    ResponderExcluir
  3. flor, fiz um preview :3 espero que tenha gostado, editei e coloquei o link do preview ^^

    ResponderExcluir
  4. Que lindo o blockquote :333
    Amei o efeito <3
    Adorei seu blog, principalmente minha cor favorita por todo lado u.u (azul)
    Obrigada pela visita! ♥

    Mississippi Queen ♥

    ResponderExcluir
  5. amei o tutorial, super kawaii o resultado e diferente ^.^

    ResponderExcluir
  6. achei o maximo o tutorial! estou seguindo!

    ResponderExcluir
  7. KKKKKK também não sei escrever o nome disso.Achei legal o efeito.

    overdosedeloucura.blogspot.com

    ResponderExcluir