• Tutoriais

    • Estilos Prontos para Blockquotes com Efeito Hover

    julho 02, 2014 Roberta
    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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyB7sa-hfZaaUjiYpzXVcgWmcZ9Aa3zoRh0Q7KXjpY9nhT_pXSp0Bv3I9q9hslT1jS_emjkB0Uc4Y6lKzXV8xkyeceHUInlVGZ82n4RAGo3GYoRNYeQms4tkcOV3lE9GhQhMOHS5W9uA4/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZ4PRnaIKmboYREnkyPhrcpqWIumqWCBHNA1-LaCGHnoMtJzupOWmsbFiZdAnHoTnX1PyBCKFbYBL6OZkMnqs-DHmVCQo2E1JfW4i27BeFowUsnhRWepfE3SLJwgJoFNEyf4NBUkiOF5g/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilznKXHcShi0fb-Ws0nDxs4KPOirvJ2wDXknnfBReBID_Aygg6S6atj5_bFJZ5oHCubljN8DJMgdRmwCQD6ZA8virs_OSeGeQelxN9EFo2M0wuI1T7XiDSgnR13oMXwN8AvtS2BVjweLk/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTH6EG6aRaUhOm-M0cdRgw3gi0YaF2kwpIo0hwePfZY4kEtvQ6fCWkuoGiw9FBpdllHtwo77ccRyAa4yeM5bPSYb0EhDsatIeue_mcRrhOFpjafIzcjtwMcDrHFO0GxHEEVf_sOPhc1qQ/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjC1cGKwvoOwbUeAoMuWf0jM0L6-LpF05J6dKICsyVazvXAh1J-QPzYqW8Uq2KJAXcGM-UdHVlWeVFnCav6VH0Q7hoz1V81ASr4rJY75Ib5cfRhpaikrbU3BWQzAacKsLl3wxxw2b9TrA8/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.



    Talvez vc goste:

    Postar um comentário

    7 Comentários

    1. Unknown02 julho

      Obrigada pelas dicas amore!

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

      ResponderExcluir
    2. ✰Ester Leme02 julho

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

      arigato!

      ResponderExcluir
      Respostas
      1. Roberta03 julho

        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. Caroline02 julho

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

      Sarang Cute

      ResponderExcluir
    4. Karoline Teodoro03 julho

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

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

      ResponderExcluir
    5. Roberta03 julho

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

      ResponderExcluir
    6. annyz03 julho

      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 - Deviantart

    © Copyright , Reino Kawaii. All rights Reserved. | ThemeDaddy Best Blogger Themes

    up