16 de set. de 2014

Modelos Diferentes de Blockquotes

    
Bom dia queridos leitores do blog, como estão nessa linda semana de terça-feria? eu estou bem, mas um pouco cansada da rotina.. Falado sobre os números, eu estou achando a blogosfera um pouco mais animadinha nesses últimos dias, estou recebendo muitas visitas e fico muito feliz com a participação de vocês aqui no blog, Hoje eu estou sem coisas legais para vocês, acontece né?! Eu queria que o meu livro chaga-se logo ai poderíamos ter do que conversar, mas quando ele chegar, vou fazer uma postagem falando o que achei dele, mas deixando de BLA! BLA! BLA! Na postagem de hoje eu trouxe alguns modelos de blockquotes bem diferentes, mas um diferente fofo e legal, e eu espero que gostem, eu adorei os modelinhos, e é muito rápido e fácil de vocês instalar em seu blog, então vamos ver? beijos e até amanha!

Modelo 01



blockquote { margin: 1em 20px; padding:10px; background-image:url(http://i1221.photobucket.com/albums/dd461/kawaii_annyz/cutefondo2.png); border-left: 10px solid #EFE6FF; border-right: 10px solid #EFE6FF; border-top: 2px solid #EFE6FF; border-bottom: 2px solid #EFE6FF; color:#555555; border-radius: 10px; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} blockquote:hover { background:url(http://i1221.photobucket.com/albums/dd461/kawaii_annyz/cutefondo1.png); border-right: 10px solid #CAEFFF; border-left: 10px solid #CAEFFF; border-top: 2px solid #FFE1E4; border-bottom: 2px solid #FFE1E4; border-radius:30px; -webkit-box-shadow: 0px 0px 6px 4px #FFFAD8; -moz-box-shadow: 0px 0px 6px 4px #FFFAD8; box-shadow: 0px 0px 6px 4px #FFFAD8;}


Modelo 02



blockquote{ background: url(http://i1221.photobucket.com/albums/dd461/kawaii_annyz/cutefondo1.png) #fff; background-repeat: repeat; border-radius: 15px; -webkit-user-select: text; -moz-user-select: text; border: 1px dashed #C69FFF; padding: 25px 15px; color: #9C9C9C; box-shadow: inset 0px 0px 0px #D9F2FF,inset 0px 0px 0px #D9F2FF; -webkit-transition: 1.0s; -moz-transition: 1.0s; } blockquote:hover { box-shadow: inset 0px 14px 0px #FFE0EC,inset 0px -14px 0px #E2DEF9; -webkit-transition: 1.0s; -moz-transition: 1.0s; color: #555;}

Modelo 03



blockquote { background-image:url(http://i1221.photobucket.com/albums/dd461/kawaii_annyz/cutefondo1.png);padding: 5px; border-top: 1px dashed #4F4F4F; border-bottom: 1px solid #4F4F4F; border-left: 10px groove #FF60AF; colour:#FFFFFF; } blockquote:hover{ background-image:url(http://i1221.photobucket.com/albums/dd461/kawaii_annyz/moustache.png);background-position:bottom right; background-repeat:no-repeat; display:block; padding:5px; color:#CECEFF; border-left:12px double #00E3E3; border-top:2px dotted #000000; border-bottom:2px solid #FF95CA; border-right: 1px dashed #4F4F4F; -moz-border-radius: 25px 10px / 10px 25px; border-radius: 25px 10px / 10px 25px; -webkit-transition: 1.0s; -moz-transition: 1.0s;}

Modelo 04


/*** Blockquote por Only Dreams/ all-teardrop-is-a-waterfall ***/
blockquote {background: #ffcccc url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihKyA9OnhDrKGpmfLNBbW-LdaQlBaWyg3cQy4B5XqTD30dZLVMtQlRtFxQblI66r3CzlVNI7CIuTvuNAtEPm9NJk92-K9qvIvyWND1VXH_D18Afk3gOmJX9J1t3niSwvI07f7JgTEcwvzH/s1600/cora.png') no-repeat;border-radius:5px; border-bottom: 1px solid #DE9FB4;padding:10px 10px 10px 3.2em;font-size: 11px; color: #FFF; text-align: center; font-family:arial; }


Modelo 05




blockquote { margin: 1em 20px; padding:10px; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipCFZKZx6H4peatWgZZuEnm8AbtuhGhKt5j1_SCMrZr3ea1GZk4UqySgeVQgt4Kd8kyuYj5otkj4uXmFjNzXjJNlOg-yjgxf5wDnL41KzW8IBeITUqFubRLyXJWuxUHNoH61Gs38Dl6X08/s1600/download+(1).png); border-left: 8px solid #ffcccc; border-right: 8px solid #ffcccc; border-top: 2px solid #EFE6FF; border-bottom: 2px solid #EFE6FF; color:#555555; border-radius: 10px; -moz-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out;} blockquote:hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQTYfvF79oeO11Vs149Q2A_vt3GbSXWt9H3qj23_vbHh9QUPHXvhw-EOw8C_c4HVEkhz5XU1FyEaZ8sUQbWb9iTzVeyO2sw5UqLRAll-JI5fTn7AOuzmTPrU3qgJHpisx_oGNGHC-tn-CE/s1600/download.png); border-right: 10px solid #CAEFFF; border-left: 10px solid #CAEFFF; border-top: 2px solid #FFE1E4; border-bottom: 2px solid #FFE1E4; border-radius:30px; -webkit-box-shadow: 0px 0px 6px 4px #FFFAD8; -moz-box-shadow: 0px 0px 6px 4px #FFFAD8; box-shadow: 0px 0px 6px 4px #FFFAD8;}

Modelo 06


blockquote {
padding: 6px;
margin:10px;
Color: #000;
Background: #ffcccc;
border: 2px solid #332222;
border-radius: 10px;
}


Gente os Modelos 1, 2, 3 foram personalizados por mim, mas os códigos não são meus, são de autoria do Annyz Blog, se for usarem dê os créditos a ele.. Beijos!

36 comentários:

  1. seus posts sao sempre bem interessantes, adorei conhecer ;)

    www.tofucolorido.blogspot.com
    www.facebook.com/blogtofucolorido

    ResponderExcluir
  2. Adorei todos eles! Se eu chegar á criar um layout algum dia, virei pegar os blockquotes aqui.

    ~Kissus | http://ohedition.blogspot.com.br

    ResponderExcluir
  3. I love them all so cute! If only im good at this :(

    Visit my blog: www.sarahrizaga.blogspot.com

    ResponderExcluir
  4. Nossa, adorei as dicas!
    Vou usar no meu próximo layout!

    memorias-de-leitura.blogspot.com

    ResponderExcluir
  5. Eu ainda não sei usar isso, mas achei muito fofo e lindo! :)
    http://corujasemasas.blogspot.com.br/
    Beijos. <3

    ResponderExcluir
  6. Nossa que modelo lindos, adorei demais!

    ResponderExcluir
  7. Que modelinhos lindos,a não tinha visto seu novo layout está muito lindo <3
    http://cultivadoradepalavras.blogspot.com.br/

    ResponderExcluir
  8. amei o modelo 4 ta muito kawaii >.<
    Com carinho, Hina || Aishiteru em Contos ||

    ResponderExcluir
  9. Nossa adorei o último, mas em uma versão em hover ficaria melhor...
    amei o post ^.^

    Kissus | http://imaginandomais.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. é só trocar os códigos então.. beijos, que bom que gostou!

      Excluir
  10. Que fofos,adorei o 4º,com certeza vou usar no meu próximo lay :3

    thisismylifeoficial.blogspot.com.br

    ResponderExcluir
  11. Que blog lindo, adorei!
    Os Quotes são bem diferentes mesmo, bem legal :3
    Beijos
    Sonhando Acordada

    ResponderExcluir
  12. Gostei do modelo 4!

    Bitocas!
    www.likeparadise.com.br

    ResponderExcluir
  13. Terça feira é um dia entendiante para mim também, eu tive dois tempos de matemática juntos e eu odeio matemática SHUASHUA'. Gostei muito do modelo quatro, vou salvar aqui com certeza! O cinco também é bonito, mudaria apenas as cores u-u
    Beijos,
    tea-with-cake.net

    ResponderExcluir
  14. Que modelos lindos, talvez eu use no meu próximo layout. Adorei seu blog, muito bom.

    Beijos e fique com Deus,
    Quero Sonhar.

    ResponderExcluir
  15. Amei, os modelos são perfeitos.
    www.equalizando.com

    ResponderExcluir
  16. Muito lindos!! Tenho a certeza que quando eu fizer, ou pelos menos tentar, fazer o meu próprio layout vou usar mts tutos daqui <3

    Bjs,
    un--cover.blogspot.com

    ResponderExcluir
    Respostas
    1. Muito Obrigada Catarina, que bom que gostou.. fico muito feliz!

      Excluir
  17. Tenho uma queda por modelos de blockquote. Adoro fazê-los e ver os que os outros fazem. Os seus ficaram lindos.

    Beijos,
    www.nerd-absoluta.blogspot.com
    *Ps.: lembra-te que havia me pedido afiliação? Já lhe coloquei na elite.

    ResponderExcluir