Efeito Dropcap com CSS

Este artigo tem por objetivo detalhar as técnicas CSS para obtenção do efeito dropcap.

por Maurício Samy Silva

Objetivo

Este artigo tem por objetivo detalhar as técnicas CSS para obtenção do efeito dropcap.

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.
Nesta frase utilizei o efeito dropcap, aumentando o tamanho da letra "ene", que inicia a frase.

Aplicando estilo inline

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 somente para 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:

<p><span>N</span>esta frase utilizei o efeito dropcap, aumentando o tamanho da letra "ene", que inicia a frase.</p>

A sintaxe para estilo inline

<tagHTML style="propriedade1:valor; propriedade2:valor; ... propriedaden:valor;">bla..bla</tagHTML>.

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:

<span style="font-size200%; font-style:italic; color:#FF0000;">N</span>esta...

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:

<STYLE type="text/css">
span { font-size:200%;
font-style:italic;
color:#FF0000;
}
</STYLE>

Outra maneira de obter o efeito

Você pode obter o efeito dropcap usando a propriedade float. Abaixo a regra CSS:

<span>Este é o efeito desta regra:

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

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.

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.