Efeito DropCap com CSS
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:
1.
<
p
><
span
style=" font-size:200%; font-style:italic;
2.
color:#f00;">N</
span
>esta frase utilizei o efeito dropcap, aumentando o tamanho
3.
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:
1.
<style type=
"text/css"
>
2.
span.drop {
3.
font-size
:
200%
;
4.
font-style
:
italic
;
5.
color
:
#f00
;
6.
}
7.
</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:
1.
<style type=
"text/css"
>
2.
span.dropf {
3.
float
:
left
;
4.
font-size
:
3.0em
;
5.
font-style
:
italic
;
6.
color
:
#f00
;
7.
}
8.
</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
01.
.....................
02.
<
style
type
=
"text/css"
>
03.
p.dropFL:first-letter {
04.
font-size:200%;
05.
font-style:italic;
06.
color: #f00;
07.
}
08.
</
style
>
09.
</
head
>
10.
<
body
>
11.
<
p
class
=
"dropFL"
> Nesta frase utilizei
12.
o efeito dropcap, aumentando o tamanho da letra"ene",
13.
que inicia a frase, mudando sua cor para vermelho e
14.
inclinando-a.<
p
>
15.
</
body
>
16.
</
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.