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.
Que legal :3
ResponderExcluirmas eu não estou conseguindo poderia me ajudar? eu adorei d+ o modelo mas não consigui:c
ExcluirBem legal o modelo, mas confesso que eu não entendi nads ._.
ResponderExcluirSuper facinho ^^ Se usar logo você vai entendendo cada trecho :3
Excluirkkk...sabe que eu fui,peguei o código mais não deu em nada,o blog não mudou,bbaahh acho que vou apagar :'(
ExcluirAqui 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.
ExcluirOwwn que fofo ^^ vou usar no próximo template rsrs
ResponderExcluirReinocorderosa.blogspot.com
RÔ (posso te chamar assim ? ) as imagens estão falhando :Cc
ResponderExcluirbeijinhoss amo seu blog, acesso todo santo dia !
http://chuvasdeverao-oficial.blogspot.com.br/
Pode ^^
ExcluirAs do blog? Aqui estão normais...
Bjus
Agora sim aqui está dando para ver rsrs
ExcluirOiee 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
ExcluirObrigada :3 Beijus...
ExcluirLindos :3
ResponderExcluirhttp://cantinhodaevilyn.blogspot.com.br/
Que fofinho!
ResponderExcluirObrigada e beijus para todo mundo ;3
ResponderExcluirAmei, bem fofinho^^
ResponderExcluirKissus Roberta-chan *3*
Amo seu blog, o acompanho a muito tempo^^
✰ My Prince-Sama ✰
Ai que fofa! Super obrigadooo!!! Sua presença me alegra muito <3
Excluirooiii!!!!!!! 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/
ResponderExcluir(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
Fique a vontade ^^ Este espaço é pra gente conversar mesmo sobre várias coisas :3
ExcluirDesejo muito sucesso para você e muito obrigada pelo convite, pela presença e pelo comentário super kawaii!!!
Beijus <3
É super fácil e útil mesmo, super simples o tutorial, e fica super kawaii o resultado ;3
ResponderExcluirAmei!
Adolescente Nerd
Oi linda!
ResponderExcluirachei o seu blog a coisinha mais fofa do mundo e já estou seguindo :D
Beeeijos!
http://princessjujube.blogspot.com.br/
parabenss blog lindo!!
ResponderExcluirilhakawaii.blogspot.com
aah, super bonitinho, né?
ResponderExcluirTinha 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 ;**
Aaaaah! Por favor me socorre!!
ResponderExcluirEu 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...
amei! super fofas as blockquotes! E esse blog gente, que coisa mais linda çç'
ResponderExcluirhttp://www.asianfashionist.blogspot.com.br/
Que lindo Roooôoo
ResponderExcluirVou 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
Parabens seu blog é lindo e seus posts são ótimos!
ResponderExcluiradolechique,blogspot,com
Beijos!
Amei, super cute! Bem fofinho, o tutorial é ótimo também! <33'
ResponderExcluirEstou seguindo aqui, seu blog é lindo, o lay é super fofo! :)
Beijos :*
BLOG ~~> Kiss of Gloss
Ameei, super lindo !! Vou ver se da pra fazer no meu !
ResponderExcluirhttp://amigaotome.blogspot.com.br/
Muito fofo, legal para aqueles layouts mais kawaiis, amei.
ResponderExcluirDream High~
nossa que legal esse efeito*
ResponderExcluirhttp://fabiolucas92.blogspot.com.br/