Pull Quotes

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.

Melhores ofertas para:

Jornal, Revista, Destaque, Pull Quote, CSS, Design

[bbl]Jornal,Revista,Destaque,Pull Quote,CSS,Design[/bbl]

• Posts Relacionados
• Compartilhe
• Tags

10 Comentários para “Pull Quotes”

1. Bruno Godoi » Atualizações disse:

   16/novembro/2006 às 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). [...]

   Responder
2. Veridiana Serpa disse:

   17/novembro/2006 às 12:09

   legal a dica

   Responder
   • Bruno Alves disse:

     21/novembro/2006 às 8:43

     Obrigado

     Responder
3. Carlos Eduardo disse:

   21/novembro/2006 às 8:54

   Bem tranqüilo de fazer mesmo.

   Ahh se a gente utilizasse tabelas… Haha iria ser muito chato fazer isso!

   Responder
   • Bruno Alves disse:

     21/novembro/2006 às 9:04

     Realmente, o código seria complicado demais.

     Abraço

     Responder
4. Furmann disse:

   29/novembro/2006 às 16:25

   Bruno obrigado pela dica, gostei muito e já coloquei no meu blog.

   Responder
   • Bruno Alves disse:

     01/dezembro/2006 às 14:21

     (y) Sempre que eu puder…

     Abraço

     Responder
5. Blog HotSync » Pullquote disse:

   19/maio/2007 às 8:25

   [...] (inglês) http://www.brpoint.net/arquivo/css/pull-quotes.html [...]

   Responder
6. Pullquote « Rogério Lino disse:

   27/agosto/2007 às 15:19

   [...] apenas com CSS: http://www.sitepoint.com/test/pullquote.htm (inglês) http://www.brpoint.net/arquivo/css/pull-quotes.html [...]

   Responder
7. Agnaldo disse:

   28/setembro/2007 às 16:08

   Valeu pela dica. Experimente no meu blog e gostei muito.
   U

   Responder