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.[bbl]Jornal,Revista,Destaque,Pull Quote,CSS,Design[/bbl]
Artigos Relacionados
Comments
10 Comentários
Links Recentes- Últimas do Fórum
- BernaBauer
- FingerMouse
- Aprendendo a dirigir: Lição 1, frear
- Julho é mês de Férias!
- Teste seu blog em diversos navegadores
- LEDs iluminam prédio by Phillips
- Quando você estragar algo, não conserte…
- Princesa “Mangá” Leia em tamanho natural
- O skate contra-ataca
- TV Laser chega no final do ano
- Plante cogumelo de Mario Bros na sua mesa
-
Assine
-
Ofertas
[...] 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). [...]
legal a dica
Obrigado
Bem tranqüilo de fazer mesmo.
Ahh se a gente utilizasse tabelas... Haha iria ser muito chato fazer isso!
Realmente, o código seria complicado demais.
Abraço
Bruno obrigado pela dica, gostei muito e já coloquei no meu blog.
(y) Sempre que eu puder...
Abraço
[...] (inglês) http://www.brpoint.net/arquivo/css/pull-quotes.html [...]
[...] apenas com CSS: http://www.sitepoint.com/test/pullquote.htm (inglês) http://www.brpoint.net/arquivo/css/pull-quotes.html [...]
Valeu pela dica. Experimente no meu blog e gostei muito.
U