Banner propaganda da DevMedia - Cursos de desenvolvimento web

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.

Conheça os livros do Maujor®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo