Pullquote

Em: CSS

19 mai 2007

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 para ‘Pullquote‘

Avatar

Remo

21/05/2007 às 3:02 pm

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…

Avatar

Sandro Alencar Fernandes

23/05/2007 às 9:18 am

Exatamente Remo,

É uma solução simples e facilmente aplicada a várias soluções. Muito Legal Jonatan.

Abraços

Deixe seu comentário

  • Tweets that mention É big.. É big.. - Blog Área Local -- Topsy.com: [...] This post was mentioned on Twitter by Área Local, Cristhian-Xthor. Cristhian-Xthor said: Para [...]
  • Máira: Muito obrigada! Sucesso para nós... que nascemos no mesmo dia né?! Daqui pra cima, sempre! [...]
  • Carlos Antonio: Fala galera! Parabéns pelos 6 anos de vida da Área Local e pelo sucesso da empresa! Grande abra [...]
  • Karina: Parabéns equipe Área Local. Sucesso! Tenho muito orgulho de vocês... [...]
  • Remo: É isso aí pessoal! Parabéns para a galera toda, vamos em frente e que venham mais e mais desafios [...]