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]

Artigos Relacionados

• Nossas necessidades mudam, já as fontes de informação…
• Folha de estilo em PHP
• SOS WordPress
• Rapidinhas 2 – O retorno
• Novo tema