19/05/2007

Pullquote

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)