Leonardo Caineli Web Designer e Programador de Interfaces

Drop Caps com CSS

As Drop Caps (letras capitulares) são muito utilizadas em jornais e livros, deixando a primeira letra do parágrafo destacada em comparação às demais.

XHTML:

Criamos um simples parágrafo:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean quis sem non magna [...]</p>

CSS:

Usamos o pseudo-seletor “first-letter” no “p” para definirmos a formatação da primeira letra do parágrafo:

p:first-letter {float:left;margin-right:5px;font:bold 60px/60px arial}

Resultado:

É importante saber que:

No CSS deve haver um espaço entre o pseudo-seletor “first-letter” e a abertura da “{“, caso contrário o efeito não funcionará no IE6 (é mole?).