Posted by: Rogério Alencar Lino Filho on: 16 Dezembro, 2006
Pullquote é um efeito utilizado em jornais (revistas) para destacar uma certa parte do texto. Um exemplo aqui: link.
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)