Pullquotes em CSS

O chamado “Olho” (como bem lembrou nosso amigo Walmar do Fator W – falha minha…)

Intertítulo (que os gringos chamam de "pullquotes") é um recurso para diagramação de revistas e jornais antigo e muito utilizado até hoje. Trata-se daqueles textos que são colocados no decorrer de um artigo ou uma matéria geralmente destacando alguns trechos e tornando a leitura menos densa. Algumas pessoas já o trouxeram para a web mas sua utilização parece ainda não ser unânime. Fica dada a dica.

Você encontra vários artigos e tutoriais sobre este assunto que é bem simples de implementar no seu site. Alguns utilizam JavaScript outros apenas CSS para reproduzir estes pullquotes; você escolhe. Eu acabei de implementar aqui apenas uma única regra de CSS que faz tudo o que eu preciso.

Dessa forma eu não preciso utilizar HTML extra e desnecessário para utilizar este recurso visual.

No HTML eu apenas coloquei uma classe (com o valor de “pullquote”) no elemento que me interessa destacar como um olho. Semanticamente eu considero meu pullquote (ou “olho”) apenas como uma ênfase (strong) e não como a citação de um trecho (blockquote). Por isso eu utilizo o <strong> com uma classe da seguinte maneira.


<p>Texto texto texto texto texto texto
<strong class="pullquote">Conteúdo do intertítulo</strong></p>

No meu CSS eu escrevi a seguinte regra:


.pullquote {
	float:left;
	width:10em;
	margin:0.25em 0.75em 0.25em 0;
	padding:0.5em;
	border:5px solid #1B486F;
	border-width:5px 0;
	text-align:left;
	color:#333;
	font:italic 1.4em/1.3 Georgia;
	}

Dessa forma apenas os elementos com a classe pullquote serão renderizados como olho. Minha escolha foi utilizar apenas o strong para isso, mas dependendo do seu contexto semântico você pode utilizar <blockquote> ou até mesmo apenas um <p>.

Este é apenas o meu exemplo. Dê uma olhada no que o Roger Johansson fez utilizando JavaScript e veja também o que este e este cara fizeram utilizando somente CSS.

  • http://www.pinceladasdaweb.com.br Pedro Rogério

    Show de bola!!!

  • http://jaderubini.wordpress.com/ Jader Rubini

    Boa dica. Nunca tinha pensado em algo do tipo…

    Quanto à semântica, creio que as tags strong, q ou blockquote seriam as mais adequadas, já que o objetivo das pullquotes é enfatizar um trecho do texto, ou também fazer uma citação (longa ou curta) do mesmo. Mas, mesmo assim, ainda ficaria com strong. ;)

  • Diogo Azevedo

    Muito interessante, vou testar no meu blog!

  • http://fatorw.com/ Walmar Andrade

    Em jornalismo isso que você exemplificou chama-se "olho", não "intertítulo". Intertítulo na verdade é algo como no exemplo abaixo:

    Lorem ipsum é filmado com namorado no mar

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris elementum mattis ante. Aliquam accumsan orci nec nisl. Quisque adipiscing lacus at pede.

    REPERCUSSÃO –Morbi id magna eu dolor congue malesuada. Nunc posuere lorem ut neque. Suspendisse nibh nisi, nonummy sit amet, gravida in, lacinia sed, odio. Integer non nisi quis diam eleifend cursus.

  • http://www.thalisvalle.com Thalis Valle

    Dica legal!

  • http://reginaldosousa.com.br/ Reginaldo Sousa

    Muito interessante o artigo.

  • http://www.techzine.com.br Rael B. Riolino

    Legal… é muito raro mesmo ver esse recurso em sites… Mas é interessante.

    Valeu pela dica!

  • Douglas d'Aquin

    vi esse artigo ontem em algum lugar, não lembro aonde e agora lembrei que esqueci de comentar por lá o seguinte

    porque não usar blockquote? que seria a tag correta para o mesmo? é possível criar o mesmo efeito e fica muito mais semântico

    você poderia usar por exemplo a blockquote com uma classe .pull e colocar os mesmos efeitos

    é o correto, afinal "strong" não serve pra fazer citação

  • Douglas d'Aquin

    Só pra complementar

    "Semanticamente eu considero meu pullquote (ou “olho”) apenas como uma ênfase (strong) e não como a citação de um trecho (blockquote)."

    na verdade, sendo esse um recurso editorial impresso, você deveria observar o exemplo real antes de utilizá-lo. E em revistas e jornais, o pullquote é utilizado para citar justamente uma parte do texto, destacando um trecho específico (veja por exemplo a coluna do Diogo Mainardi na Veja, onde tem sempre um pullquote no meio do artigo, ou uma entrevista em uma revista qualquer e vai ver que o texto do pullquote está sempre em algum outro lugar também, portanto uma citação)

  • http://www.eugeniogrigolon.com/ Eugenio Grigolon

    Muito útil, gostei. Parabéns!

  • Bruno Alves

    Muito interessante, nunca tinha pensado em utilizar o pullquote, mas causa um destaque legal.

    Vou começar a usar.

  • http://jaderubini.wordpress.com/ Jader Rubini

    #8, #9

    Como você mesmo acabou dizendo: "em revistas e jornais, o pullquote é utilizado para citar justamente uma parte do texto, destacando um trecho específico".

    Como já disse no meu coment, creio que as duas tags (e ainda a tag q)se adequam semanticamente à situação, mas eu ainda fico com a strong, por se tratar de um destaque de um trecho do texto.

    Pensando bem, as pullquotes podem também ser entendidas como ênfase (o que também não é errado) e, nesse caso, a tag correta passaria a ser unica e exclusivamente a tag em.

    Isso só serve pra comprovar que a semântica é bem mais subjetiva do que imaginamos.

  • http://project47.viscountbox.com Carlos Eduardo

    Simples e interessante.

  • Julio Greff

    Gostei! Acho interessante, já pensei em fazer algo assim, só por distração, mas aí deu preguiça… Parabéns, resumiu bastante.

  • Kayan

    Que bom que vc escreveu de uma forma resumida sobre Pullquotes em CSS, pois estava pesquisando essa semana.

    Valeu

    Kayan

  • Rafael Vaz

    Ótimo artigo!!!

    Gostei muito do aspecto visual, realmente fica igual ao que é feito em revistas e jornais!

  • Wendely Leal

    Parabéns pelo artigo =)

    Bom.. Eu utilizo bastante blockquote nesse sentido mas nunca pensei em utilizar strong. Mesmo por quê nunca utilizo interrompendo no meio de um parágrafo.

    Pensando bem, strong pode almentar a relevância, de um texto que eu mesmo destaquei, para os agentes de busca =)

    Valeu a idéia!

  • Douglas d'Aquin

    #12

    nem ênfase (em) e nem destaque (strong) são adequados para isso, pois eles tratam de destacar um conteúdo justamente dentro de seu próprio contexto, não mediante repetição do texto em um quadro externo. Isso é tarefa justamente da tag blockquote, afinal ela foi feita para essa função.

    a parte do css continua a mesma, basta substituir a tag, para que o texto fique ainda mais semântico, como neste exemplo

    .

    essa é uma das maneiras que pode ser utilizada.

    quando a intenção é destacar uma parte do texto que já existe (portanto haverá repetição) é essencial e correta.

  • http://jaderubini.wordpress.com/ Jader Rubini

    #18

    Acho que as pullquotes são mais um destaque (tá eu exagerei com a ênfase, vai) do que uma citação, já que o que será detacado é de sua própria autoria e está no mesmo documento em que você fez a tal "citação".

    Enfim, poderíamos ficar horas discutindo qual tag seria mais semântica nesse caso, e talvez nenhum de nós mudaríamos de opinião… Como eu disse no outro coment, a semântica é bem mais subjetiva do que imaginamos.

  • Douglas d'Aquin

    hehe claro, mas acho importante levantar essas questões até para que os outros vejam os dois pontos da história.

    como você mesmo disse:

    "já que o que será detacado é de sua própria autoria e está no mesmo documento em que você fez a tal “citação”."

    este seria exatamente o caso do uso de uma blockquote, como já citado anteriormente no exemplo "coluna do Diogo Mainardi na Veja"… dê uma olhada e você vai ver um pullquote com um pedaço já existente do texto dele… este seria o perfeito caso de utilizar a tag blockquote

    acho que o caso de utilizar o exemplo feito pelo henrique seria quando você dá destaque para algo que não pertence ao texto com a simples intenção de enfatizar o artigo com fontes de recursos externos destacados, aí sim

    mas se o quote pertence ao próprio texto, o blockquote é a melhor opção.

    o que acham?

  • Pingback: Sexta-feira dos Web Standards #5 · project.47 - Portfolio e blog sobre Web Standards()

  • Rochester

    Usaria blockquote. No máximo com um strong dentro. Simples: é um bloco separado (mesmo que visualmente pareca junto com o pararafo) do texto então é errado a utilização do strong ali.

    :)

    []'s

  • http://www.graphiarium.com Stucky

    Parabéns! Tutorial/Dicas tem que ser assim mesmo, direto ao ponto, claro e muito útil!

  • http://www.graphiarium.com Stucky

    Oi, tentei aplicar duas na mesma pagina… mudando alguns sets (a largura) e dando un nome diferente e só funciona um deles… Lascou! :-)