Drop Caps com CSS
Postado por: Pedro Rogério emDrop Caps são muito utilizados em livros, onde a primeira letra do parágrafo ocupa 2 ou mais linhas do texto, se destacando.
Para conseguir esse efeito é muito simples, observem a seguinte marcação HTML:
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</p>
Agora, no css, faremos o uso do pseudo-seletor :first-letter, onde iremos aplicar estilos a primeira letra do parágrafo:
p:first-letter {
font-size: 4.2em;
float: left;
line-height: 0.6em;
margin: 0.13em 0.13em 0.13em 0;
}
Como viram, não existe segredo, para um melhor entendimento do tutorial, é só dar uma olhada nesse exemplo.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
Bacana. Eu não sabia que isso existia em CSS, ainda mais nessa simplicidade.
E funciona também no IE6+…
Isso tudo graças à pseudo-classe.
Já havia feito isso, e realmente é muito interessante, porém não muito usado.
Abraços.
P.S.: Meu primeiro comentário aqui. =D
Tipo, e como fica aquele desalinhamento do IE6??? Alguma solução boa???
Esperando o CSS3 com o monte de pseudo-seletores que existirão!
Para ajeitar o desalinhamento, configure a regra “vertical-align” da capitular. “vertical-align: baseline;” resolve.
Eu também não conhecia tal pseudo-selector e realmente é muito útil.
em teoria, deveria funcionar…
mas não consegui
Uma pena!
Simplicaria bastante