Efeito DropCap com CSS

Publicado em: 02/04/2006

Introdução

Neste tutorial vou mostrar como obter o efeito DropCap com uso de CSS.

Ao final da leitura deste tutorial 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 1

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 2

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 1, a frase alinha-se na parte inferior da primeira letra e segue com a segunda linha abaixo dela, primeira letra.

No exemplo 2, 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:

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

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:

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

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.drop { 
font-size: 200%;
font-style: italic;
color: #f00;
} 
</style>

Nota: Criei uma classe clamada .drop para ser aplicada na tag <span> que contém a primeira letra a estilizar.

E o HTML ficaria assim:

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

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:

<p><span style="font-size:3.0em; color:#f00; font-style:italic; float:left;">N</span>esta frase utilizei o efeito dropcap, aumentando o tamanho da letra "ene", mudando sua cor e inclinando-a. E, aqui usei a propriedade CSS float.<p>

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:

<style type="text/css">
span.dropf { 
float: left; 
font-size: 3.0em;
font-style: italic;
color: #f00;
} 
</style>

Nota: Criei uma classe clamada .dropf para ser aplicada na tag <span> que contém a primeira letra a estilizar.

E o HTML ficaria assim:

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

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

	  .....................
<style type="text/css">
p.dropFL:first-letter {
font-size:200%;
font-style:italic;
color: #f00;
}
</style>
</head>
<body>
<p class="dropFL"> Nesta frase utilizei 
o efeito dropcap, aumentando o tamanho da letra"ene", 
que inicia a frase, mudando sua cor para vermelho e 
inclinando-a.<p>
</body>
</html>

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 <span> 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 <span>;

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.