Pullquote

por Administrador - 19/05/2007 - 08:00

Pullquote é um efeito utilizado em jornais (revistas) para destacar uma certa parte do texto. Um exemplo aqui.

Esses efeitos podem ser criados na sua página usando CSS, há quem use também Javascript. Nesse exemplo usaremos apenas CSS.

Crie um novo arquivo HTML. O texto que receberá um destaque ficará assim, dentro da tag blockquote:

<blockquote class="pull">Texto aqui dentro</blockquote>

No CSS definimos o tamanho (largura) da caixa, uma borda em cima e em baixo, texto alinhado ao centro. E pronto.

blockquote.pull {
width: 170px;
border-top: 3px solid #CC0099;
border-bottom: 3px solid #CC0099;
text-align: center;
float: right;
margin: 0px 20px;
padding: 15px;
}

Aí como podemos ver a caixa irá flutuar para a direita, podendo ser alterado como prefirir (left/right).

O exemplo final desse tutorial você confere aqui: pullquote.

Veja mais sobre:

Pullquote apenas com CSS:

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

Pullquote com Javascript:

http://www.fiftyfoureleven.com/sandbox/weblog/2004/jun/javascript-pullquote/ (inglês)

2 Comentários :
Sandro Alencar Fernandes:

Exatamente Remo, É uma solução simples e facilmente aplicada a várias soluções. Muito Legal Jonatan. Abraços
Remo:

Poderia ser definido um PullQuote deste num layout padrão, e a medida em que o texto é alterado podería ter o mesmo efeito ? Ou seja, tenho que alterar constantemente notícias e gostaria de destaques...

Escreva um comentário:


O seu endereço de e-mail não será publicado.