30 de agosto de 2009

CSS Tutorial - Drop caps, estilizando a primeira letra do texto.



Já viu aqueles textos onde a primeira letra (letra capitular) é estilizada e maior que resto do texto? Essas são as "Drop caps", muito utilizadas em revistas, vamos fazer isso usando CSS !


Ta aí o nosso parágrafo em HTML onde será aplicado o CSS.

<p class="estilizado">
Esse aqui é um parágrafo estilizado com a pseudo-classe
first-letter, que deixa a primeira letra do texto estilizada.
Esse aqui é um parágrafo estilizado com a pseudo-classe
first-letter, que deixa a primeira letra do texto estilizada.
</p>

Vamos usar a pseudo-classe first-letter para fazer esse efeito na primeira letra do parágrafo.

p.estilizado:first-letter{
font-size: 100px;
float: left;
color: #000099;
}

Resultado:



Essa postagem foi esclarecedora? tem alguma opinião sobre esse post? Suas palavras são bem vindas, comente !

4 comentários:

  1. Fala Dan !!!

    Como sempre você dando ótimas dicas de tutorial

    Parabéns amigo

    Queria tbm te agradecer pelas suas visitas ao meu blog e por ter comentado lá !

    obrigado brother

    Tenha uma ótima semana !

    ResponderExcluir
  2. Obrigado, sua dica serviu perfeitamente a um blog que estou fazendo!

    Parabéns pelo trabalho!

    ResponderExcluir
  3. Opa, que bom que essa dica foi útil pra você Guilherme, abraço !

    ResponderExcluir