Follow Us @soratemplates

quarta-feira, 2 de julho de 2014

Estilos Prontos para Blockquotes com Efeito Hover

Oie...Trouxe mais alguns modelinhos para blockquotes com efeito quando se passa o mouse. Basta copiar o código que preferir e colar acima de /b:skin em seu HTML.
Modelo Rosa

 blockquote{
    padding: 20px;
    font-size: 11px;
    font-family: 'Open Sans', sans-serif;
    color: #FFADAD ;
    text-align: justify !important;
    text-shadow: 0px 1px 1px #FF8989;
    display: block;
    border-radius: 2px 2px 2px 2px;
    -webkit-box-shadow: 0 1px 4px
     rgba(216, 86, 86, 0.3), 0 0 40px
     rgba(243, 88, 88, 0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;    box-shadow: 0 1px 4px
     rgba(216, 86, 86, 0.3), 0 0 40px
     rgba(243, 88, 88, 0.1) inset;
      background-color: #fee;
  background-image: url(http://1.bp.blogspot.com/-zZxLNYxh5E8/UCE7HjSsx5I/AAAAAAAAC_8/zFS1Vzuviiw/s1600/wvpl4z.gif);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 0px 0px;
  -moz-transition:all 1s;
  -webkit-transition:all 1s;
  -o-transition:all 1s;
  transition:all 1s;
}
blockquote:hover {
    background-position: right 50%;
    background-size: 20px 20px;
} 

Modelo Azul

 blockquote{
    padding: 20px;
    font-size: 11px;
    font-family: 'Open Sans', sans-serif;
    color: #9DDCFF ;
    text-align: justify !important;
    text-shadow: 0px 1px 1px #CDE3FF;
    display: block;
    border-radius: 2px 2px 2px 2px;
    -webkit-box-shadow: 0 1px 4px
     rgba(86, 159, 216, 0.3), 0 0 40px
     rgba(181, 219, 255, 0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;    box-shadow: 0 1px 4px
     rgba(86, 159, 216, 0.3), 0 0 40px
     rgba(181, 219, 255, 0.1) inset;
      background-color: #EEEFFF;
  background-image: url(http://4.bp.blogspot.com/-6O0K1FTMd58/UCE7G-cpm3I/AAAAAAAAC_s/KJJ3HosRTlc/s1600/tumblr_m89suqJSmm1qdlkyg.gif);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 0px 0px;
  -moz-transition:all 1s;
  -webkit-transition:all 1s;
  -o-transition:all 1s;
  transition:all 1s;
}
blockquote:hover {
    background-position: right 50%;
    background-size: 20px 20px;
} 

Modelo Verde

 blockquote{
    padding: 20px;
    font-size: 11px;
    font-family: 'Open Sans', sans-serif;
    color: #5FFAE1 ;
    text-align: justify !important;
    text-shadow: 0px 1px 1px #79D6C0;
    display: block;
    border-radius: 2px 2px 2px 2px;
    -webkit-box-shadow: 0 1px 4px
     rgba(21, 241, 250, 0.3), 0 0 40px
     rgba(173, 255, 255, 0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;    box-shadow: 0 1px 4px
     rgba(21, 241, 250, 0.3), 0 0 40px
     rgba(173, 255, 255, 0.1) inset;
      background-color: #EEFDFF;
  background-image: url(http://3.bp.blogspot.com/-GWNBXVmfq4c/UCE7BejTNwI/AAAAAAAAC-M/HH0gdOxr5zs/s1600/tumblr_m89rec8DYB1qdlkyg.gif);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 0px 0px;
  -moz-transition:all 1s;
  -webkit-transition:all 1s;
  -o-transition:all 1s;
  transition:all 1s;
}
blockquote:hover {
    background-position: right 50%;
    background-size: 20px 20px;
} 

Modelo Lilás

 blockquote{
    padding: 20px;
    font-size: 11px;
    font-family: 'Open Sans', sans-serif;
    color: #F4BBF8 ;
    text-align: justify !important;
    text-shadow: 0px 1px 1px #F9BAFF;
    display: block;
    border-radius: 2px 2px 2px 2px;
    -webkit-box-shadow: 0 1px 4px
     rgba(255, 184, 235, 0.3), 0 0 40px
     rgba(218, 56, 212, 0.1) inset;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;    box-shadow: 0 1px 4px
     rgba(255, 184, 235, 0.3), 0 0 40px
     rgba(218, 56, 212, 0.1) inset;
      background-color: #FCEEFF;
  background-image: url(http://3.bp.blogspot.com/-b3mku5gUVoQ/UCE7GS5LazI/AAAAAAAAC_g/ByNotNm5_lo/s1600/tumblr_m89st7w2bh1qdlkyg.gif);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 0px 0px;
  -moz-transition:all 1s;
  -webkit-transition:all 1s;
  -o-transition:all 1s;
  transition:all 1s;
}
blockquote:hover {
    background-position: right 50%;
    background-size: 20px 20px;
} 

Modelo Simples

 blockquote{
    padding: 20px;
    font-size: 11px;
    font-family: 'Open Sans', sans-serif;
    color: #D8D8D8 ;
    text-align: justify !important;
    text-shadow: 0px 1px 1px #E2E1E2;
    display: block;
    border-radius: 2px 2px 2px 2px;
    border: 2px dashed #D8D8D8;
    background-color: none;
  background-image: url(http://1.bp.blogspot.com/-io7sDShUaY4/UCE7BstyGzI/AAAAAAAAC-U/hI1wx-TeHXc/s1600/tumblr_m89rfyFLyw1qdlkyg.gif);
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 0px 0px;
  -moz-transition:all 1s;
  -webkit-transition:all 1s;
  -o-transition:all 1s;
  transition:all 1s;
}
blockquote:hover {
    background-position: right 50%;
    background-size: 20px 20px;
} 

Mais estilos: blockquotes coloridos, modelo para citação ou nota kawaii e blockquote e fieldset.
Código base: Vagabundia/ThemeShock.

7 comentários:

  1. Obrigada pelas dicas amore!

    http://dangerouslittleblackstar.blogspot.com.br/

    ResponderExcluir
  2. aaammm...dá pra explicar pra que serve isso Roberta e onde eu coloco por favor...

    arigato!

    ResponderExcluir
    Respostas
    1. Só copiar um dos códigos e colar acima de /b:skin no HTML do seu blog. Para usar clique em Blockquote/Citação no editor de posts, aquelas duas aspas que aparecem perto dos marcadores.

      Excluir
  3. Todos os modelos são lindos!!
    Gostei muito do lilás.

    Sarang Cute

    ResponderExcluir
  4. Que lindoooooos !!!
    e achei seu blog a coisa maaaaais lindaaa!! Seguindo!! Beijos

    http://apequenaka.blogspot.com.br/

    ResponderExcluir
  5. Muito obrigada!!! Fico super contente que tenham gostado e que estejam aqui<3
    Beijus ;3

    ResponderExcluir
  6. Estan preciosos <3 gracias!!

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart