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.