2 de junho de 2008

"Drop caps" legais com CSS

Exemplo de drop caps
Quando você está escrevendo uma estória, poema, ou até mesmo um post, você pode fazer a primeira letra do paragráfo ser estilizada de uma maneira diferente do resto do texto. Essa técnica é chamada de "Drop caps"

Há um grande número de sites usando a tag <span> para conseguir estilizar a primeira letra dos páragrafos. Mas usando o pseudo-elemento first-letter você pode criar facilmente "drop caps" bonitos com css. O :first-letter vai ter como alvo a primeira letra do elemento. Este pseudo-elemento está no CSS 1, então até o IE5+ vai entende-lo :)

CSS



p:first-letter {
display:block;
float:left;/*Faz "flutuar" à esquerda*/
border:1px solid black; /*Adiciona uma borda envolta da letra*/
padding:5px;
margin:4px 5px;
background:url(dropcaps.png); /*Põe uma imagem de fundo*/
font-size:73px;
}

A imagem do exemplo é essa aqui, da wikipédia.

Veja a demonstração.

Também da pra criar out
ros efeitos legais apenas modificando as propriedades. Experimente mudar a cor (propriedade color), a fonte (propriedade font-family), a borda (propriedade border), etc.



Adaptado de: Nice drop caps with css

0 comentários: