Objetivo

Detalhar a obtenção do efeito DropCap com uso de CSS. Ao final da leitura deste artigo, você estará capacitado a construir o efeito DropCap nos parágrafos de seus documentos web.

O que é dropcap?

Diz-se que foi utilizado um efeito dropcap em um parágrafo ou uma frase quando o tamanho da primeira letra da fase é aumentado e/ou estilizado.

Veja os exemplos a seguir:

Exemplo 01

Nesta frase utilizei o efeito dropcap, aumentando o tamanho da letra "ene", que inicia a frase e mudando a cor, mas note que o efeito está diferente ao da frase seguinte.

Exemplo 02

Nesta frase utilizei o efeito dropcap, aumentando o tamanho da letra "ene", que inicia a frase e mudando a cor, mas note que o efeito está diferente ao da frase anterior.

No exemplo 01, a frase alinha-se na parte inferior da primeira letra e segue com a segunda linha abaixo dela, primeira letra.

No exemplo 02, a frase alinha-se na parte superior da primeira letra e segue com a segunda linha ao lado dela, primeira letra e somente na terceira ocupa a posição abaixo da primeira letra.

São efeitos dropcap diferentes, obtidos com aplicação de regras CSS diferentes.

Aplicando o estilo inline para obter o efeito do exemplo 1

Recordando: Estilo inline é aquele aplicado diretamente no elemento HTML.
Estilo inline tem a desvantagem de dificultar a manutenção, pois quando você tiver que alterar estilos terá que mudar diretamente no elemento HTML, nos documentos em que foram aplicados.

Assim, estilo inline é recomendado para ser aplicado somente em um ou poucos documentos.
Prefira sempre aplicar estilos, via folhas externas de estilo.

HTML tem uma tag específica e muito apropriada para se destacar de um elemento, uma parte dele. É a tag span. Usaremos esta tag para destacar a primeira letra da frase e aplicaremos estilo em span.

A seguir o HTML:

Nesta frase utilizei o efeito dropcap, aumentando o tamanho da letra "ene", que inicia a frase.

Nosso objetivo é aumentar o tamanho da letra "ene". Vamos acresentar mais o seguinte:
mudar a cor para vermelho e inclinar o "ene".

Abaixo a regra CSS inline a ser aplicada na tag span:

style="font-size:200%; font-style:italic; color:#FF0000;">Nesta frase utilizei o efeito dropcap, aumentando o tamanho da letra "ene", que inicia a frase, mudando sua cor para vermelho e inclinando-a.

Este é o efeito desta regra:

Nesta frase utilizei o efeito dropcap, aumentando o tamanho da letra "ene", que inicia a frase, mudando sua cor para vermelho e inclinando-a.

A regra CSS para aplicação do estilo incorporado ou externo

Se o estilo vai ser aplicado via uma folha de estilos incorporada ou externa a sintaxe é conforme abaixo:

Nota: Criei uma classe clamada .drop para ser aplicada na tag que contém a primeira letra a estilizar. E o HTML ficaria assim:

class="drop">Nesta frase utilizei o efeito dropcap, aumentando o tamanho da letra "ene", que inicia a frase, mudando sua cor para vermelho e inclinando-a.

Aplicando o estilo inline para obter o efeito do exemplo 2

O efeito dropcap do exemplo2 você obtém usando a propriedade float. Abaixo a regra CSS aplicada inline:

"font-size:3.0em; color:#FF0000; font-style:italic; float:left;">Nesta frase utilizei o efeito dropcap, aumentando o tamanho da letra "ene", mudando sua cor e inclinando-a. E, aqui usei a propriedade CSS float.

Este é o efeito desta regra:

Nesta frase utilizei o efeito dropcap, aumentando o tamanho da letra "ene", mudando sua cor e inclinando-a. E, aqui usei a propriedade CSS float.

A regra CSS para aplicação do estilo incorporado ou externo

Se o estilo vai ser aplicado via uma folha de estilos incorporada ou externa a sintaxe é conforme abaixo:

Nota: Criei uma classe clamada .dropf para ser aplicada na tag que contém a primeira letra a estilizar. E o HTML ficaria assim:

class="dropf">Nesta frase utilizei o efeito dropcap, aumentando o tamanho da letra "ene", mudando sua cor e inclinando-a. E, aqui usei a propriedade CSS float.

O pseudo elemento :first-letter

As especificações CSS1 normatizam o pseudo-elemento :first-letter que é específico para estilização da primeira letra de um elemento HTML.

A sintaxe geral para este pseudo elemento é: seletor:first-letter {propriedade: valor}

Ou se você quiser criar uma classe: seletor .classe:first-letter {propriedade: valor}

Obtendo o efeito dropcap com o pseudo elemento :first-letter

Observe abaixo a sintaxe da regra CSS e o HTML correspondente para obter o efeito dropcap com uso do pseudo elemento :first-letter

.....................

Nesta frase utilizei o efeito dropcap, aumentando o tamanho da letra "ene", que inicia a frase, mudando sua cor para vermelho e inclinando-a.

Este é o efeito desta regra:

Nesta frase utilizei o efeito dropcap, aumentando o tamanho da letra "ene", que inicia a frase, mudando sua cor para vermelho e inclinando-a.

Nota: Observe que o uso do pseudo-elemento :first-letter faz o mesmo efeito que o uso de uma tag estilizada como mostrado lá em cima no exemplo 1.

Conclusões

Aplicar o efeito dropcap com uso da propriedade float produz um recuo de todas as linhas da frase para depois da primeira letra ao passo que sem float não há este recuo a partir da segunda linha;

O uso do pseudo-elemento :first-letter equivale a estilizar a primeira letra com a tag ;

Aplicar o efeito dropcap com CSS é bastante simples. Você pode estilizar a primeira letra de variadas formas e conseguir efeitos bastante decorativos e interessantes com esta técnica.

Descruba a versatilidade das CSS
Projete conforme as Web Standards.

Um abraço e até a próxima.