Modelo para Citação ou Nota Kawaii

Olá! Hoje eu trouxe para vocês um estilo de blockquote, citação ou nota kawaii que encontrei no Codrops.
Achei super fofo, porque se trata de um balão de fala com a foto do autor abaixo, fácil, por usar apenas HTML e CSS, e útil para quando quiser citar algo na postagem, comentar alguma coisa, explicar, dar saudações, enfim, é bem fofinho! Fica mais ou menos assim:

Eu... eu... nem eu mesmo sei, nesse momento... eu... enfim, sei quem eu era, quando me levantei hoje de manhã, mas acho que já me transformei várias vezes desde então.

Eu disse mais ou menos porque meu blockquote é personalizado já; se o seu também é, o balão vai ganhar os estilos dele. E no código você poderá personalizar como preferir.

 
Exemplo de como ficará se não houver personalização no blockquote

1. Acima de ]]></b:skin> cole isso:
.ct-wrap {/*area geral*/
    width: 300px;
    margin: 20px auto;
    padding: 20px;
    position: relative;
}
 
.ct-wrap p{
    margin: 0;
    padding: 0;
}
 
.ct-wrap blockquote {
    margin: 0;
    padding: 0;
    position: relative;
}
 
.ct-wrap cite {
    font-style: normal;
}
.ct-balloon {
    width: 500px;
}
 
.ct-balloon blockquote{/*area do balao*/
    background: #fff;
    padding: 30px;
    border-radius: 5px;
    box-shadow:
        inset 0 2px 0 rgba(255, 153, 211, 0.7),
        -5px -4px 25px rgba(0, 0, 0, 0.3);
}
/*seta*/
.ct-balloon blockquote:after,
.ct-balloon blockquote:before  {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}
 
.ct-balloon blockquote:after  {
    border-top-color: #ffffff;
    border-width: 10px;
    left: 65%;
    margin-left: -10px;
}
 
.ct-balloon blockquote:before {
    border-top-color: #ffffff;
    border-width: 11px;
    left: 65%;
    margin-left: -11px;
}
.ct-balloon blockquote p {/*texto dentro do balao*/
    font-family: 'Milonga', cursive;
    font-size: 24px;
    color: #ff91da;
    line-height: 40px;
    text-indent: 100px;
    position: relative;
}
.ct-balloon blockquote p:before{/*aspas*/
    content: '201C';
    font-family: serif;
    font-style: normal;
    font-weight: 700;
    position: absolute;
    font-size: 175px;
    top: 0px;
    left: -105px;
    color: rgba(255, 153, 211, 1);
    text-shadow: 7px 14px 10px rgba(0, 0, 0, 0.1);
}
/*autor*/
.ct-balloon .ct-attribution {
    text-align: right;
    padding: 20px 100px 20px 20px;
    position: relative;
}
.ct-balloon .ct-thumb {/*foto do autor*/
    display: block;
    width: 70px;
    height: 70px;
    border: 5px solid #fcc;
    border-radius: 50%;
    background: url(URL-DA-IMAGEM) no-repeat center center;
    position: absolute;
    right: 10px;
    bottom: 5px;
    box-shadow:
        inset 1px 1px 4px rgba(0,0,0,0.5),
        0 2px 3px rgba(0,0,0,0.6);
}
.ct-balloon .ct-author{/*texto e links do lado do autor*/
    font-family: 'Milonga', cursive;
    font-size: 18px;
    color: rgba(255, 199, 255, 1);
    text-shadow: 0 1px 1px rgba(255,255,255,0.7);
}
 
.ct-balloon cite a{
    font-family: 'Milonga', cursive;
    color: #fcc;
    text-shadow: 0 1px 1px rgba(0,0,0,0.3);
}
 
.ct-balloon cite a:hover{
    color: rgba(255, 199, 255, 1);
    text-shadow: 0 1px 1px rgba(255,255,255,0.7);
}

Personalize como preferir; aqui no Reino Kawaii tem várias tabelas de cores. Se quiser usar a fonte do modelo, acrescente abaixo de <head> isso:
<link href='http://fonts.googleapis.com/css?family=Milonga' rel='stylesheet' type='text/css'/>
2. Onde desejar que apareça seu balão, cole isso:
<div class="ct-wrap ct-balloon">
    <div class="ct-thumb"></div>
    <blockquote cite="SEU-LINK-AQUI">
        <p>SEU TEXTO AQUI</p>
    </blockquote>
    <div class="ct-attribution">
        <p class="ct-author">UM TITULO</p>
        <cite><a href="UM-OUTRO-LINK">TITULO DESSE LINK</a></cite>
    </div>
</div>

E pronto! Espero que gostem ^-^
Créditos: Codrops.






Postar um comentário

31 Comentários

  1. Respostas
    1. mas eu não estou conseguindo poderia me ajudar? eu adorei d+ o modelo mas não consigui:c

      Excluir
  2. Bem legal o modelo, mas confesso que eu não entendi nads ._.

    ResponderExcluir
    Respostas
    1. Super facinho ^^ Se usar logo você vai entendendo cada trecho :3

      Excluir
    2. kkk...sabe que eu fui,peguei o código mais não deu em nada,o blog não mudou,bbaahh acho que vou apagar :'(

      Excluir
    3. Aqui tá funcionando, inclusive o primeiro exemplo do post é o próprio código em ação. Para aparecer em algum lugar do blog, tem que usar o segundo código.

      Excluir
  3. Owwn que fofo ^^ vou usar no próximo template rsrs

    Reinocorderosa.blogspot.com

    ResponderExcluir
  4. RÔ (posso te chamar assim ? ) as imagens estão falhando :Cc
    beijinhoss amo seu blog, acesso todo santo dia !
    http://chuvasdeverao-oficial.blogspot.com.br/

    ResponderExcluir
    Respostas
    1. Pode ^^
      As do blog? Aqui estão normais...
      Bjus

      Excluir
    2. Agora sim aqui está dando para ver rsrs

      Excluir
    3. Oiee te mandei um presentinho aqui está o link http://4.bp.blogspot.com/-qp--Pz-gkFg/UcH1F1SIoXI/AAAAAAAABUA/srzzAzuW0cE/s320/carita_kawaii_png_by_beluusgeditions-d4rn41j.png

      Excluir
    4. Obrigada :3 Beijus...

      Excluir
  5. Lindos :3

    http://cantinhodaevilyn.blogspot.com.br/

    ResponderExcluir
  6. Obrigada e beijus para todo mundo ;3

    ResponderExcluir
  7. Amei, bem fofinho^^
    Kissus Roberta-chan *3*
    Amo seu blog, o acompanho a muito tempo^^

    ✰ My Prince-Sama ✰

    ResponderExcluir
    Respostas
    1. Ai que fofa! Super obrigadooo!!! Sua presença me alegra muito <3

      Excluir
  8. Anônimo20 junho

    ooiii!!!!!!! seu blog é tão kawaii (o titulo ja diz tudo kekeke)......bom, primeiramente vim me desculpar por comentar uma coisa que não tem a ver com o seu post.....sei que deve ter dado muito trabalho pra vc fazer este post e depois vir alguém e comentar uma coisa q num tem nada a ver...rsrsrs... mas não se preocupe eu li seu post e gostei muito da maneira e o modo como vc explica!!...ah... eu éh eu ia esquecendo, eu vim aqui pra avisar q eu estou usando aquele template q vc fez..... visite meu blog e veja lá:http://cantinho-otakukawaii.blogspot.com.br/
    (acabei de criar este blog, estou aberta a sugestões)
    muitoo lindim o template... eu tenho outro blog, aqui o link pra você visitar se quizer:
    http://marshmallowdekpop.blogspot.com.br/

    ahh...e se você quiser seguir meu blog vc pode!!!! mas isso fica a seu critério!!!
    bjsss e mil perdões...kkkk

    ResponderExcluir
    Respostas
    1. Fique a vontade ^^ Este espaço é pra gente conversar mesmo sobre várias coisas :3
      Desejo muito sucesso para você e muito obrigada pelo convite, pela presença e pelo comentário super kawaii!!!
      Beijus <3

      Excluir
  9. É super fácil e útil mesmo, super simples o tutorial, e fica super kawaii o resultado ;3

    Amei!

    Adolescente Nerd

    ResponderExcluir
  10. Oi linda!
    achei o seu blog a coisinha mais fofa do mundo e já estou seguindo :D
    Beeeijos!

    http://princessjujube.blogspot.com.br/

    ResponderExcluir
  11. parabenss blog lindo!!

    ilhakawaii.blogspot.com

    ResponderExcluir
  12. aah, super bonitinho, né?
    Tinha que ser do Codrops, sempre tem muita coisa massa lá *-*

    ~~
    Roberta, eu vim pedir sua ajuda. Tentei seguir seu tutorial que usa um cabeçalho diferente para cada categoria, mas quando eu clico nos links dos marcadores o cabeçalho fica oculto, não aparece. tentei tirar o display:none; e apareceram todos de uma vez só! auhehuaehahue
    Lembrando que eu consegui fazer tranquilamente a primeira parte que é de dois cabeçalhos (home e páginas internas). Você sabe o que pode ser?
    Beijo ;**

    ResponderExcluir
  13. Aaaaah! Por favor me socorre!!
    Eu tenho 3 blogs e adoro decora-los, mas um estilo novo ficou no "Editar HMTL" até no meu antigo blog, e agora eu não acho de maneira alguma o "]]>" nem usando o F3, nem procurando na forma antiga mesmo (só tentando ler os codigos um por um.... Y.Y) Por favor, me ajuda...

    ResponderExcluir
  14. amei! super fofas as blockquotes! E esse blog gente, que coisa mais linda çç'

    http://www.asianfashionist.blogspot.com.br/

    ResponderExcluir
  15. Que lindo Roooôoo
    Vou tentar no meu blog assim que tiver com um pouco de paciencia pra personalizarr!!! hahaaha

    Aliás, eu finalizei as postagens com o LL e estou com blog novo :D

    o RK tá lindoooo *0*

    mil beijos :3

    ResponderExcluir
  16. Parabens seu blog é lindo e seus posts são ótimos!
    adolechique,blogspot,com

    Beijos!

    ResponderExcluir
  17. Amei, super cute! Bem fofinho, o tutorial é ótimo também! <33'

    Estou seguindo aqui, seu blog é lindo, o lay é super fofo! :)

    Beijos :*
    BLOG ~~> Kiss of Gloss

    ResponderExcluir
  18. Ameei, super lindo !! Vou ver se da pra fazer no meu !


    http://amigaotome.blogspot.com.br/

    ResponderExcluir
  19. Muito fofo, legal para aqueles layouts mais kawaiis, amei.

    Dream High~

    ResponderExcluir
  20. Anônimo23 julho

    nossa que legal esse efeito*
    http://fabiolucas92.blogspot.com.br/

    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

up