Drop Caps com CSS
Postado em 13/02/2009 na(s) categoria(s) Padrões WebAs 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?).
Comentado em 13/02/2009 por Marcos:
Muito bacana esse efeito “jornal”. Vou aplicar nos meus projetos assim que possível.
Comentado em 27/08/2009 por Tulio:
Todos os navegadores IEca deveriam ser banidos da face da Terra! Muito bom o seu site, estou me enchendo de novidades! Valeu!