Rogério Lino

Web development and tips

Pullquote

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:

Texto aqui dentro

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](http://www.sitepoint.com/test/pullquote.htm) (inglês) [ http://www.brpoint.net/arquivo/css/pull-quotes.html](http://www.brpoint.net/arquivo/css/pull-quotes.html) (português)

Pullquote com Javascript:

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

Comments