Pull Quotes é um recurso muito usado por revistas e jornais para destacar uma parte do texto, chamando a atenção do leitor para alguns detalhes.
Pull Quotes criam um efeito visual interessante.
Para fazer este destaque é usada uma caixa flutuante e o restante do texto do artigo contorna esta caixa.
Tenho recebido com uma certa freqüência e-mails perguntando como criei este efeito.
Existem várias maneiras de criar este efeito, porém optei pelo mais simples (como normalmente faço).
Para criar este efeito, estou usando simplesmente CSS, poderia, também, estar usando JavaScript ou mesmo um plugin para duplicar o texto que ficaria no Pull Quote.
O método que escolhi é de longe mais simples de implementar e o que carrega menos a página, porém cria uma dificuldade na hora de escrever o artigo, pois é necessário escolher muito bem a frase que estará no Pull Quote para que o texto não fique estranho para quem vai ler através do feed.
As classes CSS que estou usando são:
.destaqueleft {
float:left;
}
.destaqueright {
float:right;
}
.destaqueright, .destaqueleft {
width: 150px;
margin: 10px;
padding: 15px;
border-top: solid 3px #6BA4DC;
border-bottom: solid 3px #6BA4DC;
text-align: center;
font-family:Verdana,Tahoma,Arial,sans-serif;
font-size: 16px;
color: #444444;
}
Para exibir o Pull Quote, basta inserir a frase que precisa ser destacada antes do local que ela deve aparecer, utilizando uma das classes acima.
Exemplo:
<div class="destaqueright">Esta frase estará no pull quote.</div>A frase ao lado estará a direita deste texto.
Jornal, Revista, Destaque, Pull Quote, CSS, Design
[bbl]Jornal,Revista,Destaque,Pull Quote,CSS,Design[/bbl]
RSS feed para os comentários deste artigo.
Desculpe, mas os comentários para este artigo estão fechados.
16/novembro/2006 at 13:34
[...] Já tinha visto esse recurso no Blog do Bruno Alves, o BrPoint, e que hoje escreveu um artigo de como adicionar esse recurso ao Wodpress (se você quer usar também visite o seguinte Pull Quotes” target=”blank”>link). [...]
17/novembro/2006 at 12:09
legal a dica
21/novembro/2006 at 8:43
Obrigado
21/novembro/2006 at 8:54
Bem tranqüilo de fazer mesmo.
Ahh se a gente utilizasse tabelas… Haha iria ser muito chato fazer isso!
21/novembro/2006 at 9:04
Realmente, o código seria complicado demais.
Abraço
29/novembro/2006 at 16:25
Bruno obrigado pela dica, gostei muito e já coloquei no meu blog.
01/dezembro/2006 at 14:21
(y) Sempre que eu puder…
Abraço
19/maio/2007 at 8:25
[...] (inglês) http://www.brpoint.net/arquivo/css/pull-quotes.html [...]
27/agosto/2007 at 15:19
[...] apenas com CSS: http://www.sitepoint.com/test/pullquote.htm (inglês) http://www.brpoint.net/arquivo/css/pull-quotes.html [...]
28/setembro/2007 at 16:08
Valeu pela dica. Experimente no meu blog e gostei muito.
U